Educoder jQuery动画 第2关：jQuery——遍历DOM元素的后代元素

任务描述

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

相关知识

为了完成本关任务，你需要掌握：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>

效果图如下：

children()

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

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

效果图如下：

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

find()

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

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

效果如下：

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