首页 > 代码库 > jQuery笔记（一）jQuery选择器

jQuery笔记（一）jQuery选择器

2024-10-15 22:34:02   216人阅读

一、前言

编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步. 

技术分享

二、Dom对象与jQuery对象的转换

(1) Dom转jQuery包装集 （$(Dom)）

如果要使用jQuery提供的函数,  就要首先构造jQuery包装集.  我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集,比如:

  1. $("#testDiv");

    上面语句构造的包装集只含有一个id是testDiv的元素. 

    或者我们已经获取了一个Dom元素,比如:

  2. var div = document.getElementById("testDiv");

    上面的代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集【重要】:

  3. var domToJQueryObject = $(div);

    小窍门:因为有了智能感知, 所以我们可以通过智能感知的方法列表来判断一个对象啊是Dom对象还是jQuery包装集.

     

    (2) jQuery包装集转Dom对象（索引或遍历）

    jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:

  4. var domObject = $("#testDiv")[0];

    注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象!

    jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,比如:

  5. $("#testDiv").each(function() { alert(this) })

    如果我们要使用jQuery的方法操作Dom对象,怎么办? 用上面介绍过的转换方法即可:

  6. $("#testDiv").each(function() { $(this).html("修改内容") })

    小结: 先让大家明确Dom对象和jQuery包装集的概念, 将极大的加快我们的学习速度. 我在学习jQuery的过程中就花了很长时间没有领悟到两者的具体差异, 因为书上并没有专门讲解两者的区别, 所以经常被"this指针为何不能调用jQuery方法"等问题迷惑.  直到某一天豁然开朗, 发现只要能够区分这两者, 就能够在写程序时变得清清楚楚. 

     

    三、jQuery选择器中各类选择器

    　　jQuery的选择器大体分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器。作为初学者而言，恐怕一时难以掌握如此之多的选择器，个人认为，掌握基本选择器以及会一些过滤选择器即可胜任大部分我们需要的操作。何况很多选择器与CSS如此相像！下面就分别来介绍这四大类选择器，其中过滤选择器还细分了6类，都用了表格的方式，这样即使到了以后项目中需要的时候也可以直接查阅这些表格。

    1.基本选择器（可以完成绝大多数的工作）

    　　具体介绍及用法见表1。

                                                 　表1                                           基本选择器　　

    选择器

    描述

    返回

    示例

    #id

    根据给定的id匹配一个元素　　

      

    单个元素

    $("#test")选取id为test的元素

    .class　

    根据给定的类名匹配元素　

      

    集合元素　

    $(".test")选取所有class为test的元素

    element

    根据给定的元素名匹配元素

      

    集合元素

    $("p")选取所有的<p>元素

    *

    匹配所有元素

      

    集合元素

    $(*)选取所有元素

    selector1,selector2,

    ...,selectorN

    将每一个选择器匹配到的元素

    合并后一起返回

    集合元素　　

    $("div,span,p.myClass")选取所有<div>

    <span>和拥有myClass的<p>标签的一组

    元素

      

    2.层次选择器

    　　即通过DOM元素之间的层次关系来获取指定的元素，具体介绍及用法见表2

    　　　　　　　　　　　　表2                                                                 层次选择器

    选择器　

    描述　

    返回

    示例

    $("ancestor descendant")

    选取ancestor里的所有descendan

    元素

    集合元素

    $("div span‘)选取<div>里的

    所有<span>元素

    $("parent>child")

    选取parent元素下的child元素　　

    集合元素　

    $("div>span")选取<div>里的所有<span>子元素

    $("prev+next")

    选取紧接在prev元素后的next元素

    单个元素

    $(".one+div")选取class为one的下个<div>同辈元素

    $("prev~siblings")

    选取prev元素之后的所有siblings元素

    集合元素

    $("#two~div")选取id为two的元素后面

    所有<div>同辈元素

     

    注意$("ancestor descendant")与$("parent>child")的区别：$("ancestor descendant")选取的是所有的后代元素，而$("parent>child")选取的只是其parent 元素下的子元素（child元素）。

     

    3.过滤选择器

    　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，选择器都以(:)开头。

    　　过滤选择器可以分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、和表单对象属性过滤选择器。

    3.1基本过滤选择器

    　　具体用法见表3

                                 　　 表3                   　　　　　　　　　　　　        基本过滤选择器

    选择器

    描述

    返回

    示例

    :first

    选取第一个元素

    单个元素

    $("div:first")选取所有<div>元素中的第一个<div>元素

    :last

    选取最后一个元素

    单个元素

    $("div:last")选取所有<div>元素里的最后一个<div>元素

    :not(selector)

    去除所有与给定选择器匹配的元素

    集合元素

    $("input :not(.myClass)")选取class不是myClass的

    <input>元素

    :even

    选取索引是偶数的所有元素，

    索引下标从0开始

    集合元素

    $("input :even")选取索引是偶数的<input>元素

    :odd

    选取索引是奇数的所有元素，

    索引下标从0开始

    集合元素

    $("input :odd")选取索引是奇数的<input>元素

    :eq(index)

    选取索引等于index的元素

    单个元素

    $("input:eq(0)")选取索引为0<input>元素

    :gt(indext)

    选取索引大于index的元素

    集合元素

    $("input:gt(1)")选取索引大于1的<input>元素

    :lt(index)

    选取索引小于index的元素

    集合元素

    $("input:lt(1)")选取索引小于1的<input>元素

    :header

    选取所有的标题元素

    集合元素

    $(":header")选取所有的<h1><h2><h3>...

    :animated

    选取当前正在执行动画的所有元素

    集合元素

    $("div:animated")选取正在执行动画的<div>元素

    :focus

    选取当前获取焦点的元素

    集合元素

    $(":focus")选取当前获得焦点的元素

    3.2内容过滤选择器

     　　具体用法见表4

                                     表4                　　　　　　   　　　　        内容过滤选择器

    选择器

    描述　　

    返回

    示例

    :contains(text)

    选取文本内容为"text"的元素

    集合元素

    $("div:contains(‘我‘)")选取含有文本"我"的<div>元素

    :empty

    选取不包含子元素或者文本的空元素

    集合元素

    $("div:empty")选取不包含子元素的<div>空元素

    :has(selector)

    选取含有选择器所匹配的元素的元素

    集合元素

    $("div:has(p)")选取含有<p>元素的<div>元素

    :parent

    选取含有子元素或者文本的元素

    集合元素

    $("div:parent")选取拥有子元素或者文本的<div>元素

    3.3可见性过滤选择器

    　　可见性过滤选择器是根据元素的可见和不可见的状态来选择相应的元素。具体见表5.

                     　                 表5             　　　　　　　　         可见性过滤选择器

    选择器

    描述

    返回

    示例

    :hidden

    选取所有不可见的元素

    集合元素

    $("input:hidden")选取所有不可见的<input>

    :visible

    选取所有可见的元素

    集合元素

    $("div:visible")选取所有可见的<div>元素

    3.4属性过滤选择器

    　　属性选择器的过滤规则是通过元素的属性来获取相应的元素，属性都用包含在[]中,并没有冒号。具体见表6.

                                       表6                     　　　　　　　　　　 属性过滤选择器

    选择器

    描述

    返回

    示例

    [attribute]

    选取拥有此属性的元素

    集合元素

    $("div[id]")选取拥有属性为id的<div>元素

    [attribute=value]

    选取属性值为value的元素

    集合元素

    $("div[title=test]")选取属性title为"test"的<div>元素

    [attribute!=value]

    选取属性值不为value的元素

    集合元素

    $("div[title!=test]")选取属性title不为"test"的<div>元素，没有属性titl

    e的<div>元素也为被选取

    [attribute^=value]

    选取属性的值以value开始的元素

    集合元素

    $("div[title^=test]")选取属性title以"test"开始的<div>元素

    [attribute$=value]

    选取属性的值以values结尾的元素

    集合元素

    $("div[title$=test]")选取属性title以"value"结束的<div>元素

    [attribute*=value]

    选取属性的值含有value的元素

    集合元素

    $("div[title*=test]")选取属性title中含有"title"的<div>元素

    [attribute|=value]

    选取属性等于给定字符串或以该字符为

    前缀（该字符串后跟一个连字符"-"）的元素

    集合元素

    $("div[title|=‘en‘]")选取属性title为"en"或者以"en"开头字符串的<div>

    元素

    [attribute~=value]

    选取属性用空格分隔的值中包含一个给定值

    的元素

    集合元素

    $("div[title~=‘uk‘]")选取属性title用空格分隔值中包含"uk"的<div>

    元素

    [attribute1][attribute]

    ...[attributeN]

    一个复合属性选择器，没选择一次，缩小一

    次范围

    集合元素

    $("div[id][title$=test]")选取拥有属性id并且属性title以test结尾的

    <div>元素

    3.5 子元素过滤选择器

    　　在用子元素过滤选择器时要弄清父元素与子元素的关系。具体用法见表7

                                    表7                   　　　　　　　　　　　　    子元素过滤选择器

    选择器　

    描返

    返回　

    示例

    :nth-child

    (index/eve/

    odd/equation)

    选取每个父元素下的第index个

    子元素或者奇偶元素（index从1开始）

    集合元素

    :eq(index)只匹配一个元素，而:nth-child将为每一个

    父元素匹配子元素，并且:nth-child(index)的index是从1开始，

    而:eq(index)是从0开始。

    :first-child　　

    选取每个父元素的第一个子元素

    集合元素

    ：first只返回单个元素，而:first-child选择器将为每个父元素匹配

    第一个子元素。

    $("ul li:first-child")选取每一个ul中第一个<li>元素

    :last-child

    选取每个父元素的最后一个子元素

    集合元素

    $("ul li:last-chilid")选取每一个ul中的最后一个<li>元素

    :only-child

    如果某个元素是它父元素中的唯一一个

    子元素，那么它就会被匹配，如果父元

    素中含有其他元素，那么将不会匹配

    集合元素

    $("ul li:onyl-child")选取ul中是唯一子元素的<li>元素

    3.6 表单对象属性过滤选择器

    　　表单对象属性过滤选择器主要是针对表单元素中enabled、disabled、checked、selected等属性进行过滤。具体用法见表8

                                      表8            　　　　　　　　      表单对象属性过滤选择器

    选择器　

    描述

    返回

    示例

    :enabled

    选取所有可用元素

    集合元素

    $("#form1:enabled")选取id为"form1"的表单的所有可用元素

    :disabled

    选取所有不可用元素

    集合元素

    $("#form2:disabled")选取id为"form2"的表单中的所有不可用的元素

    :checked

    选取所有被选中的元素(单选框，复选框)

    集合元素

    $("input:checked")选取所有被选中的<input>元素

    :seleted

    选取所有被选中的选项元素(下拉列表)

    集合元素

    $("select option:selected")选取所有被选中的选项元素

       

    4.表单选择器

    　　专门用于开发者获取表单中的某个或者某种类型的元素。对于用户的交互性有着很重要的影响。具体用法见表9.

    　　　　　　　　　　  　表9       　　　　　　　　　　　　　　　　　　表单选择器

    选择器

    描述

    返回

    示例

    :input

    选取所有<input>、<textarea>、<select>

    和<button>元素

    集合元素

    $(":input")选取所有<input>、<textarea>、

    <select>和<button>元素

    :text

    选取所有的单行文本框

    集合元素

    $(":text")选取所有的单行文本框

    :password

    选取所有的密码框

    集合元素

    $(":password")选取所有的密码框

    :radio

    选取所有的单选框

    集合元素

    $(":radio")选取所有的单选框

    :checkbox

    选取所有的多选框

    集合元素

    $(":checkbox")选取所有的多选框

    :submit

    选取所有的提交按钮　

    集合元素

    $(":submit")选取所有的提交按钮

    :image

    选取所有的图相按钮

    集合元素

    $(":image")选取所有的图相按钮

    :reset

    选取所有的重置按妞

    集合元素

    $(":reset")选取所有的重置按钮

    :button

    选取所有的按钮

    集合元素

    $(":button")选取所有的按钮

    :file

    选取所有的上传域

    集合元素

    $(":file")选取所有的上传域

    :hidden

    选取所有的不可见元素

    集合元素

    $(":hidden")选取所有的不可见元素

    四、总结

    此次学习笔记主要写了关于jQuery选择器，jQuery选择器是jQuery的基础，只有将jQuery选择器熟练掌握，才能掌握jQuery中DOM操作、以及对表单、表格的操作、在Ajax的应用等等。

     

    五、参考资料：

    关于jQuery相关的文章：http://www.cnblogs.com/xia520pi/archive/2012/05/12/2497001.html

    jQuery学习笔记(一)jQuery选择器 ：http://www.cnblogs.com/yanfengfree/p/3527608.html#t3

jQuery笔记（一）jQuery选择器


联系
我们