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>

jQuery——遍历DOM元素的后代元素相关推荐

jQuery——遍历DOM元素的兄弟元素
任务描述本关任务:用 jQuery 遍历 DOM 元素的兄弟元素.效果如下: 相关知识为了完成本关任务,你需要掌握:1.siblings(),2. next() , nextAll() 3. pr ...
CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
HTML中父元素、子元素、后代元素和兄弟元素
HTML文档中的元素有着明确的关系. 包含另一个元素的元素是被包含元素的父元素:反过来说,被包含元素是包含元素的子元素. 一个元素可以有多个子元素,但只能有一个父元素. 包含在其他元素中的元素也可能包 ...
jQuery查找子元素与后代元素
子元素: children()方法:返回返回被选元素的所有直接子元素. $().children('选择器') 如选择type为file的子元素 $(this).children("inpu ...
jQuery的DOM操作之选择元素
.get() 用jQuery选择器选择出来的元素被包装为jQuery对象,而面对不同的需求可能需要我们获取的有时候是jQuery对象,有时候是原生DOM元素,此时使用get方法进行进一步的选择可获得原 ...
jquery的DOM节点操作(替换元素节点)
1.替换元素节点在jquery中,如果要替换元素中的节点,可以使用replaceWith()和replaceAll()这两种方法.这里我们推荐使用replaceWith()方法,其语法格式分别如下: ...
jquery的DOM节点操作(复制元素节点)
1.复制元素节点在页面中,有时候需要复制某个元素节点,可以通过clone()方法轻松实现这一功能. 语法格式如下: 在复制元素节点后,也要将复制的元素节点追加到某元素节点下,这样才会在相应的区域显示 ...
jquery的DOM节点操作(删除元素节点)
1.删除元素节点在操作页面时,删除多余或者指定的页面元素是非常必要的. jquery中提供了remove()方法来删除元素. 其语法格式如下: 删除元素节点示例代码: <!DOCTYPE ht ...
jQuery 遍历 - 后代【后代是子、孙、曾孙等等。children()查找下一个子元素； find()查找所有后代】
jQuery 遍历 - 后代后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方 ...

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

jQuery——遍历DOM元素的后代元素相关推荐

最新文章

热门文章