《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟练使用选择器，不仅可以简化代码，而且可以达到事半功倍的效果。

---

2.1 jQuery选择器是什么

1. CSS选择器

CSS是一项出色的技术，它使得网页的结构和表现样式完全分离。利用CSS样式可以轻松地对某个元素添加样式而不改动HTML结构，只需要添加不同的CSS规则，就可以得到各种不同样式的网页。

要使某个样式应用于特定的HTML元素，首先就是需要先找到该元素。在CSS中，执行这一任务的表现规则成为CSS选择器。

表2-1，列出的常用CSS选择器：①标签选择器，②ID选择器，③类选择器，④群组选择器，⑤后代选择器，⑥统配选择器，几乎所有主流浏览器都几乎支持以上6中选择器。

此外CSS中还有⑦伪类选择器，⑧子选择器，⑨临近选择器，⑩属性选择器等，不过并非所有的主流浏览器都完全支持。

2. jQuery选择器

jQuery选择器写法和CSS选择器写法十分类似，只不过两者作用效果不同，CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。需要特别注意的是，jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性。

2.2 jQuery选择器的优势

1. 简洁的写法

在jQuery中，$()作为选择器函数使用。

2. 支持CSS1到CSS3选择器

jQuery支持CSS1、CSS2、的全部和CSS3的部分选择器，同时它也有少量独有的选择器。

3. 完善的处理机制

$(“#ID”)获取的永远是对象，即使网页上没有此元素。

2.3 jQuery选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

2.3.1 基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器。它通过元素id、class和标签名等来查找DOM元素。

2.3.2 层次选择器

通过DOM元素之间的层次关系来获取特定关系，例如后代元素、子元素、相邻元素、同辈元素。

可以使用next()方法来代替$(“prev+next”)选择器。

可以使用nextAll()方法来代替$(“prev~siblings”)选择器。$(“prev~siblings”)选择器只能选择“prev”元素后面的同辈<div>元素，而siblings()方法与前后位置无关，只要是同辈节点就能匹配。

2.3.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，规则与CSS中的伪类选择器语法相同，都以一个冒号(:)开头。按照不同规则，过滤选择器分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1. 基本过滤选择器

:focus                  选取当前获取焦点的元素         集合元素      $(‘:focus’)选取当前获取焦点的元素

2. 内容过滤选择器

内容过滤选择器的过滤规则主要体现在它包含的子元素或者文本内容上。

3. 可见性过滤选择器

可见性过滤根据元素的可见和不可见状态来选择相应的元素。

在可见选择器中，需要注意的是:hidden，它不仅包括样式属性display为’none’的元素，也包括文本隐藏（<input type=’hidden’ />）和visibility:hidden之类的元素。

4. 属性过滤选择器

属性选择器的顾虑规则是通过元素的属性俩获取相应的元素。

5. 子元素过滤选择器

子元素过滤选择器的过滤规则相对于其他选择器稍微有点复杂，重点在于区分清楚父元素与子元素。

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

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

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

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

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

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

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

此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

2.4 应用jQuery改写实例

2.5 选择器中的一些注意事项

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

1. 选择器中含有“.”、“#”、“(”或“]”等特殊字符

按照W3C规定，属性值中是不能含有这些特殊字符的，但是在实际项目中偶尔会遇到表达式含有“#”和“.”等特殊字符。如果按照普通的方式去处理的话就会出错。解决此类错误的方法就是使用转义符转义。

HTML代码如下：

<div id="id#b">bb</div>
<div id="id[1]">cc</div>

如果按照普通样式来获取，例如：

$("#id#b");
$("#id[1]");

以上代码不能正确获取元素，正确写法如下：

$("#id\\#b");
$("#id\\[1\\]");

2. 属性选择器的@符号问题

@符号在版本1.3.1中放弃了，所以可以不考虑使用它。

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

选择器中的空格是不容忽视的，多一个空格或者少一个空格也许会得到不同的结果。

　　例子如下：

<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>

使用如下的jQuery选择器分别俩获取它们。

var $t_a = $('.test :hidden');          //带空格的jQuery选择器
var $t_b = $('.test:hidden');           //不带空格的jQuery选择器
var len_a = $t_a.length;
var len_b = $t_b.length;
$("<p>$('.test :hidden')的长度为" + len_a + "</p>").appendTo("body");     //输出4
$("<p>$('.test:hidden')的长度为" + len_b + "</p>").appendTo("body");      //输出3

　　之所以出现不同结果，就是后代选择器与过滤选择器的不同。

2.6 案例研究-某网站品牌列表的效果

2.7 其他选择器

2.7.1 jQuery提供的选择器的扩展

2.7.2 其他使用CSS选择器的方法

2.8 小结

---

【END】