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'); 的效果是： 

 

转载于:https://www.cnblogs.com/hwaggLee/p/4525491.html