jQuery Selectors(选择器)的使用(七、子元素篇)

下面就来详细讲解一下jQuery Selectors(选择器)的使用—子元素篇。

一、使用子元素选择器

子元素选择器>可以用于选择指定元素下的所有子元素。例如，使用#parent > p可以选择id为parent的元素下面的所有<p>元素。

下面是一个示例：

<div id="parent">
    <p>p元素1</p>
    <div>
        <p>p元素2</p>
        <span>span元素1</span>
    </div>
    <p>p元素3</p>
    <p>p元素4</p>
    <ul>
        <li>li元素1</li>
        <li>li元素2</li>
    </ul>
</div>

// 选中#parent下所有的p元素，但不包括#parent下的div、ul元素下的p和li元素
$("#parent > p").css("color", "red");

上面的代码会将id为parent元素下的所有<p>元素的颜色都设置为红色。但是它不会选择div和ul元素下的<p>或<li>元素。

二、使用包含选择器

包含选择器A B用于选择任何B元素，其中该元素是A元素的后代元素（即它位于A元素之内），无论是否直接是A元素的子元素。例如，使用#parent p可以选择位于id为parent内部的所有<p>元素，无论它们位于parent内部的哪个位置。

下面是一个示例：

<div id="parent">
    <p>p元素1</p>
    <div>
        <p>p元素2</p>
        <span>span元素1</span>
    </div>
    <p>p元素3</p>
    <p>p元素4</p>
    <ul>
        <li>li元素1</li>
        <li>li元素2</li>
    </ul>
</div>

// 选中#parent下所有的p元素，包括#parent下的div、ul元素下的p和li元素
$("#parent p").css("color", "red");

上面的代码会将id为parent元素下的所有<p>元素的颜色都设置为红色。它会选择div和ul元素下的<p>和<li>元素，因为它们的父元素都是#parent。

希望这个攻略对你有帮助！