jqurey过滤选择器详解

内容提要：子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别…

4．属性过滤选择器

　　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如下表所示。

选择器	描 述	返 回	示 例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取拥有属性id的元素
[attribute=value]	选取属性的值为value的元素	集合元素	$("div[title=test]")选取属性title为"test"的<div>元素
[attribute!=value]	选取属性的值不等于value的元素	集合元素	$("div[title!=test]")选取属性title不等于"test"的<div>元素（注意：没有属性title的<div>元素也会被选取）
[attribute^=value]	选取属性的值以value开始的元素	集合元素	$("div[title^=test]")选取属性title以"test"开始的<div>元素
[attribute$=value]	选取属性的值以value结束的元素	集合元素	$("div[title$=test]")选取属性title以"test"结束的<div>元素
[attribute*=value]	选取属性的值含有value的元素	集合元素	$("div[title*=test]")选取属性title含有"test"的<div>元素
[selector][selector2] [selectorN]	用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围	集合元素	$("div[id][title$='test']")选取拥有属性id，并且属性title以“test”结束的<div>元素

　　接下来使用属性过滤选择器来对<div>和<span>等元素进行操作，示例如下表所示。

功 能	代 码
改变含有属性title的<div>元素的背景色	$('div[title]').css("background", "#bbffaa")
改变属性title值等于“test”的<div>元素的背景色	$('div[title=test]').css("background", "#bbffaa")
改变属性title值不等于“test”的<div>元素的背景色	$('div[title!=test]').css("background", "#bbffaa")
改变属性title值以“te”开始的<div>元素的背景色	$('div[title^=te]').css("background", "#bbffaa")
改变属性title值以“est”结束的<div>元素的背景色	$('div[title$=est]').css("background", "#bbffaa")
改变属性title值含有“es”的<div>元素的背景色	$('div[title*=es]').css("background", "#bbffaa")
改变含有属性id，并且属性title值 含有“es”的<div>元素的背景色	$('div[id][title*=es]').css("background", "#bbffaa")

5．子元素过滤选择器

　　子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。

　　子元素过滤选择器的介绍说明如下表所示。

选择器	描 述	返 回	示 例
:nth-child (index/even/ odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素,(index从1算起)	集合元素	:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且：nth-child(index)的index是从1开始的，而:eq(index)是从0算起的
:first-child	选取每个父元素的第1个子元素	集合元素	first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。 例如$("ul li:first-child");选取每个<ul>中第1个<li>元素
:last-child	选取每个父元素的最后一个子元素	集合元素	同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。 例如$("ul li:first-child");选择每个<ul>中最后一个<li>元素
:only-child	如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素	$("ul li:only-child")在<uI>中选取是惟一子元素的<li>元素

:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。

(1) :nth-child(even)能选取每个父元素下的索引值是偶数的元素。

(2) :nth-child(odd)能选取每个父元素下的索引值是奇数的元素。

(3) :nth-child(2)能选取每个父元素下的索引值等于2的元素。

(4) :nth-child(3n)能选取每个父元下的索引值是3的倍数的元素。（n从0开始）

(5) :nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。（n从0开始）

　　接下来利用刚才所讲的选择器来改变<div>元素的背景色，示例如下表所示。

功 能	代 码
改变每个class为one的<div>父元素下的第2个子元素的背景色	$('div.one :nth-child(2)').css("background", "#bbffaa")
改变每个class为one的<div>父元素下的第1个子元素的背景色	$('div.one :first-child').css("background", "#bbffaa")
改变每个class为one的<div>父元素下的最后一个了元素的背景色	$('div.one :last-child').css("background", "#bbffaa")
如果class为one的<div>父元素下只有一个子元素，那么则改变这个子元素的背景色	$('div.one :only-child').css("background", "#bbffaa")

　　注意：eq(index)只匹配一个元素，而:nth- child将为每一个符合条件的父元素匹配子元素。同时应该注意到nth-child(index)的index是从1开始的，而:eq(index)是 从0开始的。同理 :first和:first-child，:last和:last-child也类似。

6．表单对象属性过滤选择器

　　此选择器主要是对所选择的表单元素进行过滤，例比如选择被选中的下拉框，多选框等等。表单对象属性过滤选择器的介绍说明如下表所示。

选择器	描 述	返 回	示 例
:enabled	选取所有可用元素	集合元素	$("#form1 :enabled");选取id为“form1”的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	$("#form2 :disabled");选取id为“form2”的表单内的所有不可用元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素	$("input :checked");选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素（下拉列表）	集合元素	$("select :selected");选取所有被选中的选项元素

　　为了演示这些选择器，需要制作一个包含表单的网页，里面要包含文本框、多选框和下拉列表，HTML代码如下：

1. <form id="form1" action="#">
2. 可用元素：<input name="add" value="可用文本框"/> <br/>
3. 不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
4. 可用元素： <input name="che" value="可用文本框" /><br/>
5. 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
6. <br/>
7. 多选框：<br/>
8. <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
9. <input type="checkbox" name="newsletter" value="test2" />test2
10. <input type="checkbox" name="newsletter" value="test3" />test3
11. <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
12. <input type="checkbox" name="newsletter" value="test5" />test5
13. <div></div>
15. <br/><br/>
16. 下拉列表1：<br/>
17. select name="test" multiple="multiple" style="height:100px">
18. <option>浙江</option>
19. <option selected="selected">湖南</option>
20. <option>北京</option>
21. <option selected="selected">天津</option>
22. <option>广州</option>
23. <option>湖北</option>
24. </select>
26. <br/><br/>
27. 下拉列表2：<br/>
28. <select name="test2" >
29. <option>浙江</option>
30. <option>湖南</option>
31. <option selected="selected">北京</option>
32. <option>天津</option>
33. <option>广州</option>
34. <option>湖北</option>
35. </select>
36. br/><br/>
38. <div></div>
39. </form>

图2 初始状态

　　现在用jQuery的表单过滤选择器来操作它们，示例如下表所示。

功 能	代 码
改变表单内可用<input>元素的值	$("#form1 input:enabled").val("这里变化了！");
改变表单内不可用<input>元素的值	$("#form1 input:disabled").val("这里变化了！");
获取多选框选中的个数	$("#input :checked").length;
获取下拉框选中的内容	$("select :selected").text();