jQuery选择器（二）

3、过滤选择器

通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。

1）基本过滤选择器

• :first：选取第1个元素。
• :last：选取最后一个元素
• :not(selector)：去除所有与给定选择器匹配的元素。
• :even：选取索引是偶数的所有元素，索引从0开始。
• :odd：选取索引是奇数的所有元素，索引从0开始。
• :eq(index)：选取索引等于index的元素（index从0开始）。
• :gt(index)：选取索引大于index的元素（index从0开始）。
• :lt(index)：选取索引小于index的元素（index从0开始）。
• :header：选择所有的标题元素，例如h1、h2、h3等。
• :animated：选择当前正在执行动画的所有元素。
• :lang(language)：选择指定语言的所有元素。
• :root：选择该文档的根元素。

直接使用刚才的例子。

//改变第一个<span>元素的背景色$("span:first").css('background', '#777777');//改变最后一个<span>元素的背景色$("span:last").css('background', '#AABBCC');//改变class不为two的<div>元素的背景色$("div:not(.two)").css('background', '#BBFFAA');

//改变索引值为偶数的<div>元素的背景色$("div:even").css('background', '#AABBCC');//改变索引值为奇数的<div>元素的背景色$("div:odd").css('background', '#BBFFAA');

//改变索引值等于3的<div>元素的背景色$("div:eq(3)").css('background', '#AABBCC');//改变索引值大于3的<div>元素的背景色$("div:gt(3)").css('background', '#BBFFAA');//改变索引值小于3的<div>元素的背景色$("div:lt(3)").css('background', '#777777');//改变当前正在执行动画的元素的背景色$(":animated").css('background', '#F11431');

2）内容过滤选择器

• :contains(text)：选择含有文本内容为“text”的元素。
• :empty：选择不包含子元素或者文本的空元素。
• :has(selector)：选取含有选择器所匹配的元素的元素。
• :parent：选取含有子元素或者文本的元素。

在之前的例子中，在class为three的div中加一个<div class="mini"></div>。

再使用选择器调整样式：

//改变含有文本ne的<div>元素的背景色$("div:contains('ne')").css('background', '#BBFFAA');//改变不包含子元素的<span>空元素的背景色$("div:empty").css('background', '#AABBCC');//改变含有<p>的<span>元素的背景色$("span:has(p)").css('background', '#777777');

3）可见性过滤选择器

• :hidden：选取所有不可见的元素。
• :visible：选取所有可见的元素。

4）属性过滤选择器

• [attribute]：选取拥有此属性的元素。
• [attribute = value]：选取属性的值为value的元素。
• [attribute != value]：选取属性的值不等于value的元素。
• [attribute ^= value]：选取属性的值以value开始的元素。
• [attribute $= value]：选取属性的值以value结束的元素。
• [attribute *= value]：选取属性的值含有value的元素。
• [selector1][selector2][selectorN]：用属性选择器合并一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围。
• [attribute |= value]：选择指定属性值等于给定字符串或以该文字串为前缀（该字符串后跟一个连字符”-“）的元素。
• [attribute ~= value]：选择指定属性用空格分隔的值中包含一个给定值的元素。

拿其中一个举例，其它的类似。

//改变含有属性id且title为1的<div>元素的背景色$("div[class][title=1]").css('background', '#BBFFAA');

5）子元素过滤选择器

• :nth-child(index/even/odd/equation)：选取每个父元素下的第index个子元素（index从1算起）或者奇偶元素。
• :first-child：选择每个父元素的第1个子元素。
• :last-child：选择每个父元素的最后一个子元素。
• :only-child：如果某个元素是它父元素的唯一子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。
• :nth-last-child：选择所有他们父元素的第n个子元素。计数元素从最后一个开始到第一个。

【注】

• :first只匹配一个单独的元素，但是:first-child可以匹配多个元素即为每个父级元素匹配第一个子元素。同样的，:last只匹配一个单独的元素，但是:last-child可以匹配多个元素即为每个父级元素匹配最后一个子元素。
• 如果子元素只有一个的话，:first-child与:last-child是同一个。
• :nth-child(index)从1开始的，而eq(index)是从0开始的。
• nth-child(n)与:nth-last-child(n)的区别前者是从前往后计算，后者从后往前计算。

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

