在jQuery中，提供了3種查找後代元素的方法：
所謂的後代元素，就是某個元素的“子元素”、“孫元素”……。孫元素，在前端雖然沒這個說法，但是卻比較形象，所以這一節使用這一個說法。
在jQuery中，我們可以使用children()方法來查找當前元素的“所有子元素”或“部分子元素”。注意，children()方法只能查找子元素，不能查找其他後代元素。
語法：
children(expression)
說明：
參數expression表示jQuery選擇器表達式，用來過濾子元素。當參數省略時，則將選擇所有的子元素。如果參數不省略，則表示選擇符合條件的子元素。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper").hover(function () {
$(this).children(".test").css("color", "red");
}, function () {
$(this).children(".test").css("color", "black");
})
})
</script>
</head>
<body>
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孫元素</li>
<li class="test">孫元素</li>
<li>孫元素</li>
</ul>
<div class="test">子元素</div>
</div>
<hr />
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孫元素</li>
<li class="test">孫元素</li>
<li>孫元素</li>
</ul>
<div class="test">子元素</div>
</div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們鼠標移到第1個class為wrapper的div元素上時，在浏覽器預覽效果如下：
分析：
$(this).children(".test")表示選擇當前元素下class為test的“子元素”。在這裡我們會發現，雖然也有class為test的“孫元素”，但是使用children()方法卻不會將“孫元素”選中。
與children()方法相似，contents()方法也是用來查找子內容的，但它不僅獲取子元素，還可以獲取文本節點、注釋節點等。因此讀者可以把它視為DOM中childNodes屬性的jQuery實現。contents()方法很少用，作為初學者我們可以直接忽略這個方法。
我記得在之前不少教程中，對於常見但不常用的一些知識，都會多少提及一下。很多熱心的綠友建議說，站長啊，既然這個知識用不到，浪費篇幅，干嘛提及呢？直接刪除都行了。其實嘛，道理很簡單：學習知識，知道“哪些不用深入學習”，跟“知道哪些需要深入學習”是同等重要的。一來為了方便讀者理清思路，二來以後碰到這個知識了，也有那麼點印象不至於手忙腳亂。
find()方法和children()方法相似，都是用來查找所選元素的後代元素，但是find()方法能夠查找所有後代元素，而children()方法僅能夠查找子元素。
find()方法和children()方法使用頻率差不多，同等重要。大家要認真掌握，並且認真區分。
語法：
find(expression)
說明：
參數expression表示jQuery選擇器表達式，用來過濾子元素。當參數省略時，則將選擇所有的子元素。如果參數不省略，則表示選擇符合條件的子元素。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper").hover(function () {
$(this).find(".test").css("color", "red");
}, function () {
$(this).find(".test").css("color", "black");
})
})
</script>
</head>
<body>
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孫元素</li>
<li class="test">孫元素</li>
<li>孫元素</li>
</ul>
<div class="test">子元素</div>
</div>
<hr />
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孫元素</li>
<li class="test">孫元素</li>
<li>孫元素</li>
</ul>
<div class="test">子元素</div>
</div>
</body>
</html>
默認情況下，在浏覽器預覽效果如下：
當我們鼠標移到第1個class為wrapper的div元素上時，在浏覽器預覽效果如下：
分析：
$(this).find(".test")表示選擇當前元素下的class為test的所有“後代元素”，既包括子元素，也包括孫元素等所有後代元素。大家將find()方法這個例子跟children()方法那個例子對比一下，就能很直觀發現兩者之間的不同。