通过 jQuery 遍历从被选（当前的）元素开始，在树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
一、向上遍历 DOM 树
未使用jQuery之前样式，后续css与html一致
（1）元素的直接父元素：parent()，设置span父元素的背景色为黄色
<style> body{ margin: 100px; } div{ width: 200px; height: 200px; border: 1px solid #ccc; } ul{ width: 100px; height: 100px; padding: 0; margin: 50px auto; border: 1px solid #ccc; } li{ list-style: none; width: 60px; height: 20px; margin: 20px auto; background-color: red; border: 1px solid #ccc; } </style>
<body> <div> 这是div <ul> <li> <span>span</span> </li> <li> <a>这是a</a> </li> </ul> </div> </body>
<script> $(document).ready(function(){ $("span").parent().css("background-color","yellow"); }); </script>
（2）元素的所有祖先元素：parents()
<script> $(document).ready(function(){ $("span").parents().css("background-color","yellow"); }); </script>
（3）介于两个给定元素之间的所有祖先元素：parentsUntil()，介于div与span之间的祖先元素
二、向下遍历 DOM 树
（1）元素的所有直接子元素：children()，ul的子元素
<script> $(document).ready(function(){ $("ul").children().css("background-color","yellow"); }); </script>
<body> <div> 这是div <ul> <li class="first"> <span>span</span> </li> <li> <a>这是a</a> </li> </ul> </div> </body>
<script> $(document).ready(function(){ $("ul").children(".first").css("background-color","yellow"); }); </script>
（2）元素的后代元素，一路向下直到最后一个后代：find()
<script> $(document).ready(function(){ $("div").find("a").css("background-color","yellow"); }); </script>
<script> $(document).ready(function(){ //返回 <div> 的所有后代 $("div").find("*").css("background-color","yellow"); }); </script>
三、DOM 树进行水平遍历
（1）元素的所有同胞元素：siblings()
<style> body{ margin: 100px; } div{ width: 200px; height: 350px; border: 1px solid #ccc; } ul{ width: 100px; height: 250px; padding: 0; margin: 50px auto; border: 1px solid #ccc; } li{ list-style: none; width: 60px; height: 20px; margin: 20px auto; background-color: red; border: 1px solid #ccc; } </style>
<body> <div> 这是div <ul> <li class="first"> <span>span</span> </li> <li> <a>这是a</a> </li> <li> <a>1</a> </li> <li> <a>2</a> </li> <li> <a>3</a> </li> </ul> </div> </body>
<script> $(document).ready(function(){ $("li").siblings().css("background-color","yellow"); }); </script>
（2）元素的下一个同胞元素：next()
$(document).ready(function(){ $(".first").next().css("background-color","yellow"); }); </script>
（3）元素的所有跟随的同胞元素：nextAll()
<script> $(document).ready(function(){ $(".first").nextAll().css("background-color","yellow"); }); </script>
（4）介于两个给定参数之间的所有跟随的同胞元素：nextUntil()
<body> <div> 这是div <ul> <li class="first"> <span>span</span> </li> <li> <a>这是a</a> </li> <li> <a>1</a> </li> <li class="second"> <a>2</a> </li> <li> <a>3</a> </li> </ul> </div> </body>
<script> $(document).ready(function(){ $(".first").nextUntil(".second").css("background-color","yellow"); }); </script>
四、过滤：缩小搜索元素的范围
（1）元素的首个元素：first()
<script> $(document).ready(function(){ $("li").first().css("background-color","yellow"); }); </script>
（2）元素的最后一个元素：last()
<script> $(document).ready(function(){ $("li").last().css("background-color","yellow"); }); </script>
（3）元素中带有指定索引号的元素：eq()，索引从0开始
<script> $(document).ready(function(){ $("li").eq(2).css("background-color","yellow"); }); </script>
（4）规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回：filter
<body> <div> 这是div <ul> <li class="first"> <span>span</span> </li> <li> <a>这是a</a> </li> <li> <a>1</a> </li> <li class="first"> <a>2</a> </li> <li> <a>3</a> </li> </ul> </div> </body>
<script> $(document).ready(function(){ $("li").filter(".first").css("background-color","yellow"); }); </script>
（5）返回不匹配标准的所有元素：not()，not() 方法与 filter() 相反。
<script> $(document).ready(function(){ $("li").not(".first").css("background-color","yellow"); }); </script>
五、其他方法
（1）元素添加到已存在的元素组合中：add()
<script> $(document).ready(function(){ $("ul").add("li").add("span").css("background-color","yellow"); }); </script>
<script> $(document).ready(function(){ $("ul").add("span").css("background-color","yellow"); }); </script>
（2）元素的第一个祖先元素：closest()
<script> $(document).ready(function(){ $("span").closest("ul").css("background-color","yellow"); }); </script>
(3）选取基于索引的元素的子集：slice()
<script> $(document).ready(function(){ $("li").slice(3).css("background-color","yellow"); }); </script>
