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

傷城~ 2022-04-05 13:54 340阅读 0赞

--------------------

任务描述

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

![206892][]

相关知识

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

向下遍历DOM节点

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

1.  `<div>div (当前元素)`
2.  `<p>p (儿子元素)`
3.  `<span>span(孙子元素)</span>`
4.  `</p>`
5.  `</div>`
6.  `<div>div(父元素)`
7.  `<ul>ul(儿子元素)`
8.  `<li>li(孙子元素)`
9.  `<span>span(曾孙子元素)</span>`
10. `</li>`
11. `</ul>`
12. `</div>`

效果图如下：

![206776][]

children()

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

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

效果图如下：

![206777][]

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

find()

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

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

效果如下：

![206778][]

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

编程要求

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

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

格式注意：

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

效果如下：

![206893][]

<!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>

[206892]: https://educoder.trustie.net/attachments/download/206892
[206776]: https://educoder.trustie.net/attachments/download/206776
[206777]: https://educoder.trustie.net/attachments/download/206777
[206778]: https://educoder.trustie.net/attachments/download/206778
[206893]: https://educoder.trustie.net/attachments/download/206893