- jQuery权威指南
- 陶国荣
- 7字
- 2024-12-20 23:58:55
第2章 jQuery选择器
本章内容
❑ jQuery选择器概述
❑ jQuery选择器详解
❑ 综合案例分析—导航条在项目中的应用
❑ 本章小结
通过对第1章的介绍，相信大家对jQuery在前台页面中的应用有了一个初步的了解。在页面中为某个元素添加属性或事件时，必须先准确地找到该元素—在jQuery库中，可以通过选择器实现这一重要的核心功能。本章将详细介绍在jQuery中如何通过选择器快速定位元素的方法和技巧。
2.1 jQuery选择器概述
2.1.1 什么是选择器
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。
2.1.2 选择器的优势
与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：
❑ 代码更简单。
❑ 完善的检测机制。
下面将详细介绍这两个方面。
1.代码更简单
由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松，简单几行代码就可以实现较为复杂的功能。
下面通过一个实现表格隔行变色功能的示例，分别使用传统的JavaScript语言与jQuery语言加以说明。
示例2-1 使用JavaScript实现隔行变色
（1）功能描述
在页面中，通过一个＜table＞标记展示数据列表信息，在元素标记中，奇数行与偶数行的背景色不同，从而实现隔行变色的页面展示效果。
（2）实现代码
使用传统的JavaScript实现该页面功能。新建一个HTML文件2-1.html，加入如代码清单2-1所示的代码。
代码清单2-1使用JavaScript实现隔行变色
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用JavaScript实现隔行变色＜/title＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
#tbStu{width:260px；border:solid 1px #666；
background-color:#eee}
#tbStu tr{line-height:23px}
#tbStu tr th{background-color:#ccc；color:#fff}
#tbStu .trOdd{background-color:#fff}
＜/style＞
＜script type="text/javascript"＞
window.onload=function(){
var oTb=document.getElementById("tbStu")；
for(var i=0；i＜oTb.rows.length-1；i++){
if(i%2){
oTb.rows[i].className="trOdd"；
}
}
}
＜/script＞
＜/head＞
＜body＞
＜table id="tbStu" cellpadding="0" cellspacing="0"＞
＜tbody＞
＜tr＞
＜th＞学号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞＜th＞总分＜/th＞
＜/tr＞
＜!--奇数偶--＞
＜tr＞
＜td＞1001＜/td＞＜td＞张小明＜/td＞＜td＞男＜/td＞＜td＞320＜/td＞
＜/tr＞
＜!--偶数偶--＞
＜tr＞
＜td＞1002＜/td＞＜td＞李明琪＜/td＞＜td＞女＜/td＞＜td＞350＜/td＞
＜/tr＞
＜!--...--＞
＜/tbody＞
＜/table＞
＜/body＞
＜/html＞
在代码清单2-1中，首先通过ID号获取表格元素，然后遍历表格的各行，根据行号的奇偶性，动态设置该行的背景色，从而实现隔行变色的页面效果。
页面中的JavaScript代码虽可以实现最终效果，但循环页面的元素会影响打开速度，并且代码较为复杂，如果使用jQuery选择器实现上述页面效果，则需要在页面中加入一些代码，详见下面的示例。
示例2-2 使用jQuery选择器实现隔行变色
新建一个HTML文件2-2.html，加入如代码清单2-2所示的代码。
代码清单2-2使用jQuery选择器实现隔行变色
...
＜head＞
＜title＞使用jQuery选择器实现隔行变色＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
...省略样式代码
＜script type="text/javascript"＞
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd")；
})
＜/script＞
＜/head＞
...省略页面主体代码
从代码清单2-2中可以看出，使用jQuery选择器可以很快捷地定位页面中的某个元素，并设置该元素的相应属性，具有代码简单、执行效果高的优点。
（3）页面效果
虽然示例2-1和示例2-2中的代码不同，但都实现了页面数据隔行变色的功能，其最终实现的页面效果完全相同，如图2-1所示。
图2-1 页面数据隔行变色效果
2.完善的检测机制
在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在JavaScript代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。
在jQuery选择器定位页面元素时，无需考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率。
下面通过一个简单的示例分别使用JavaScript语言与jQuery语言来说明该检测机制在页面中的实现效果。
示例2-3 使用JavaScript输出文字信息
（1）功能描述
在页面＜div＞标记中输出一行“这是一个检测页面”的字符。
（2）实现代码
使用传统的JavaScript实现该页面功能。
新建一个HTML文件2-3.html，加入如代码清单2-3所示的代码。
代码清单2-3使用JavaScript输出文字信息
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞JavaScript代码检测页面元素＜/title＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
＜/style＞
＜script type="text/javascript"＞
window.onload=function(){
if(document.getElementById("divT"))
{
var oDiv=document.getElementById("divT")；
oDiv.innerHTML="这是一个检测页面"；
}
}
＜/script＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在JavaScript代码中，有一行代码如下：
if(document.getElementById("divT")){...}
该行代码用于检测所定位的页面元素是否存在，如果存在，则执行下面的代码，否则不执行；假设不编写该行代码检测元素的存在，则在浏览器中将出现如图2-2所示的出错提示信息。
图2-2 页面对象不存在的出错提示信息
如果将例2-3中的JavaScript代码改写成jQuery选择器方式获取页面元素，那么不需要检测元素是否存在，且页面正常执行，其修改后的代码如下例所示。
示例2-4 使用jQuery输出文字信息
新建一个HTML文件2-4.html，加入如代码清单2-4所示的代码。
代码清单2-4使用jQuery输出文字信息
...
＜head＞
＜title＞jQuery代码检测页面元素＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
...省略样式代码
＜script type="text/javascript"＞
$(function(){
$("#divT").html("这是一个检测页面")；
})
＜/script＞
＜/head＞
...省略页面主体代码
2.2 jQuery选择器详解
根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种。其分类结构如图2-3所示。
图2-3 jQuery选择器分类示意图
2.2.1 基本选择器
基本选择器是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，其详细说明如表2-1所示。
表2-1 基本选择器语法
下面通过示例2-5来介绍各种基本选择器在页面中使用的方法。
示例2-5 使用jQuery基本选择器选择元素
（1）功能描述
一个页面包含两个＜div＞标记，其中一个用于设置ID属性，另一个用于设置Class属性；我们再增加一个＜span＞标记，全部元素初始值均为隐藏，然后通过jQuery基本选择器显示相应的页面标记。
（2）实现代码
新建一个HTML文件2-5.html，加入如代码清单2-5所示的代码。
代码清单2-5使用jQuery基本选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery基本选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
.clsFrame{width:300px；height:100px}
.clsFrame div，span{display:none；float:left；
width:65px；height:65px；border:solid 1px #ccc；
margin:8px}
.clsOne{background-color:#eee}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //ID匹配元素
$("#divOne").css("display"，"block")；
})
$(function(){ //元素名匹配元素
$("div span").css("display"，"block")；
})
$(function(){ //类匹配元素
$(".clsFrame .clsOne").css("display"，"block")；
})
$(function(){ //匹配所有元素
$("＊").css("display"，"block")；
})
$(function(){ //合并匹配元素
$("#divOne，span").css("display"，"block")；
})
＜/script＞
＜/head＞
＜body＞
＜div class="clsFrame"＞
＜div id="divOne"＞ID＜/div＞
＜div class="clsOne"＞CLASS＜/div＞
＜span＞SPAN＜/span＞
＜/div＞
＜/body＞
＜/html＞
（3）页面效果
为了能更清楚地看到每个基本选择器执行后的结果，下面通过表格的方式展示页面效果，如表2-2所示。
表2-2 页面执行效果
2.2.2 层次选择器
层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。
表2-3 层次选择器语法
说明 ancestor descendant与parent ＞ child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ～siblings可以使用nextAll()代替。
下面通过示例2-6来演示各种层次选择器在页面中选择DOM元素的方法。
示例2-6 使用jQuery层次选择器选择元素
（1）功能描述
在页面中，设置4块＜div＞标记，其中在第二块＜div＞中，添加1个＜span＞标记，在该＜span＞标记中又新增1个＜span＞标记，全部元素初始值均为隐藏，然后通过jQuery层次选择器，显示相应的页面标记。
（2）实现代码
新建一个HTML文件2-6.html，加入如代码清单2-6所示的代码。
代码清单2-6使用jQuery层次选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery层次选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
div，span{float:left；border:solid 1px #ccc；
margin:8px；display:none}
.clsFraA{width:65px；height:65px}
.clsFraP{width:45px；height:45px；background-color:#eee}
.clsFraC{width:25px；height:25px；background-color:#ddd}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //匹配后代元素
$("#divMid").css("display"，"block")；
$("div span").css("display"，"block")；
})
$(function(){ //匹配子元素
$("#divMid").css("display"，"block")；
$("div＞span").css("display"，"block")；
})
$(function(){ //匹配后面元素
$("#divMid + div").css("display"，"block")；
$("#divMid").next().css("display"，"block")；
})＊/
$(function(){ //匹配所有后面元素
$("#divMid ～ div").css("display"，"block")；
$("#divMid").nextAll().css("display"，"block")；
})
$(function(){ //匹配所有相邻元素
$("#divMid").siblings("div")
.css("display"，"block")；
})
＜/script＞
＜/head＞
＜body＞
＜div class="clsFraA"＞Left＜/div＞
＜div class="clsFraA" id="divMid"＞
＜span class="clsFraP" id="Span1"＞
＜span class="clsFraC" id="Span2"＞＜/span＞
＜/span＞
＜/div＞
＜div class="clsFraA"＞Right_1＜/div＞
＜div class="clsFraA"＞Right_2＜/div＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-6执行后的效果如表2-4所示。
表2-4 页面执行效果
说明 siblings()方法与选择器prev ～ siblings区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分。
2.2.3 简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，其详细说明如表2-5所示。
表2-5 简单过滤选择器语法
下面通过示例2-7来介绍如何通过过滤选择器定位DOM元素的方法。
示例2-7 使用jQuery基本过滤选择器选择元素
（1）功能描述
在页面中，设置一个＜h1＞标记用于显示主题，创建＜ul＞标记并在其中放置四个＜li＞，再创建一个＜span＞标记，用于执行动画效果。通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态。
（2）实现代码
新建一个HTML文件2-7.html，加入如代码清单2-7所示的代码。
代码清单2-7使用jQuery基本过滤选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery基本过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
div{width:241px；height:83px；border:solid 1px #eee}
h1{font-size:13px}
ul{list-style-type:none；padding:0px}
.DefClass，.NotClass{height:23px；width:60px；
line-height:23px；float:left；
border-top:solid 1px #eee；border-bottom:solid 1px #eee}
.GetFocus{width:58px；border:solid 1px #666；
background-color:#eee}
#spnMove{width:238px；height:23px；line-height:23px；}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //增加第一个元素的类别
$("li:first").addClass("GetFocus")；
})
$(function(){ //增加最后一个元素的类别
$("li:last").addClass("GetFocus")；
})
$(function(){ //增加去除所有与给定选择器匹配的元素类别
$("li:not(.NotClass)").addClass("GetFocus")；
})
$(function(){ //增加所有索引值为偶数的元素类别，从0开始计数
$("li:even").addClass("GetFocus")；
})
$(function(){ //增加所有索引值为奇数的元素类别，从0开始计数
$("li:odd").addClass("GetFocus")；
})
$(function(){ //增加一个给定索引值的元素类别，从0开始计数
$("li:eq(1)").addClass("GetFocus")；
})
$(function(){ //增加所有大于给定索引值的元素类别，从0开始计数
$("li:gt(1)").addClass("GetFocus")；
})
$(function(){ //增加所有小于给定索引值的元素类别，从0开始计数
$("li:lt(4)").addClass("GetFocus")；
})
$(function(){ //增加标题类元素类别
$("div h1").css("width"，"238")；
$(":header").addClass("GetFocus")；
})
$(function(){
animateIt()；//增加动画效果元素类别
$("#spnMove:animated").addClass("GetFocus")；
})
function animateIt() { //动画效果
$("#spnMove").slideToggle("slow"，animateIt)；
}
＜/script＞
＜/head＞
＜body＞
＜div＞
＜h1＞基本过滤选择器＜/h1＞
＜ul＞
＜li class="DefClass"＞Item 0＜/li＞
＜li class="DefClass"＞Item 1＜/li＞
＜li class="NotClass"＞Item 2＜/li＞
＜li class="DefClass"＞Item 3＜/li＞
＜/ul＞
＜span id="spnMove"＞Span Move＜/span＞
＜/div＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-7执行后的效果如表2-6所示。
表2-6 页面执行效果
说明 选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt()，然后执行该函数，选择器才能获取动画效果元素，并增加其类别。
2.2.4 内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，其详细说明如表2-7所示。
表2-7 内容过滤选择器语法
下面通过示例2-8来展示在页面中如何通过内容过虑选择器查找DOM元素的方法。
示例2-8 使用jQuery内容过滤选择器选择元素
（1）功能描述
在页面中，根据需要创建四个＜div＞标记，并在其中的＜div＞中新建一个＜span＞标记，其余＜div＞标记中输入内容（或为空），通过内容过滤选择器获取指定的元素，并显示在页面中。
（2）实现代码
新建一个HTML文件2-8.html，加入如代码清单2-8所示的代码。
代码清单2-8使用jQuery内容过滤选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery内容过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
div{float:left；border:solid 1px #ccc；margin:8px；
width:65px；height:65px；display:none}
span{float:left；border:solid 1px #ccc；margin:8px；
width:45px；height:45px；background-color:#eee}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //显示包含给定文本的元素
$("div:contains('A')").css("display"，"block")；
})
$(function(){ //显示所有不包含子元素或者文本的空元素
$("div:empty").css("display"，"block")；
})
$(function(){ //显示含有选择器所匹配的元素
$("div:has(span)").css("display"，"block")；
})
$(function(){ //显示含有子元素或者文本的元素
$("div:parent").css("display"，"block")；
})
＜/script＞
＜/head＞
＜body＞
＜div＞ABCD＜/div＞
＜div＞＜span＞＜/span＞＜/div＞
＜div＞EFaH＜/div＞
＜div＞＜/div＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-8执行后的效果如表2-8所示。
表2-8 页面执行效果
说明 在:contains(text)内容过滤选择器中，如果是查找字母，则有大小写的区别。
2.2.5 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素，其详细的说明如表2-9所示。
表2-9 可见性过滤选择器语法
下面通过示例2-9介绍如何使用可见性过虑选择器锁定DOM元素的方法。
示例2-9 使用jQuery可见性过滤选择器选择元素
（1）功能描述
在页面中，创建一个＜span＞和＜div＞标记，分别设置标记的display属性为“none”和“block”；然后根据可见性过滤选择器显示页面元素。
（2）实现代码
新建一个HTML文件2-9.html，加入如代码清单2-9所示的代码。
代码清单2-9使用jQuery可见性过滤选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery可见性过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
div，span{float:left；border:solid 1px #ccc；
margin:8px；width:65px；height:65px}
.GetFocus{border:solid 1px #666；background-color:#eee}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //增加所有可见元素类别
$("span:hidden").show()；
$("div:visible").addClass("GetFocus")；
})＊/
$(function(){ //增加所有不可见元素类别
$("span:hidden").show().addClass("GetFocus")；
})
＜/script＞
＜/head＞
＜body＞
＜span style="display:none"＞Hidden＜/span＞
＜div＞Visible＜/div＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-9执行后的效果如表2-10所示。
表2-10 页面执行效果
说明 :hidden选择器所选择的不仅包括样式为display:none所有元素，而且还包括属性type=“hidden”和样式为visibility:hidden的所有元素。
2.2.6 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束。其详细的说明如表2-11所示。
表2-11 属性过滤选择器语法
下面通过示例2-10介绍使用属性过滤选择器获取DOM元素的方法。
示例2-10 使用jQuery属性过滤选择器选择元素
（1）功能描述
在页面中，增加四个＜div＞标记，并设置不同的ID和Title属性值，然后通过属性过滤选择器获取所指定的元素集合，并显示在页面中。
（2）实现代码
新建一个HTML文件2-10.html，加入如代码清单2-10所示的代码。
代码清单2-10使用jQuery属性过滤选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery属性过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
div{float:left；border:solid 1px #ccc；margin:8px；
width:65px；height:65px；display:none}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //显示所有含有id属性的元素
$("div[id]").show(3000)；
})
$(function(){ //显示所有属性title的值是"A"的元素
$("div[title='A']").show(3000)；
})
$(function(){ //显示所有属性title的值不是"A"的元素
$("div[title!='A']").show(3000)；
})
$(function(){ //显示所有属性title的值以"A"开始的元素
$("div[title^='A']").show(3000)；
})
$(function(){ //显示所有属性title的值以"C"结束的元素
$("div[title$='C']").show(3000)；
})
$(function(){ //显示所有属性title的值中含有"B"的元素
$("div[title＊='B']").show(3000)；
})
$(function(){ //显示所有属性title的值中含有"B"
且属性id的值是"divAB"的元素
$("div[id='divAB'][title＊='B']").show(3000)；
})
＜/script＞
＜/head＞
＜body＞
＜div id="divID"＞ID＜/div＞
＜div title="A"＞Title A＜/div＞
＜div id="divAB" title="AB"＞ID ＜br /＞Title AB＜/div＞
＜div title="ABC"＞Title ABC＜/div＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-10执行后的效果如表2-12所示。
表2-12 页面执行效果
说明 show()是jQuery库中的一个显示元素函数，括号中的参数表示显示时间，单位是毫秒，show(3000)表示用3000毫秒显示。
2.2.7 子元素过滤选择器
在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器:eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。其详细的说明如表2-13所示。
表2-13 子元素过滤选择器语法
下面通过示例2-11来演示使用子元素过滤选择器获取元素的过程。
示例2-11 使用jQuery子元素过滤选择器选择元素
（1）功能描述
在页面中，创建三个＜ul＞标记，前两个标记中设置四个＜li＞，后一个标记中设置一个＜li＞，通过子元素过滤选择器获取指定的页面元素，并改变其选择后的状态，显示在页面中。
（2）实现代码
新建一个HTML文件2-11.html，加入如代码清单2-11所示的代码。
代码清单2-11使用jQuery子元素过滤选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery子元素过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
ul{width:241px；list-style-type:none；padding:0px}
ul li{height:23px；width:60px；line-height:23px；
float:left；border-top:solid 1px #eee；
border-bottom:solid 1px #eee；margin-bottom:5px}
.GetFocus{width:58px；border:solid 1px #666；
background-color:#eee}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //增加每个父元素下的第2个子元素类别
$("li:nth-child(2)").addClass("GetFocus")；
})
/＊$(function(){ //增加每个父元素下的第一个子元素类别
$("li:first-child").addClass("GetFocus")；
})
$(function(){ //增加每个父元素下的最后一个子元素类别
$("li:last-child").addClass("GetFocus")；
})
$(function(){ //增加每个父元素下只有一个子元素类别
$("li:only-child").addClass("GetFocus")；
})＊/
＜/script＞
＜/head＞
＜body＞
＜ul＞
＜li＞Item 1-0＜/li＞
＜li＞Item 1-1＜/li＞
＜li＞Item 1-2＜/li＞
＜li＞Item 1-3＜/li＞
＜/ul＞
＜ul＞
＜li＞Item 2-0＜/li＞
＜li＞Item 2-1＜/li＞
＜li＞Item 2-2＜/li＞
＜li＞Item 2-3＜/li＞
＜/ul＞
＜ul＞
＜li＞Item 3-0＜/li＞
＜/ul＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-11执行后的效果如表2-14所示。
表2-14 页面执行效果
2.2.8 表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。其详细的说明如表2-15所示。
表2-15 表单对象属性过滤选择器语法
下面通过示例2-12来介绍通过表单对象属性过滤选择器获取表单对象的方法。
示例2-12 通过表单对象属性过滤选择器获取表单对象
（1）功能描述
在一个表单中，创建两个文本框对象，一个属性设置为enabled，另一个属性设置为disabled；再放置两个复选框对象，一个设置成被选中状态，另一个设置成未选中状态；同时新建一个列表框对象，并选中其中两项，通过表单对象属性过滤选择器获取某指定元素，并处理该元素。
（2）实现代码
新建一个HTML文件2-12.html，加入如代码清单2-12所示的代码。
代码清单2-12使用jQuery表单对象属性过滤选择器选择元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery表单对象属性过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
div{display:none}
select{height:65px}
.clsIpt{width:100px；padding:3px}
.GetFocus{border:solid 1px #666；background-color:#eee}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //增加表单中所有属性为可用的元素类别
$("#divA").show(3000)；
$("#form1 input:enabled").addClass("GetFocus")；
})
$(function(){ //增加表单中所有属性为不可用的元素类别
$("#divA").show(3000)；
$("#form1 input:disabled").addClass("GetFocus")；
})
$(function(){ //增加表单中所有被选中的元素类别
$("#divB").show(3000)；
$("#form1 input:checked").addClass("GetFocus")；
})
$(function(){ //显示表单中所有被选中option的元素内容
$("#divC").show(3000)；
$("#Span2").html("选中项是："+
$("select option:selected").text())；
})
＜/script＞
＜/head＞
＜body＞
＜form id="form1" style="width:241px"＞
＜div id="divA"＞
＜input type="text" value="可用文本框"
class="clsIpt" /＞
＜input type="text" disabled="disabled"
value="不可用文本框" class="clsIpt" /＞
＜/div＞
＜div id="divB"＞
＜input type="checkbox" checked="checked"
value="1" /＞ 选中
＜input type="checkbox" value="0" /＞ 未选中
＜/div＞
＜div id="divC"＞
＜select multiple="multiple"＞
＜option value="0"＞Item 0＜/option＞
＜option value="1" selected="selected"＞
Item 1
＜/option＞
＜option value="2"＞Item 2＜/option＞
＜option value="3" selected="selected"＞
Item 3
＜/option＞
＜/select＞
＜span id="Span2"＞＜/span＞
＜/div＞
＜/form＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-12执行后的效果如表2-16所示。
表2-16 页面执行效果
2.2.9 表单选择器
无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。其详细的说明如表2-17所示。
表2-17 表单选择器语法
下面通过示例2-13来介绍使用表单选择器直接获取表单对象的方法。
示例2-13 使用jQuery表单过滤选择器获取元素
（1）功能描述
在一个页面表单中，创建11种常用的表单对象，根据表单选择器，先显示出所有表单对象的总量，然后显示各种不同类型的表单对象。
（2）实现代码
新建一个HTML文件2-13.html，加入如代码清单2-13所示的代码。
代码清单2-13使用jQuery表单过滤选择器获取元素
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞使用jQuery表单过滤选择器＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style type="text/css"＞
body{font-size:12px；text-align:center}
form{width:241px}
textarea，select，button，input，span{display:none}
.btn {border:#666 1px solid；padding:2px；width:60px；
filter: progid:DXImageTransform.Microsoft.
Gradient(GradientType=0，StartColorStr=#ffffff，
EndColorStr=#ECE9D8)；}
.txt{border:#666 1px solid；padding:3px}
.img{padding:2px；border:solid 1px #ccc}
.div{border:solid 1px #ccc；
background-color:#eee；padding:5px}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //显示Input类型元素的总数量
$("#form1 div").html("表单共找出Input类型元素:"+
$("#form1 :input").length)；
$("#form1 div").addClass("div")；
})
$(function(){ //显示所有文本框对象
$("#form1 :text").show(3000)；
})
$(function(){ //显示所有密码框对象
$("#form1 :password").show(3000)；
})
$(function(){ //显示所有单选按钮对象
$("#form1 :radio").show(3000)；
$("#form1 #Span1").show(3000)；
})
$(function(){ //显示所有复选框对象
$("#form1 :checkbox").show(3000)；
$("#form1 #Span2").show(3000)；
})
$(function(){ //显示所有提交按钮对象
$("#form1 :submit").show(3000)；
})
$(function(){ //显示所有图片域对象
$("#form1 :image").show(3000)；
})
$(function(){ //显示所有重置按钮对象
$("#form1 :reset").show(3000)；
})
$(function(){ //显示所有按钮对象
$("#form1 :button").show(3000)；
})
$(function(){ //显示所有文件域对象
$("#form1 :file").show(3000)；
})
＜/script＞
＜/head＞
＜body＞
＜form id="form1"＞
＜textarea class="txt"＞ TextArea＜/textarea＞
＜select＞＜option value="0"＞ Item 0＜/option＞＜/select＞
＜input type="text" value="Text" class="txt"/＞
＜input type="password" value="PassWord" class="txt"/＞
＜input type="radio" /＞＜span id="Span1"＞ Radio＜/span＞
＜input type="checkbox" /＞
＜span id="Span2"＞ CheckBox＜/span＞
＜input type="submit" value="Submit" class="btn"/＞
＜input type="image" title="Image"
src="Images/logo.gif" class="img"/＞
＜input type="reset" value="Reset" class="btn"/＞
＜input type="button" value="Button" class="btn"/＞
＜input type="file" title="File" class="txt"/＞
＜div id="divShow"＞＜/div＞
＜/form＞
＜/body＞
＜/html＞
（3）页面效果
代码清单2-13执行后的效果如表2-18所示。
表2-18 页面执行效果
2.3 综合案例分析—导航条在项目中的应用
2.3.1 需求分析
本案例的需求主要有以下两点：
1）在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，同时，标题中的提示图片也随之改变。
2）单击“简化”链接时，隐藏指定的内容，并将“简化”字样改变成“更多”，单击“更多”链接时，返回初始状态，并改变指定显示元素的背景色。
2.3.2 效果界面
案例实现的界面效果如图2-4、图2-5所示。
图2-4 单击导航条标题前后的界面
图2-5 单击超级链接“简化”和“更多”后的界面
2.3.3 功能实现
在项目中，新建一个HTML文件htmNav.html，加入如代码清单2-14所示的代码。
代码清单2-14导航条在项目中的应用
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞导航条在项目中的应用＜/title＞
＜script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
＜style＞
body{font-size:13px}
#divFrame{border:solid 1px #666；
width:301px；overflow:hidden}
#divFrame .clsHead{background-color:#eee；padding:8px；
height:18px；cursor:hand}
#divFrame .clsHead h3{padding:0px；margin:0px；float:left}
#divFrame .clsHead span{float:right；margin-top:3px}
#divFrame .clsContent{padding:8px}
#divFrame .clsContent ul {list-style-type:none；
margin:0px；padding:0px}
#divFrame .clsContent ul li{ float:left；
width:95px；height:23px；line-height:23px}
#divFrame .clsBot{float:right；padding-top:5px；
padding-bottom:5px}
.GetFocus{background-color:#eee}
＜/style＞
＜script type="text/javascript"＞
$(function(){ //页面加载事件
$(".clsHead").click(function(){ //图片单击事件
if($(".clsContent").is(":visible")){ //如果内容可见
$(".clsHead span img")
.attr("src"，"Images/a1.gif")；//改变图片
//隐藏内容
$(".clsContent").css("display"，"none")；
}else{
$(".clsHead span img")
.attr("src"，"Images/a2.gif")；//改变图片
//显示内容
$(".clsContent").css("display"，"block")；
}
})；
$(".clsBot ＞ a").click(function(){ //热点链接单击事件
//如果内容为"简化"字样
if($(".clsBot ＞ a").text()=="简化"){
//隐藏index号大于4且不是最后一项的元素
$("ul li:gt(4):not(:last)").hide()；
//将字符内容更改为"更多"
$(".clsBot ＞ a").text("更多")；
}else{
$("ul li:gt(4):not(:last)")
.show()
.addClass("GetFocus")；//显示所选元素且增加样式
//将字符内容更改为"简化"
$(".clsBot ＞ a").text("简化")；
}
})；
})；
＜/script＞
＜/head＞
＜body＞
＜div id="divFrame"＞
＜div class="clsHead"＞
＜h3＞图书分类＜/h3＞
＜span＞＜img src="Images/a2.gif" alt=""/＞＜/span＞
＜/div＞
＜div class="clsContent"＞
＜ul＞
＜li＞＜a href="#"＞小说＜/a＞＜i＞ ( 1110 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞文艺＜/a＞＜i＞ ( 230 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞青春＜/a＞＜i＞ ( 1430 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞少儿＜/a＞＜i＞ ( 1560 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞生活＜/a＞＜i＞ ( 870 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞社科＜/a＞＜i＞ ( 1460 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞管理＜/a＞＜i＞ ( 1450 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞计算机＜/a＞＜i＞ ( 1780 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞教育＜/a＞＜i＞ ( 930 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞工具书＜/a＞＜i＞ ( 3450 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞引进版＜/a＞＜i＞ ( 980 ) ＜/i＞＜/li＞
＜li＞＜a href="#"＞其他类＜/a＞＜i＞ ( 3230 ) ＜/i＞＜/li＞
＜/ul＞
＜div class="clsBot"＞＜a href="#"＞简化＜/a＞
＜img src="Images/ a5.gif" alt=""/＞
＜/div＞
＜/div＞
＜/div＞
＜/body＞
＜/html＞
2.3.4 代码分析
在页面代码中，首先通过如下代码：
$(".clsContent").css("display"，"none")；
获取类名称为“clsContent”的元素集合，并实现其内容的显示或隐藏。与此同时，通过下面代码变换图片：
$(".clsHead span img").attr("src"，"Images/a1.gif")；
其中，“.clsHead span img”表示获取类型clsHead中＜span＞下的＜img＞标记，即图片元素；attr(key，value)是jQuery中一个设置元素属性的函数，其功能是为所匹配的元素设置属性值，key是属性名称，value是属性值或内容。因此，此行代码的功能是，获取图片元素并改变其图片来源。
为了能够实现单击标题后内容可以伸缩的功能，首先通过如下代码，检测当前内容的隐藏或显示状态：
if($(".clsContent").is(":visible"))
其中“$(".clsContent")”获取内容元素，“is”是判断，“:visible”表示是否可见，此行代码用于判断内容元素是否可见，它返回一个布尔值，如果为true，则执行if后面的语句块，否则执行else后面的语句块。
在超级链接单击事件中，通过下面的代码检测单击的是“简化”还是“更多”字样。
if($(".clsBot ＞ a").text()=="简化")
其中“$(".clsBot ＞ a")”获取超级链接元素，text()是jQuery中一个获取元素内容的函数。此行代码的意思为，判断超级链接元素的内容是否为“简化”字样，然后根据检测结果，执行不同的语句块。
在代码中，通过如下的代码实现指定内容的隐藏：
$("ul li:gt(4):not(:last)").hide()；
其中“ul li”获取元素，“:gt(4)”和“:not(:last)”分别为两个并列的过滤选择条件，前者表示Index号大于4，后者表示不是最后一个元素，二者组合成一个过滤条件，即选Index号大于4并且不是最后一个的元素集合；hide()是jQuery中一个隐藏元素的函数。此行代码的意思为，将通过过滤选择器获取的元素隐藏。
2.4 本章小结
选择器是jQuery的核心。本章通过将实例与理论相结合，从选择器的优势和类别入手，详细介绍了jQuery中的选择器语法和使用技巧，最后通过一个简单通用导航条的功能开发，进一步巩固前面章节所学的知识，并为第3章的深入学习创造条件。