本章简介
上一章我初步接触了jQuery，并能够编写一些简单的jQuery代码，其中重点是jQuery基本选择器。jQuery的选择器非常强大，它是jQuery的根基，基本上任何操作都要依赖于选择器。本章重点学习jQuery选择器，包括层次选择器、属性选择器、表单选择器、内容选择器和过滤选择器等。
核心技能部分
4.1 jQuery选择器jQuery选择器的主要功能是查找、匹配并获取页面元素，这是进行任何操作的前提。jQuery提供了众多功能强大且使用方便的选择器，完全能满足开发需求。
jQuery选择器使用起来非常简单，因为它完全继承了CSS选择器的风格，但是功能更强大，并且进行了跨浏览器处理。
jQuery选择器主要包括：基本选择器、层次选择器、属性选择器、表单选择器、内容选择器和过滤选择器。基本选择器在上一章已经做过介绍，此处不再多述，其他选择器会在下面逐一进行介绍。
4.1.1 层次选择器层次选择器是通过DOM对象之间的层次关系来获取并匹配元素的，例如后代元素、子元素、相邻元素等，具体说明见表4-1-1所示。
表4-1-1 层次选择器
层次选择器
说明
$("ancestor descendant")
匹配并获取ancestor元素里的所有后代descendant元素
$("parent > child")
匹配并获取parent元素里的子元素
$("prev + next")
匹配并获取紧挨着prev元素后的next元素
$("prev ~ siblings")
匹配并获取prev元素后的所有siblings元素
下面我们通过具体的示例来演示层次选择器的用法。
示例4.1
代码语言：javascript复制
WEB入门之十三 jQuery选择器_java$("#g1 div")表示获取id是g1的元素里所有的后代div。
WEB入门之十三 jQuery选择器_java_02$("#g1 a")表示获取id是g1的元素的子元素a
("#g1 .sec")两个选择器之间是空格，
WEB入门之十三 jQuery选择器_java_03("#g1 .sec")表示获取id是g1的元素里所有的类名是.sec的元素，一共有3个。
示例4.1演示了表4-1-1中前两种层次选择器的用法，下面我们通过示例4.2演示后两种层次选择器的用法。
示例4.2
代码语言：javascript复制
WEB入门之十三 jQuery选择器_java_064.1.2 属性选择器顾名思义，属性选择器是指通过元素某个属性及其值来匹配并获取相关元素的。具体说明见表4-1-2所示。
表4-1-2 属性选择器
属性选择器
说明
$(" selector [ attr ] ")
获取匹配selector选择器的并且拥有attr属性的元素
$(" selector [ attr =' val ' ] ")
获取匹配selector选择器的并且attr属性的值是val的元素
$(" selector [ attr !=' val ' ] ")
获取匹配selector选择器的并且attr属性的值不是val的元素
$(" selector [ attr ^=' val ' ] ")
获取匹配selector选择器的并且attr属性的值是以val开始的元素
$(" selector [ attr $=' val ' ] ")
获取匹配selector选择器的并且attr属性的值是以val结尾的元素
$(" selector [ attr *=' val ' ] ")
获取匹配selector选择器的并且attr属性的值包含val的元素
$(" selector [ ] [ ] [ ] ...")
属性选择器组合
下面通过一个示例来演示属性选择器的具体用法。该示例实现了一个注册表单，当用户单击【注册】按钮时对所有的文本框进行非空验证，如图4.1.7所示。
WEB入门之十三 jQuery选择器_java_07图4.1.7 注册页面
这里只给出脚本代码，如下所示。
示例4.3
代码语言：javascript复制文本框元素的标签名是input，type属性的值是text，所以获取所有文本框的属性选择器就可以这样写：$("input[type='text']")，然后通过each( )逐个遍历，并通过val( )进行非空验证。
4.1.3 表单选择器表单在Web前端开发中使用非常频繁，jQuery专门加入了表单选择器，这给开发人员操纵表单带来了极大的便利，详见表4-1-3所示。
表4-1-3 表单选择器
名称
说明
:input
匹配并获得表单中所有input, textarea, select和button元素
:text
匹配并获得所有的文本框
:password
匹配并获得所有密码框
:radio
匹配并获得所有单选按钮
:checkbox
匹配并获得所有复选框
:submit
匹配并获得所有提交按钮
:image
匹配并获得所有图片
:reset
匹配并获得所有重置按钮
:button
匹配并获得所有按钮
:file
匹配并获得所有文件域
:hidden
匹配并获得所有隐藏域
下面通过一个示例来演示表单选择器的具体用法
示例4.4
代码语言：javascript复制通过查看图4.1.8，我们能判断出该表单中一共有10个元素，其中文本框1个，复选框3个，单选按钮2个
WEB入门之十三 jQuery选择器_java_084.1.4 表单属性选择器表单属性选择器是对表单选择器的有力补充，详见表4-1-4所示。
表4-1-4 表单属性选择器
名称
说明
:enabled
匹配并获得所有正常使用的元素
:disabled
匹配并获得所有禁用的元素
:checked
匹配并获得所有被选中的复选框
:selected
匹配并获得下拉列表框的选中项
示例4.5展示了表单属性选择器的具体用法，代码如下所示。
示例4.5
代码语言：javascript复制
WEB入门之十三 jQuery选择器_java_094.1.5 内容选择器内容选择器主要使用通过元素所包含的文本或子元素进行匹配或获取，详见表4-1-5所示。
表4-1-5 内容选择器
名称
说明
:contains ( txt )
匹配并获得包含有txt文本的元素
:empty
匹配并获得没有子元素或者文本的元素
:has ( selector )
匹配并获得包含有selector选择器的元素
示例4.6展示了内容选择器的具体用法，代码如下所示。
示例4.6
代码语言：javascript复制
$("div:has('#a')")表示获取包含#a选择器的元素，运行效果如图4.1.11所示。
WEB入门之十三 jQuery选择器_java_10图4.1.11 运行效果
4.1.6 过滤选择器过滤选择器是在获取到元素后通过索引进一步进行过滤或筛选，详见表4-1-6所示。
表4-1-6 过滤选择器
名称
说明
:first
获得匹配到的第一个元素
:last
获得匹配到的最后一个元素
:not ( selector )
获得除了匹配的元素之外的元素
:even
匹配所有索引值为偶数的元素，从0开始计数
:odd
匹配所有索引值为奇数的元素，从0开始计数
:eq ( index )
匹配一个给定索引值的元素，从0开始计数
:gt ( index )
匹配所有大于给定索引值的元素，从0开始计数
:lt ( index )
匹配所有小于给定索引值的元素，从0开始计数
示例4.7展示了过滤选择器的具体用法，代码如下所示。
示例4.7
代码语言：javascript复制
| 0 | 第0行 |
| 1 | 第1行 |
| 2 | 第2行 |
| 3 | 第3行 |
| 4 | 第4行 |
| 5 | 第5行 |
| 6 | 第6行 |
| 7 | 第7行 |
| 8 | 第8行 |
WEB入门之十三 jQuery选择器_java_114.1.7 可见性选择器可见性选择器比较简单，主要是通过显示/隐藏状态来获取和匹配元素的，详见表4-1-7。
表4-1-7 可见性选择器
名称
说明
:hidden
匹配所有的隐藏元素
:visible
匹配所有的可见元素
示例4.8展示了可见性选择器的具体用法，代码如下所示。
示例4.8
代码语言：javascript复制
那么这时如果使用jQuery选择器来获取元素的话，代码如下所示：
$("#t#b").html();
$("#t[1]").html();
但是这样写是获取不到元素的，因为选择器包含有特殊字符，那么我们可以通过转义字符来解决这个问题。
$("#t\\#b").html();
$("#t\\[1\\]").html();
jQuery中使用\\来进行字符的转义。
4.2.2 选择器中的空格选择器中有时需要出现空格，这需要大家特别注意，因为多一个空格和少一个空格会导致出现截然不同的效果，例如下面的代码。
示例4.9
代码语言：javascript复制
WEB入门之十三 jQuery选择器_java_12本章总结
选择器是jQuery的核心，基本上任何业务及功能的实现都需要选择器。jQuery提供了诸多功能强大的选择器，包括层次选择器、属性选择器、表单选择器、内容选择器等，内容比较多，大家在使用的时候要注意每种选择器的语法以及它们的适用场合。
任务实训部分
1：实现树形菜单训练技能点
jQuery层次选择器
需求说明
在示例4.1的基础上使用jQuery层次选择器实现树形菜单的收缩/展开特效。单击一级、二级节点能够收缩和展开其下面的子节点。
2：实现表单验证
训练技能点
jQuery表单选择器
需求说明
按照图4.2.2所示的界面实现一个简单的表单，并使用jQuery表单选择器进行表单验证，要求:所有项都不能为空，密码长度必须大于等于8，单击“快速注册”图片时进行验证。
WEB入门之十三 jQuery选择器_java_133：实现全选/全不选训练技能点
Ø jQuery表单属性选择器
需求说明
按图使用jQuery表单选择器实现全选/全不选效果。
WEB入门之十三 jQuery选择器_java_14实现步骤
（1） 实现图4.2.3所示的界面，参考代码如下所示。
（2） 使用表单选择器实现全选/全不选效果，参考代码如下所示。
4：表格隔行加背景色训练技能点
jQuery过滤选择器
需求说明
按照图界面，使用jQuery过滤选择器实现表格隔行背景变色的效果。
WEB入门之十三 jQuery选择器_java_15实现步骤
（1） 实现图4.2.4所示的界面
（2） 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外)
（3） 把获取到得奇数行设置为灰色背景色，参考代码如下所示。
代码语言：javascript复制巩固练习
一、选择题
1. 以下（）不属于jQuery选择器。
A. 表单选择器
B. 子选择器
C. 层次选择器
D. 表单选择器
2. 以下关于jQuery层次选择器的说法正确的是（）。
A. 层次选择器主要针对表单的使用
B. ("ancestor descendant")和
C. ("prev + next")和
D. 通过层次选择器一次只能获得一个元素
3. 以下关于jQuery表单和表单属性选择器说法正确的是（）。
A. 表单选择器只能用于表单
B. 表单属性选择器是表单选择器的附属，没有表单选择器就没有表单属性选择器
C. 表单选择器和表单属性选择器不能和其他选择器合用
D. :button选择器获得的按钮包括提交按钮和重置按钮
4. 下列关于jQuery选择器中特殊字符的说法错误的是（）。
A. jQuery选择器中不能包含任何特殊字符
B. jQuery选择器可以包含空格
C. jQuery选择器支持转义字符
二、上机练习
数据库中的数据查询出来后，在前台用表格进行显示。但是由于部分数据不存在造成一些单元格是空的，现在要求使用jQuery选择器把空单元格中的空文本改为“暂无”。
在å�Œè¯è¯�å…¸ä¸çš„"é„"译文掌握拼图技巧，轻松完成复杂拼图的秘诀