jQuery——遍历DOM元素的祖先元素

最新推荐文章于 2025-04-19 14:07:29 发布

原创最新推荐文章于 2025-04-19 14:07:29 发布 · 4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#DOM操作

JavaScript基础专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用jQuery的parent()和parents()方法遍历DOM树中的祖先元素，通过实例演示了如何设置不同层级元素的样式，适用于前端开发者学习和实践。

任务描述

本关任务：用 jQuery 遍历 DOM 的祖先元素。效果如下：

相关知识

为了完成本关任务，你需要掌握：1.节点树，2.parent()，3.parents()。

节点树

基本的html结构如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点树</title>
</head>
<body>
<div>我是div</div>
<a href="#">我是链接</a>
</body>
</html>

把它转换成DOM节点树的效果图如下：

说明：

每个html元素都是元素节点，html元素内的文本是文本节点；
在节点树中，顶端节点叫根节点，每个节点都有父节点（除了根节点）。这里html是根节点， <head>的父节点是<html>，<title>的父节点是<head>节点；
一个节点可拥有任意数量的子节点。比如：<body>拥有子节点<a>和<div>，这里只是举例，<body>还可拥有其他的节点；
兄弟节点是拥有相同父节点的节点。比如： <a>和<div>就是兄弟节点，因为它们拥有相同的父节点<body>；

向上遍历DOM节点

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

<div>div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>

效果图如下：

parent()

如何给span元素的父元素设置背景色呢？这里用parent()获取父元素。代码如下：

$("span").parent().css("background", "lightgreen");

效果图如下：

从上面可以看出： parent()会返回被选元素的直接父元素；

如果给span元素的祖父元素设置背景色呢？利用jquery链式调用的特点，再加一个parent()就可以了。代码如下：

$("span").parent().parent().css("background","orange");

效果图如下：

如果给span元素的所有祖先元素设置背景色呢？这里用parents()来实现，代码如下：

$("span").parents().css("background","orange");

效果如下：

从上面可以看出：parents()会返回被选元素的所有祖先元素，直到根元素<html>。

编程要求

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

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

格式注意：

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

效果如下：

<!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: 300px;
        margin: 30px auto;
        border: 2px solid #000;
    }
    .item{
        font-size: 60px;
        text-align: center;
        color: red;
    }
    </style>
</head>
<body>
    <div class="container"> 
         <p class="item">
              404
         </p>
    </div>
   <script>

    $(function(){        
        //------------ Begin -----------
        $(".item").parents().css("background","#ccc");
        $(".item").parent().css("background","#fff");
        
        
        //------------ End --------------
    })

   </script>
</body>