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

最新推荐文章于 2024-04-24 10:26:01 发布

原创最新推荐文章于 2024-04-24 10:26:01 发布 · 4.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Dom #后代元素

JavaScript基础专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用jQuery的children()和find()方法遍历DOM树，实现对特定元素的样式修改。通过实例演示了children()用于选取直接子元素，find()用于查找所有后代元素。

任务描述

本关任务：用 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>