jQuery_遍历后代$obj.find().html

最新推荐文章于 2022-06-19 22:02:33 发布

学无止境慢慢来

最新推荐文章于 2022-06-19 22:02:33 发布

阅读量1.3k

点赞数

分类专栏： jQuery

原文链接：https://www.runoob.com/jquery/jquery-traversing-descendants.html

版权

jQuery 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery_遍历后代$obj.find()</title>
    <style>
        .descendants * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        /*参考：https://www.runoob.com/jquery/jquery-traversing-descendants.html
        * jQuery 遍历后代知识点：
        *   1.$(selector).find(selector2) -> 被选元素的后代元素，一路向下直到最后一个后代。
        *       selector2，必选项。
        *   2.$obj.find( selector )Returns: jQuery
                Description:
                * Get the descendants of each element in the current set of matched elements,
                * filtered by a selector, jQuery object, or element.
        * */
        $(function () {
            let $div = $("div");
            // 1.给 div 的所有后代 span 元素设置样式。
            $div.find("span").css({"color": "red", "border": "2px solid red"});
            // 2.给 div 的所有后代元素设置样式。
            // $div.find("*").css({"color": "red", "border": "2px solid red"});
        });
    </script>
</head>
<body>

<div class="descendants" style="width:500px;">
    div (当前元素)
    <p>
        p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
    <p>
        p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
</div>

</body>
</html>