Jquery-獲取子元素children，find

1、查找子元素方式1：>

例如：var aNods = $("ul > a");查找ul下的所有a標簽

2、查找子元素方式2：children()

3、查找子元素方式3：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'); 的效果是：