jQuery遍歷之find()方法
jQuery是一個合集對象，如果想快速查找DOM樹中的這些元素的后代元素，此時可以用find()方法，這也是開發(fā)使用頻率很高的方法。這里要注意 children與find方法的區(qū)別，children是父子關(guān)系查找，find是后代關(guān)系（包含父子關(guān)系）
理解節(jié)點查找關(guān)系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代碼如果是$("div").find("li")，此時，li與div是祖輩關(guān)系，通過find方法就可以快速的查找到了。
.find()方法要注意的知識點：
- find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
- 與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數(shù)。如果我們需要實現(xiàn)對所有后代元素的取回，可以傳遞通配選擇器 '*'。
- find只在后代中遍歷，不包括自己。
- 選擇器 context 是由 .find() 方法實現(xiàn)的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。
注意重點：
.find()和.children()方法是相似的
1.children只查找第一級的子節(jié)點
2.find查找范圍包括子節(jié)點的所有后代節(jié)點
具體的操作，請參考右邊的代碼
任務
請在右邊代碼區(qū)域的第79行填入任務代碼
在class="left"的元素中
找到后代元素li中的最后一個
并加上紅色的邊框
- ?不會了怎么辦
-
$('.left').find('li:last').css('border', '1px solid red')
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 200px;
}
.left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
span {
color: blue;
}
</style>
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>find方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2 test">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>點擊：find傳遞表達式</button>
<br/>
<br/>
<h3>find表達式</h3>
<div style="border:1px solid red;">
<p>
<span>測試1</span>
<a>測試2</a>
</p>
<p>
<span>慕課網(wǎng)1</span>
<a>慕課網(wǎng)2</a>
</p>
<div>
<span>Aaron1</span>
<a>Aaron2</a>
</div>
</div>
<br/>
<br/>
<button>點擊：find傳遞$對象</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有p元素，然后篩選出子元素是span標簽的節(jié)點
//改變其字體顏色
var $spans = $('span');
$("p").find($spans).css('color', 'red');
})
</script>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
