jQuery parent>child层次选择器的用法（附带实例）

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

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

parent > child 选择器中的 parent 代表父元素，child 代表子元素，该选择器用于在给定的父元素下匹配所有的子元素。该选择器只能匹配父元素的直接子元素。

parent > child 选择器的使用方法如下：

$("parent > child");

parent 选择器的第一部分，可以是任何有效的元素；
child 选择器的第二部分，用以匹配 parent 元素的直接子元素。

例如，要匹配表单元素 <form> 中所有的直接子元素 <input> ，可以使用下面的 jQuery 代码：

$("form > input");

【实例】为 <form> 元素的直接子元素 <input> 换肤。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

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

2) 在页面的 <body> 标记中添加一个表单，并在该表单中添加 6 个 <input> 元素，同时将“换肤”按钮用 <span> 标记括起来。关键代码如下：

<form id="form1" name="form1" method="post" action="">
    姓&nbsp;&nbsp;名：<input type="text" name="name" id="name" />
    <br />
    籍&nbsp;&nbsp;贯：<input name="native" type="text" id="native" />
    <br />
    生&nbsp;&nbsp;日：<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="恢复默认" />
</form>

3) 编写 CSS 样式，用于指定 <input> 元素的默认样式，并且添加一个用于改变 <input> 元素样式的 CSS 类。具体代码如下：

<style type="text/css">
input{
    margin:5px;                            /*设置<input>元素的外边距为 5px*/
}
.input {
    font-size: 12pt;                     /*设置文字大小*/
    color: #333333;                     /*设置文字颜色*/
    background-color:#cef;              /*设置背景颜色*/
    border: 1px solid #000000;           /*设置边框*/
}
</style>

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现匹配 <form> 元素的直接子元素 <input> 并为其添加和移除 CSS 样式。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("#change").click(function() {          // 绑定“换肤”按钮的 click 事件
        $("form > input").addClass("input"); // 为<form>元素的直接子元素<input>添加样式
    });
    $("#default").click(function() {         // 绑定“恢复默认”按钮的 click 事件
        $("form > input").removeClass("input");
        // 移除为<form>元素的直接子元素<input>添加的样式
    });
});
</script>

在上面的代码中，addClass() 方法用于为元素添加CSS样式，removeClass() 方法用于移除为元素添加的 CSS 样式。

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

图 1 默认的效果

单击“换肤”按钮，将显示下图所示的效果：

图 2 单击“换肤”按钮后的效果

单击“恢复默认”按钮，将再次显示图 1 所示的效果。

在图 2 所示的页面中，虽然“换肤”按钮也是 <form> 元素的子元素 <input> ，但由于该元素不是 <form> 元素的直接子元素，所以在执行换肤操作时，该按钮的样式并没有改变。

如果将步骤 4) 中的第 4 行和第 7 行代码中的 $("form > input") 修改为 $("form input")，那么单击“换肤”按钮后，将显示下图所示的效果，即“换肤”按钮也将被添加 CSS 类。这也就是 parent>child 选择器和 ancestor descendant 选择器的区别。

图 3 为“换肤”按钮添加 CSS 类的效果

jQuery parent>child层次选择器的用法（附带实例）

相关文章