jQuery 父子选择器

jQuery 中的父子选择器用于选择指定父元素的所有子孙元素。

子孙元素:嵌套在另一个元素内的元素。它包括该元素的子元素、孙元素、曾孙元素等。

语法

以下是 jQuery 父子选择器的语法：

("parent descendant")

参数

以下是上述语法的描述：

父元素: 指定父元素。
子孙元素: 指定要选择的子孙元素。

示例 1

在下面的例子中，我们使用“jQuery 父子选择器”来选择所有作为<div>子孙元素的<span>元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div span").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div>
        <p>This is a paragraph with a <span>span element</span> inside a div.</p>
        <div>
            This is a nested div with another <span>span element</span>.
        </div>
    </div>
    <p>This is a paragraph with a <span>span element</span> outside the div.</p>
</body>
</html>

执行上述程序后，所有作为<div>子孙元素的<span>元素的背景颜色将变为黄色。

示例 2

在这个例子中，我们选择所有作为<section>子孙元素的<p>元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("section p").hide();
        });
    </script>
</head>
<body>
    <section>
        <h1>Section Header</h1>
        <p>This is a paragraph inside a section.</p>
        <div>
            <p>This is a nested paragraph inside a div within a section.</p>
        </div>
    </section>
    <p>This is a paragraph outside the section.</p>
</body>
</html>

执行后，所有作为<section>子孙元素的<p>元素将被隐藏。

示例 3

在这里，我们选择所有作为<ul>子孙元素的<li>元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select all <li> elements that are descendants of <ul>
            $("ul li").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>List item 1</li>
        <li>List item 2
            <ul>
                <li>Nested list item 1</li>
                <li>Nested list item 2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

执行后，所有作为<ul>子孙元素的<li>元素的背景颜色将变为黄色。

jquery_ref_selectors.htm

打印页面