.find()
.find( selector )
描述：获得当前所匹配的元素集合中每个元素的后代元素，用一个选择器、jQuery对象，或者元素作筛选。
- selector类型：Selector一个字符串，它包含了一个选择器表达式，用来匹配所针对的元素。
给定一个jQuery对象，代表了一个DOM元素的集合，.find()方法允许我们搜遍这些元素在DOM树中的后代元素，并从匹配的元素构成一个新的jQuery对象。.find()方法和.children()方法很相似，除了后者只能遍历DOM树中的一个层级。
.find()方法的第一种签名接受一个选择器表达式，与我们可以传递给$()函数的选择器表达式类型相同。元素将被筛选以测试它们是否匹配该选择器。
设想一个网页带有一个基本的嵌套列表：
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
如果我们从项目II开始，我们可以在它里面找到列表项目：
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );
这个调用的结果是在项目A、B、1、2、3和C上有一个红色的背景。虽然项目II匹配选择器表达式，但是它不包含在结果中；只有后代元素可以考虑作为匹配的候选项。
与别的树遍历方法不同，该选择器表达式需要在.find()中调用。如果我们需要检索所有的后代元素，我们可以传入普遍选择器'*'以完成这。
选择器上下文是用.find()方法实现的；因此，$( "li.item-ii" ).find( "li" )等同于$( "li", "li.item-ii" )。
自从jQuery 1.6开始，我们可以用一个给定的jQuery集合或元素筛选选区。用和上面相同的嵌套列表，如果你开始于：
var allListElements = $( "li" );
然后传入该jQuery对象以查找：
$( "li.item-ii" ).find( allListElements );
这将返回一个jQuery集合，它只包含了作为项目II的后代元素的列表元素：
类似地，也可以传入一个元素以查找它：
var item1 = $( "li.item-1" )[ 0 ]; $( "li.item-ii" ).find( item1 ).css( "background-color", "red" );
这个调用的结果是项目1的背景变红色：
示例
从每个段落文本开始，搜索后代元素中的<span>元素，与$( "p span" )相同。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>find demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p><span>Hello</span>, how are you?</p> <p>Me? I'm <span>good</span>.</p> <script> $( "p" ).find( "span" ).css( "color", "red" ); </script> </body> </html>
演示结果
一个选区使用一个所有<span>标签的jQuery集合。只有在一个<p>标签内部的<span>变成红色，与此同时别的都留作蓝色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<style>
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
<script>
var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );
</script>
</body>
</html>
演示结果
在每个单词周围添加一个<span>，然后对带字母t的<span>添加一个悬停和斜体单词。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<style>
p {
font-size: 20px;
width: 200px;
color: blue;
font-weight: bold;
margin: 0 10px;
}
.hilite {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
When the day is short
find that which matters to you
or stop believing
</p>
<script>
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
newText = "<span>" + newText + "</span>";
$( "p" )
.html( newText )
.find( "span" )
.hover(function() {
$( this ).addClass( "hilite" );
}, function() {
$( this ).removeClass( "hilite" );
})
.end()
.find( ":contains('t')" )
.css({
"font-style": "italic",
"font-weight": "bolder"
});
</script>
</body>
</html>
演示结果