开发者学堂课程【jQuery 开发教程：jQuery 遍历_树遍历1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4303
jQuery 遍历_树遍历1
目录
一、 具体方法
二、 演示
一、具体方法
1、树遍历与其他遍历的区别
树遍历不仅可以遍历本身还可以遍历子元素，所以称为树遍历。
2、具体方法
（1）.children()：获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
（2）.closest()：从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
（3）.find()：通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。.find()和.children()方法很类似但是.children()：只能获得匹配元素集合中每个元素的直接子元素，而 .find()可以得到当前匹配的元素集合中每个元素的后代，包括它子元素的后代。
二、演示
1、.children()方法演示
<body>
<ul>
<li>li 1</li>
<li class="selected">li 2</li>
<li>li 3</li>
</ul>
<script>
$(function() {
$("ul").children().css("border","ipx solid red");
})
选择到 ul 下所有 li 标签的子元素，然后添加一个 border 的样式，使用 children 方法，它的参数有两种形式，第一种不写参数，第二种参数为一个选择器。$("ul").children().css("border","ipx solid red");此时不写参数的意思是选择到 ul 标签下所有的子元素。演示效果是三个 li 标签都被添加了 border 的效果。第二种形式$("ul").children(“.selected”).css("border","ipx solid red")这里设置的参数表示让第二个 li 标签添加 border 效果。
2、.closest()方法演示
<ul class="one">
<li>li 1</li>
<li class="two">li 2
<ul class="three">
<li>item 1</li>
<li class="inner”>item 2</li>
<li>item 3</1i>
</ul>
</li>
<li>li 3<li>
</ul>
<script>
$(function() {
Console.log($(“.inner”).closest(“ul”))
})
获得 inner 的最先祖先元素，用 closest 方法，这个方法有一个参数，并且必须要写。这个参数是一个选择器，即要获得 inner 的祖先元素，它的祖先元素是什么类型的，符合什么条件，这里写 ul
当把 .cloest 的参数中换成 li ，返回的是它本身，是因为 .cloest 方法是从它本身开始查找，再从上一级以及更上一级开始查找，当它查询自身时，已经符合了条件，所以返回了 inner。
3、.find()方法演示
<ul class="one">
<li>li 1</li>
<li class="two">li 2
<ul class="three">
<li>item 1</li>
<li class="inner”>item 2</li>
<li>item 3</1i>
</ul>
</li>
<li>li 3<li>
</ul>
<script>
$(function() {
$(“.one”).find(“li”).css(“border”,1px solid biue”)
Find 的参数可以是元素，选择器，对象，这里用元素 li 标签，给每一个后代元素的 li 标签都添加效果。演示效果如下：
无论是子元素还是子元素的子元素，只要是 li 标签都添加上了蓝色边框的效果。这就是 find 的应用。