[转] jQuery 选择器

    jQuery选择器(Selectors,或译为选择符?)可以说是甚为强大,jQuery能够得以如此之名气,选择器的功劳是功不可没的.利用CSS和XPath选择符的能力,加上自己的”自定义选择符”,几乎无所不能的操作DOM,轻松的获取DOM中的任意元素和元素组.So,掌握好jQuery选择器,对于jQuery的学习就前进了一大步,最终发挥你的想象力,即可写出优雅高效的CODE;而对于新手而言,如何选择DOM中的元素是一个问的最多的问题.
    jQuery官方API中有列出详细的信息,可以移步至:Selectors.

一、jQuery选择器 – 基本(Basics)
在继续学习之前,我们必须具备一些jQuery的基本知识,至少要知道jQuery是使用”$”作为替代符,而且要了解HTML与CSS知识等.
这个Basics在jQuery选择器中是最好掌握,也是使用最多的部分了.因为我们在制作简单的页面效果时是不需要采取多么的复杂的dom选择的.
API文档中把它分为了六部分:

#id
用法: $("#myDiv");
说明: 这个就是直接选择html中的id=”myDiv”,值得注意的是:如果选择器中包含特殊字符，可以用两个斜杠(\\)转义,至少,”.”, “[", "]” 是特殊字符.选择符内可以把双引号改为单引号,不过在复杂点的获取DOM的时候,单引号总是会引发歧义或错误,还是使用双引号吧.

element
用法: $("div");
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.

.class
用法: $(".myClass");
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

.class.class
用法: $(".myClass.myOtherClass");
说明: 这个用法貌似是新的,意思就是仅匹配html中class=”myClass myOtherClass”的元素,而class=”myClass”和class=”myOtherClass”这样的class是不匹配的.

*
用法: $("*");
说明: 匹配所有元素,多用于结合上下文来搜索.目前我还没用上它,不过看说明说是用来结合搜索用的,那么肯定会在大规模应用中用到吧.

selector1, selector2, selectorN
用法: $("div,span,p.myClass")
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素p class=”myClass”
※ 注意
选择器中，逗号表示“或”，空格表示“和”。例如，$("div,span")表示搜索div或span标记的所有元素；$("div span")表示同时满足两个要求，及匹配div块中span的元素，其他的span元素不匹配。

二、jQuery选择器 – 层次(Hierarchy)
我对层次(Hierarchy)的理解:使用构造的选择符来层层过滤DOM元素.
Hierarchy包括了四部分:

说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

parent > child
用法: $("form > input") ;
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用XPath选择符的.

prev + next
用法: $("label + input") ;
说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的.

prev ~ siblings
用法: $("form ~ input") ;
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

三、jQuery选择器 – 基础过滤(Basic Filters)
基础过滤(Basic Filters)是相对于以后要学习的其他的过滤方法而言的,基础过滤(我小学没毕业,不知道是不是这样翻译)所过滤的内容都是利用jQuery获得到的DOM元素,我的理解就是像一个大筛子,把利用那些基本选择器获得到的集合进行按规则剔除.
Basic Filters包括了十部分,稍稍有点多:

:first
用法: $("tr:first") ;
说明: 匹配找到的第一个元素.我以前就遇到了取第一个和最后一个的情况.

:last
用法: $("tr:last") ;
说明: 匹配找到的最后一个元素.与 :first 相对应.

:not(selector)
用法: $("input:not(:checked)") ;
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

:even
用法: $("tr:even") ;
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

: odd
用法: $("tr:odd") ;
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

:eq(index)
用法: $("tr:eq(0)") ;
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

:gt(index)
用法: $("tr:gt(0)") ;
说明: 匹配所有大于给定索引值的元素.

:lt(index)
用法: $("tr:lt(2)") ;
说明: 匹配所有小于给定索引值的元素.

:header
用法: $(":header").css("background", "#EEE") ;
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

:animated
例子:

说明: 匹配所有正在执行动画效果的元素.这个需要好好理解下,因为看起来比之前的理解上都难一点.其中,toggleClass是添加/移除class;slideToggle是收缩/伸展块级元素.也就是说slideToggle让其中的一个div在不断的执行动画(收缩/伸展),当点击button时,就用div:animated匹配到了这个元素上,所以改变了颜色.

四、jQuery选择器 – 内容过滤(Content Filters)
对于jQuery的学习,最好的办法就是实际使用它,并多多的使用!不然很快就会忘记的.

:contains(text)
用法: $("div:contains('John')") ;
说明: 匹配包含给定文本的元素.这个选择器比较有用(话说都很有用),当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