• :enabled：选取所有可用元素。
• :disabled：选取所有不可用元素。
• :checked：选取所有被选中的元素（单选框，复选框）。
• :selected：选取所有被选中的选项元素（下拉列表）。

建立一个表单页面，里面包含文本框、多选框和下拉列表。

<form id="form1" action="#">    可用元素：<input name="add" value="可用文本框"/><br>    不可用元素：<input name="email" disabled="disabled" value="不可用文本框"><br>    可用元素： <input name="che" value="可用文本框"><br>    不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"><br>    <br>    多选框：<br>    <input type="checkbox" name="newsletter" checked="checked" value="test1">test1    <input type="checkbox" name="newsletter" value="test2">test2    <input type="checkbox" name="newsletter" value="test3">test3    <input type="checkbox" name="newsletter" checked="checked" value="test4">test4    <input type="checkbox" name="newsletter" value="test5">test5    <div></div>    <br>    下拉列表1：<br>    <select name="test" multiple="multiple" style="height:100px">        <option>浙江</option>        <option selected="selected">湖南</option>        <option>北京</option>        <option selected="selected">天津</option>        <option>广州</option>        <option>湖北</option>    </select>    <br><br>    下拉列表2：<br>    <select name="test2" >        <option>浙江</option>        <option>湖南</option>        <option selected="selected">北京</option>        <option>天津</option>        <option>广州</option>        <option>湖北</option>    </select>    <br>    <div></div></form>

用选择器操作，代码如下：

//改变表单内可用<input>元素的值$("#form1 input:enabled").val("这里变化了！");//获取多选框选中的个数var n = $("input:checked").length;console.log(n);//获取下拉框中选中的内容var str = $("select :selected").text();console.log(str);

4、表单选择器：获取表单的某个或某类型的元素。

• :input：选取所有、、和元素。
• :text：选取所有的单行文本框。
• :password：选取所有的密码框。
• :radio：选取所有的单选框。
• :checkbox：选取所有的多选框。
• :submit：选取所有的提交按钮。
• :image：选取所有的图像按钮。
• :reset：选取所有的重置按钮。
• :button：选取所有的按钮。
• :file：选取所有的上传域。
• :hidden：选取所有不可见元素。

再给出一个表单页面，HTML代码如下：

<form id="form1" action="#">    <input type="button" value="Button"><br>    <input type="checkbox" name="c">1<input type="checkbox" name="c">2<input type="checkbox" name="c">3<br>    <input type="file"><br>    <input type="hidden"><div style="display:none">test</div><br>    <input type="password"><br>    <input type="radio" name="a">1<input type="radio" name="a">2<br>    <input type="reset"><br>    <input type="submit" value="提交"><br>    <input type="text"><br>    <select><option>Option</option></select><br>    <textarea rows="5" cols="20"></textarea><br>    <button>Button</button><br></form>

举几个选择器的操作，其它与之类似。

//获取表单内表单元素的个数var n1 = $("#form1 :input").length;console.log(n1);//获取表单内单行文本框的个数var n2 = $("#form1 :text").length;console.log(n2);//获取表单内密码框的个数var n3 = $("#form1 :password").length;console.log(n3);

四、选择器中的一些注意事项

1、选择器中含有特殊符号的注意事项

• 选择器中含有“.”、“#”、“(”或“]”等特殊字符——使用转义符转义解决。
• 属性选择器的@符号问题——使用1.3.3以上版本就不需要在属性前添加@符号。

2、选择器中含有空格的注意事项

选择器中的空格不能忽视，多一个和少一个都有不同的结果。

举个例子。HTML代码如下：

<div class="test">    <div style="display:none;">aa</div>    <div style="display:none;">bb</div>    <div style="display:none;">cc</div>    <div class="test" style="display:none;">dd</div></div><div class="test" style="display:none;">ee</div><div class="test" style="display:none;">ff</div>

然后使用选择器获取它们。

var $t_a = $('.test :hidden');  //带空格，后代选择器var $t_b = $('.test:hidden');   //不带空格，过滤选择器var len_a = $t_a.length;var len_b = $t_b.length;alert("$('.test :hidden') = " + len_a); //输出4alert("$('.test:hidden') = " + len_b);  //输出3

产生不同结果的原因是因为后代选择器与过滤选择器的不同。
带空格的选取的是class为“test”的元素里面的隐藏元素，而不带空格的选取的是隐藏的class为“test”的元素。