1. 程式人生 > >jquery中選擇器children和find的區別

jquery中選擇器children和find的區別

children()和find()的異同:

1> children及find方法都用是用來獲得element的子elements的,兩者都不會返回 text node,就像大多數的jQuery方法一樣。 
2> children方法獲得的僅僅是元素一下級的子元素,即:immediate children。 
3> find方法獲得所有下級元素,即:descendants of these elements in the DOM tree 
4> children方法的引數selector 是可選的(optionally),用來過濾子元素,

但find方法的引數selector方法是必選的。 
5> find方法事實上可以通過使用 jQuery( selector, context )來實現。即$('li.item-ii').find('li')等同於$('li', 'li.item-ii').

例:

<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>
使用:$('ul.level-2').children().css('border', '1px solid green'); 的效果是:


使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是: 

原文連結:http://www.cnblogs.com/Tally/archive/2013/01/04/2844042.html