Question

在正式学习jQuery选择器之前，先看几组用传统的JavaScript方法获取页面中的元素，然后给元素添加行为事件的例子。

例子1：给网页中的所有<p>元素添加onclick事件。

HTML代码如下：

要做的工作有以下几项。

（1）获取所有的<p>元素。

（2）对<p>元素进行循环（因为获取的是数组对象）。

（3）给每个<p>元素添加行为事件。

JavaScript代码如下：

例子2：使一个特定的表格隔行变色。

HTML代码如下：

要做的工作有以下几项。

（1）根据表格id获取表格。

（2）在表格内获取<tbody>元素。

（3）在<tbody>元素下获取<tr>元素。

（4）循环输出获取的<tr>元素。

（5）对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。

JavaScript代码如下：

例子3：对多选框进行操作，输出选中的多选框的个数。

HTML代码如下：

要做的工作有以下几项。

（1）新建一个空数组。

（2）获取所有name为check的多选框。

（3）循环判断多选框是否被选中，如果被选中则添加到数组里。

（4）获取输出按钮，然后为按钮添加onclick事件，输出数组的长度即可。

JavaScript代码如下：

上面的几个例子都是用传统的JavaScript方法进行操作，中间使用了getElement ById()、getElementsByTagName()和getElementsByName()等方法，然后动态地给元素添加行为或者样式。这些虽然都是JavaScript中最简单的操作，但不断重复使用getElementById()和getElementsByTagName()等冗长而难记的名称，使越来越多的开发人员开始厌倦这种枯燥的写法，并且有时候为了获取网页中的某个元素，需要编写很多的getElementById()和getElementsByTagName()方法。然而在jQuery中，类似的这些操作则非常简洁。

下面学习如何使用jQuery获取这些元素。

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找HTML代码中的元素并对其进行简单的操作。为了能更清晰、直观地讲解选择器，首先需要设计一个简单的页面，里面包含各种<div>元素和<span>元素，然后使用jQuery选择器来匹配元素并调整它们的样式。

新建一个空白页面，输入以下HTML代码：

然后用CSS对这些元素进行初始化大小和背景颜色的设置，CSS代码如下：

根据以上HTML+CSS代码，可以生成图2-2所示的页面效果。

图2-2　初始状态

2.3.1　基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如表2-2所示。

表2-2　基本选择器

可以使用这些基本选择器来完成绝大多数的工作。下面用它们来匹配刚才HTML代码中的<div>，<span>等元素并进行操作（改变背景色），示例如表2-3所示。

表2-3　基本选择器示例

2.3.2　层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。层次选择器的介绍说明如表2-4所示。

表2-4　层次选择器

继续沿用刚才例子中的HTML和CSS代码，然后用层次选择器来对网页中的<div>，<span>等元素进行操作，示例如表2-5所示。

表2-5　层次选择器示例

在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的几率相对少些。

可以使用next()方法来代替$('prev + next')选择器，如表2-6所示。

表2-6　$('prev + next')选择器与next()方法的等价关系

	选　择　器	方　　法
等价关系	$(".one + div");	$(".one").next("div");

可以使用nextAll()方法来代替$('prev〜siblings')选择器，如表2-7所示。

表2-7　$('prev〜siblings')选择器与nextAll()方法的等价关系

	选　择　器	方　　法
等价关系	$("#prev～div");	$("#prev").nextAll("div");

在此我将后面要讲解的siblings()方法拿出来与$('prev〜siblings')选择器进行比较。$("#prev〜div")选择器只能选择prev元素后面的同辈<div>元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

2.3.3　过滤选择器

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

1．基本过滤选择器

表2-8　基本过滤选择器

接下来，使用这些基本过滤选择器来对网页中的<div>，<span>等元素进行操作，示例如表2-9所示。

表2-9　基本过滤选择器示例

2．内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍说明如表2-10所示。

表2-10　内容过滤选择器

接下来使用内容过滤选择器来操作页面中的元素，示例如表2-11所示。

表2-11　内容过滤选择器示例

3．可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。可见性过滤选择器的介绍说明如表2-12所示。

表2-12　可见性过滤选择器

在例子中使用这些选择器来操作DOM元素，示例如表2-13所示。

表2-13　可见性过滤选择器示例

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

注意：show()是jQuery的方法，它的功能是显示元素，3000是时间，单位是毫秒。

4．属性过滤选择器

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

表2-14　属性过滤选择器

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

表2-15　属性过滤选择器示例

jQuery属性选择器的过滤规则比较多，特别容易混淆。为此，我把几个容易混淆的单独做了一个例子，以加强印象。HTML代码如下：

生成的效果图如图2-3所示。

图2-3　初始状态

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

表2-16　属性过滤选择器示例

5．子元素过滤选择器

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

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

表2-17　子元素过滤选择器

: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开始）

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

表2-18　子元素过滤选择器示例

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

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

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

表2-19　表单对象属性过滤选择器

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

生成的效果图如图2-4所示。

图2-4　初始状态

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

表2-20　表单对象属性过滤示例

2.3.4　表单选择器

为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。

表单选择器的介绍说明如表2-21所示。

表2-21　表单对象属性过滤示例

下面把这些表单选择器运用到下面的表单中，对表单进行操作。

表单HTML代码如下：

根据以上HTML代码，可以生成图2-5所示的页面效果。

图2-5　初始状态

如果想得到表单内表单元素的个数，代码如下：

如果想得到表单内单行文本框的个数，代码如下：

如果想得到表单内密码框的个数，代码如下：

同理，其他表单选择器的操作与此类似。