:empty
用法: $("td:empty") ;
说明: 匹配所有不包含子元素或者文本的空元素.嗯,这个看名字就大概知道是什么意思了,就是元素里面没有任何东西(子元素/内容)的时候就匹配.

:has(selector)
用法: $("div:has(p)").addClass("test") ;
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

:parent
用法: $("td:parent") ;
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

五、jQuery选择器 – 可见度过滤(Visibility Filters)
可见度过滤(Visibility Filters),无非就是能看见和不能看见.所以Visibility Filters只包括了两部分:

:hidden
用法: $("tr:hidden")
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

:visible
用法: $("tr:visible")
说明: 匹配所有的可见元素.

六、jQuery选择器 – 属性过滤(Attribute Filters)
属性过滤(Attribute Filters)的内容就是html元素中的属性,例如 name, id, class, 但是不是指的其值,是指属性本身.我在每篇文章里面都讲一下自己对这个选择器系列的理解,原因其一是方便理解其含义并记忆,其二就是”混个脸熟”,即便记不住,在以后用到的时候也可以很快的查找api并应用上.

其包括以下几个选择器:

[attribute]
用法: $("div[id]") ;
说明: 匹配包含给定属性的元素.注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可.是的,新版必须去掉@符号,这个改变相信使用老版本的童鞋会习惯的.例子中是选取了所有带”id”属性的div标签.

[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true);
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.

[attribute!=value]
用法: $("input[name!='newsletter']").attr("checked", true);
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用场.

[attribute^=value]
用法: $("input[name^='news']") ;
说明: 匹配给定的属性是以某些值开始的元素.嗯,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

[attribute$=value]
用法: $("input[name$='letter']") ;
说明: 匹配给定的属性是以某些值结尾的元素.

[attribute*=value]
用法: $("input[name*='man']") ;
说明: 匹配给定的属性是以包含某些值的元素.

[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']") ;
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导致什么宇宙飞船爆炸还是什么的事了.有点耸人听闻,但是等我们使用的非常非常多了以后,自然就很容易分开区别了.

七、jQuery选择器 – 后代过滤(Child Filters)
后代过滤(Child Filters)的意思就是利用其他jQuery选择器选择到了一组dom,而其都具有相同的属性与特征,无法再细化选择的时候,Child Filters 此时就派上了用场了.它就是用来选择此组元素中的第几个.

其包括以下几个选择器:

:nth-child(index/even/odd/equation)
用法: $("ul li:nth-child(2)") ;
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

:first-child
用法: $("ul li:first-child") ;
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

:last-child
用法: $("ul li:last-child") ;
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

: only-child
用法: $("ul li:only-child") ;
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

八、jQuery选择器 – 表单(Forms)
这组表单(Forms)选择器内容稍稍多了点,有十一个,其实也就是input的那些type啦,但是熟悉html的童鞋快速的掌握这些一点问题都没有!
其包括以下几个选择器:

:input
用法: $(":input") ;
说明: 这个自然就是选择所有的input类型了,不管type等于何值(首先得是符合游戏规则的).

:text
用法: $(":text") ;
说明: 匹配所有的单行文本框.

:password
用法: $(":password") ;
说明: 匹配所有密码框.

:radio
用法: $(":radio") ;
说明: 匹配所有单选按钮.

:checkbox
用法: $(":checkbox") ;
说明: 匹配所有复选框

:submit
用法: $(":submit") ;
说明: 匹配所有提交按钮.

:image
用法: $(":image") ;
说明: 匹配所有图像域.

:reset
用法: $(":reset") ;
说明: 匹配所有重置按钮.

:button
用法: $(":button") ;
说明: 匹配所有按钮.这个包括直接写的元素button.

:file
用法: $(":file") ;
说明: 匹配所有文件域.

:hidden
用法: $("input:hidden") ;
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,看个例子:

九、jQuery选择器 – 表单过滤(Form Filters)
表单过滤(Form Filters)是jQuery文档中分出来的选择器中的最后一组,但这并不表示我们仅仅应用这些选择器就能够驰骋DOM海洋了,我们还需要学习后面的过滤器等等.
其包括以下几个选择器:

:enabled
用法: $("input:enabled") ;
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

:disabled
用法: $("input:enabled") ;
说明: 匹配所有不可用元素.与上面的那个是相对应的.

:checked
用法: $("input:checked") ;
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

:selected
用法: $("select option:selected") ;
说明: 匹配所有选中的option元素.

作为一个总结，可参考：jQuery Cheat Sheet 。