3. 遍历
children()：用于取得匹配元素的子元素集合，该方法只沿着 DOM 树向下单一层级
find()：返回被选元素的后代元素，一路向下直到最后一个后代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.ancestors *{
padding: 5px;
margin: 15px;
display: block;
border: 2px solid lightgrey;
color: lightgrey;
}
</style>
<title>Document</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 遍历后代
// $("ul").children().css("color","red");
// $("ul").children(".li3").css("color","green");
// $("ul").find("*").css("color","blue");
// $("ul").find(".li3").css("font-size","30px");
});
</script>
</head>
<body class="ancestors">body（曾曾祖父元素）
<div style="width: 500px;">div(曾祖父元素)
<ul>ul(祖父元素)
<li>li1(父元素)<span>span</span></li>
<li>li2</li>
<li class="li3">li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</div>
</body>
</html>
4. 遍历
first()：返回被选元素的首个元素
last()：返回被选元素的最后一个元素
eq() ：返回被选元素中带有指定索引号的元素
filter() ：返回匹配的元素
not() ：返回不匹配标准的所有元素
<!DOCTYPE >
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.ancestors *{
padding: 5px;
margin: 15px;
display: block;
border: 2px solid lightgrey;
color: lightgrey;
}
</style>
<title>Document</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 遍历过滤
$("li").first().css("color","red");
$("li").last().css("color","green");
$("li").eq(2).css("color","blue");
$("li").filter(".li3").css("font-size","30px");
$("li").not(".li3").css("font-size","10px");
});
</script>
</head>
<body class="ancestors">body（曾曾祖父元素）
<div style="width: 500px;">div(曾祖父元素)
<ul>ul(祖父元素)
<li>li1(父元素)<span>span</span></li>
<li>li2</li>
<li class="li3">li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</div>
</body>
</html>