下载掌阅APP，畅读海量书库
立即打开
所谓的层级选择器，就是根据页面DOM元素之间的父子关系作为匹配的筛选条件。首先学习一下页面上元素的关系。例如，下面的代码是最为常用也是最简单的DOM元素结构。
<html>
<head> </head>
<body> </body>
</html>
在这段代码所示的页面结构中，html元素是页面上其他所有元素的祖先元素，那么head元素就是html元素的子元素，同时html元素也是head元素的父元素。页面上的head元素与body元素是同辈元素。也就是说html元素是head元素和body元素的“爸爸”，head元素和body元素是html元素的“儿子”，head元素与body元素是“兄弟”。具体关系如图4.9所示。
图4.9 元素层级关系示意图
在了解了页面上元素的关系后，我们再来介绍jQuery提供的层级选择器。jQuery提供了Ancestor descendant选择器、parent > child选择器、prev + next选择器和prev ～ siblings选择器，下面进行详细介绍。
ancestor descendant选择器中的ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素。ancestor descendant选择器的使用方法如下：
$("ancestor descendant");
ancestor是指任何有效的选择器。
descendant是用以匹配元素的选择器，并且它是ancestor所指定元素的后代元素。
例如，要匹配ul元素下的全部li元素，可以使用下面的jQuery代码：
$("ul li");
【例4.5】 通过jQuery为版权列表设置样式。 （实例位置：光盘\TM\sl\4\5）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，首先添加一个<div>标记，并在该<div>标记内添加一个<ul>标记及其子标记<li>，然后在<div>标记的后面再添加一个<ul>标记及其子标记<li>，代码如下：
<div id="bottom">
<ul>
<li>技术服务热线：400-×××-1066 传真：0431-84××××× 6企业邮箱：mingri××××@mingri××××.com</li>
<li>Copyright © www.mrbccd.com All Rights Reserved! </li>
</ul>
</div>
<ul>
<li>技术服务热线：400-×××-1066 传真：0431-84×××××6 企业邮箱：mingri××××@mingri××××.com</li>
<li>Copyright © www.mrbccd.com All Rights Reserved! </li>
</ul>
（3）编写CSS样式，通过ID选择符设置<div>标记的样式，并且编写一个类选择符copyright，用于设置<div>标记内的版权列表的样式，关键代码如下：
<style type="text/css">
#bottom{
background-image:url(../Images/bg_bottom.jpg); /*设置背景*/
width:800px; /*设置宽度*/
height:58px; /*设置高度*/
clear: both; /*设置左右两侧无浮动内容*/
text-align:center; /*设置居中对齐*/
padding-top:10px; /*设置顶边距*/
font-size:9pt; /*设置字体大小*/
}
.copyright{
color:#FFFFFF; /*设置文字颜色*/
list-style:none; /*不显示项目符号*/
line-height:20px; /*设置行高*/
}
</style>
（4）在引入jQuery库的代码下方编写jQuery代码，匹配div元素的子元素ul，并为其添加CSS样式，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("div ul").addClass("copyright"); //为div元素的子元素ul添加样式
});
</script>
运行本示例，将显示如图4.10所示的效果，其中上面的版权信息是通过jQuery添加样式的效果，下面的版权信息为默认的效果。
4.10 通过jQuery为版权列表设置样式
parent > child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素。使用该选择器只能选择父元素的直接子元素。parent > child选择器的使用方法如下：
$("parent > child");
parent是指任何有效的选择器。
child是用以匹配元素的选择器，并且它是parent元素的子元素。
例如，要匹配表单中所有的子元素input，可以使用下面的jQuery代码：
$("form > input");
【例4.6】 为表单的直接子元素input换肤。 （实例位置：光盘\TM\sl\4\6）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个表单，并在该表单中添加6个input元素，并且将“换肤”按钮用<span>标记括起来，关键代码如下：
<form id="form1" name="form1" method="post" action="">
姓 名：<input type="text" name="name" id="name" />
<br />
籍 贯：<input name="native" type="text" id="native" />
<br />
生 日：<input type="text" name="birthday" id="birthday" />
<br />
E-mail：<input type="text" name="email" id="email" />
<br />
<span>
<input type="button" name="change" id="change" value="换肤"/>
</span>
<input type="button" name="default" id="default" value="恢复默认"/>
<br />
</form>
（3）编写CSS样式，用于指定input元素的默认样式，并且添加一个用于改变input元素样式的CSS类，具体代码如下：
<style type="text/css">
input{
margin:5px; /*设置input元素的外边距为5像素*/
}
.input {
font-size: 12pt; /*设置文字大小*/
color: #333333; /*设置文字颜色*/
background-color:#cef; /*设置背景颜色*/
border: 1px solid #000000; /*设置边框*/
}
</style>
（4）在引入jQuery库的代码下方编写jQuery代码，实现匹配表单元素的直接子元素并为其添加和移除CSS样式，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){ //绑定"换肤"按钮的单击事件
$("form > input").addClass("input"); //为表单元素的直接子元素input添加样式
});
$("#default").click(function(){ //绑定“恢复默认”按钮的单击事件
$("form > input").removeClass("input"); //移除为表单元素的直接子元素input添加的样式
});
});
</script>
在上面的代码中，addClass()方法用于为元素添加CSS类，removeClass()方法用于为移除为元素添加的CSS类。
运行本实例，将显示如图4.11所示的效果，单击“换肤”按钮，将显示如图4.12所示的效果，单击“恢复默认”按钮，将再次显示如图4.13所示的效果。
图4.11 默认的效果
图4.12 单击“换肤”按钮之后的效果
图4.13 为“换肤”按钮添加CSS类的效果
在图4.12中，虽然“换肤”按钮也是form元素的子元素input，但由于该元素不是form元素的直接子元素，所以在执行换肤操作时，该按钮的样式并没有改变。如果将步骤（4）中的第4行和第7行的代码中的$("form > input")修改为$("form input")，那么单击“换肤”按钮后，将显示如图4.13所示的效果，即“换肤”按钮也将被添加CSS类。这也就是parent > child选择器和ancestor descendant选择器的区别。
prev + next选择器用于匹配所有紧接在prev元素后的next元素。其中，prev和next是两个相同级别的元素。prev + next选择器的使用方法如下：
$("prev + next");
prev是指任何有效的选择器。
next是一个有效选择器并紧接着prev选择器。
例如，要匹配<div>标记后的<img>标记，可以使用下面的jQuery代码：
$("div + img");
【例4.7】 筛选紧跟在<lable>标记后的<p>标记并改变匹配元素的背景颜色为淡蓝色。 （实例位置：光盘\TM\sl\4\7）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，首先添加一个<div>标记，并在该<div>标记中添加两个<label>标记和<p>标记，其中第二对<label>标记和<p>标记用<fieldset>括起来，然后在<div>标记的下方再添加一个<p>标记，关键代码如下：
<div>
<label>第一个label</label>
<p>第一个p</p>
<fieldset>
<label>第二个label</label>
<p>第二个p</p>
</fieldset>
</div>
<p>div外面的p</p>
（3）编写CSS样式，用于设置body元素的字体大小，并且添加一个用于设置背景的CSS类，具体代码如下：
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
（4）在引入jQuery库的代码下方编写jQuery代码，实现匹配label元素的同级元素p，并为其添加CSS类，具体代码如下：
<script type="text/javascript" charset="GBK">
$(document).ready(function() {
$("label+p").addClass("background");//为匹配的元
素添加CSS类
});
</script>
运行本实例，将显示如图4.14所示的效果。在图中可以看到“第一个p”和“第二个p”的段落被添加了背景，而“div外面的p”由于不是label元素的同级元素，所以没有被添加背景。
图4.14 将label元素的同级元素
prev ～ siblings选择器用于匹配prev元素之后的所有siblings元素。其中，prev和siblings是两个相同辈元素。prev ～ siblings选择器的使用方法如下：
$("prev ～ siblings");
prev是指任何有效的选择器。
siblings是一个有效选择器并且它是prev选择器的同辈。
例如，要匹配div元素的同辈元素ul，可以使用下面的jQuery代码：
$("div ～ ul");
【例4.8】 筛选页面中div元素的同辈元素。 （实例位置：光盘\TM\sl\4\8）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，首先添加一个<div>标记，并在该<div>标记中添加两个<p>标记，然后在<div>标记的下方再添加一个<p>标记，关键代码如下：
<div>
<p>第一个p</p>
<p>第二个p</p>
</div>
<p>div外面的p</p>
（3）编写CSS样式，用于设置body元素的字体大小，并且添加一个用于设置背景的CSS类，具体代码如下：
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
（4）在引入jQuery库的代码下方编写jQuery代码，实现匹配div元素的同辈元素p，并为其添加CSS类，具体代码如下：
<script type="text/javascript" charset="GBK">
$(document).ready(function() {
$("div～p").addClass("background"); //为匹配的元素添
加CSS类
});
</script>
运行本实例，将显示如图4.15所示的效果。在图中可以看到“div外面的p”被添加了背景，而“第一个p”和“第二个p”的段落由于它不是div元素的同辈元素，所以没有被添加背景。
图4.15 为div元素的同辈元素设置背景