jQuery ancestor descendant层次选择器的用法（附带实例）

所谓层次选择器，就是将页面中 DOM 元素之间的父子关系作为匹配条件的选择器。

jQuery 提供了多种层次选择器，包括 ancestor descendant选择器、parent>child 选择器、prev+next 选择器和 prev~siblings 选择器。

ancestor descendant 选择器中的 ancestor 代表祖先元素，descendant 代表子孙元素，该选择器用于在给定的祖先元素下匹配所有的子孙元素。

ancestor descendant 选择器的使用方法如下：

$("ancestor descendant");

ancestor 选择器的第一部分，可以是任何有效的元素；
descendant 选择器的第二部分，指定了相对于 ancestor 元素而言的后代元素。

创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

在页面的 <body> 标记中，首先添加一个 <div> 标记，并在该 <div> 标记中添加一个 <ul> 标记及其两个子标记 <li>；然后在 <div> 标记的后面再添加一个 <ul> 标记及其两个子标记 <li>。具体代码如下：

<div id="bottom">
    <ul>
        <li>欢迎加入jQuery的世界，这里会给你带来无限的乐趣！</li>
        <li>jQuery拥有神奇的功能，会为你创造一个炫彩缤纷的世界！</li>
    </ul>
</div>
<ul>
    <li>欢迎加入jQuery的世界，这里会给你带来无限的乐趣！</li>
    <li>jQuery拥有神奇的功能，会为你创造一个炫彩缤纷的世界！</li>
</ul>

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

在引入 jQuery 库的代码下方编写 jQuery 代码，匹配 <div> 元素的子元素 <ul> ，并为其添加 CSS 样式。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("div ul").addClass("copyright");    // 为<div>元素的子元素<ul>添加css样式
});
</script>

运行本实例，将显示下图所示的效果：

图 1 通过jQuery为列表设置样式

其中，页面上方的版权信息为通过 jQuery 添加样式的效果，页面下方的列表信息为默认的效果。

jQuery ancestor descendant层次选择器的用法（附带实例）

相关文章