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

梦里梦外; 2022-04-05 13:53 325阅读 0赞

任务描述

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

![206887][]

相关知识

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

节点树

基本的html结构如下：

1.  `<!doctype html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.  `<title>节点树</title>`
6.  `</head>`
7.  `<body>`
8.  `<div>我是div</div>`
9.  `<a href="#">我是链接</a>`
10. `</body>`
11. `</html>`

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

![206642][]

说明：

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

向上遍历DOM节点

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

1.  `<div>div (曾祖父元素)`
2.  `<ul>ul (祖父元素)`
3.  `<li>li (父元素)`
4.  `<span>span</span>`
5.  `</li>`
6.  `</ul>`
7.  `</div>`

效果图如下：

![206658][]

parent()

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

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

效果图如下：

![206659][]

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

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

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

效果图如下：

![206660][]

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

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

效果如下：

![206661][]

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

编程要求

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

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

格式注意：

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

效果如下：

![206886][]

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

[206887]: https://educoder.trustie.net/attachments/download/206887
[206642]: https://educoder.trustie.net/attachments/download/206642
[206658]: https://educoder.trustie.net/attachments/download/206658
[206659]: https://educoder.trustie.net/attachments/download/206659
[206660]: https://educoder.trustie.net/attachments/download/206660
[206661]: https://educoder.trustie.net/attachments/download/206661
[206886]: https://educoder.trustie.net/attachments/download/206886