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); //输出4
alert("$('.test:hidden') = " + len_b); //输出3
产生不同结果的原因是因为后代选择器与过滤选择器的不同。
带空格的选取的是class为“test”的元素里面的隐藏元素,而不带空格的选取的是隐藏的class为“test”的元素。