返回值:jQueryfind(selector)

通过给定的过滤器，jQuery 对象或元素，取得匹配元素集合中每个元素的后代元素。

若一个 jQuery 对象代表了一个 DOM 元素集合，.find() 方法允许我们在 DOM 树中查找集合中这些元素的后代元素，并根据匹配的元素创建一个新的 jQuery 对象。.find() 和 .children() 方法很类似，只不过后者在 DOM 树中，仅在单一层次上向下遍历。

.find(selector) 方法还可以接受一个选择器表达式，该选择器表达式可以是任何可传给 $() 函数的选择器表达式。通过这个选择器表达式来过滤出满足匹配条件的元素。

例如，在页面上有如下一个基本的嵌套列表：

<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>

如果我们从 item II 开始查找的话，我们就可以向下面这样，查找其中的列表项：

$('li.item-ii').find('li').css('background-color', 'red');

执行上述代码的结果是，列表项 A, B, 1, 2, 3, 和 C 的背景色变为红色。虽然 item 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 集合，其中只包含 item II 的后代元素。

同样的，我们也可以传入一个元素：

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

其结果是 item 1 的背景色变成了红色。

示例:

查找所有段落中的 span 元素，等同于 $("p span")

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.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 的背景色会变成红色，其它的 span 的背景色还是蓝色。

<!DOCTYPE html>
<html>
<head>
<style>
    span { color: blue; }
  </style>
<script src="jquery.min.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 标签，并为 span 标签添加 hover 事件，并且将含有 t 的单词变为斜体。

<!DOCTYPE html>
<html>
<head>
<style>
  p { font-size:20px; width:200px; cursor:default; 
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
  </style>
<script src="jquery.min.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>

演示: