jQuery——遍历DOM元素的后代元素

任务描述

本关任务：用 jQuery 向下遍历 DOM 节点。效果如下：

相关知识

为了完成本关任务，你需要掌握：1.children()，2. find()。

向下遍历DOM节点

基本的html结构如下（CSS已省略）：

<div>div (当前元素)
<p>p (儿子元素)
<span>span(孙子元素)</span>
</p>
</div>
<div>div(父元素)
<ul>ul(儿子元素)
<li>li(孙子元素)
<span>span(曾孙子元素)</span>
</li>
</ul>
</div>

效果图如下：

children()

如何给p元素和ul元素同时设置背景色呢？可以发现它们都是div的子元素，这里用children()。代码如下：

$("div").children().css("background", "lightgreen");

效果图如下：

从上面可以看出： children()会返回被选元素的所有直接子元素。

find()

如何给div下的span元素修改背景色呢？这里用find()来实现，代码如下：

$("div").find("span").css("background","orange");

效果如下：

从上面可以看出：find()会从被选元素开始查找，一直向下直到最后一个后代元素。

编程要求

在右侧编辑器Begin至End之间填充代码，运用本关学到的方法实现下面的效果。要求如下：

本关操作的元素是div元素；
设置p元素的背景色为red；
设置span元素的背景色为#fff；

格式注意：

获取元素统一用类名获取；
统一用双引号""表示字符串；

效果如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
    .container{
        width: 200px;
        margin: 20px auto;
    }
    .box{
        width: 200px;
        line-height: 140px;
        background: orange;
        text-align: center;
        font-size: 60px;
    }
    </style>
</head>
<body>
    <div class="container">
        <p class="box">
            <span class="item">
            KO!
            </span>
        </p>
    </div>

    <script>
     $(function(){
         
         //----------------- Begin -----------------
          $(".container").find("span").css("background","#fff");
          $(".container").children().css("background","red");


         //----------------- End --------------------

     })

    </script>


</body>
</html>

Andone_hsx

发布了87 篇原创文章 · 获赞 32 · 访问量 9万+

私信关注

jQuery——遍历DOM元素的后代元素

猜你喜欢