Jquery-获取子元素children，find

最新推荐文章于 2023-08-25 01:32:48 发布

baihui2503

最新推荐文章于 2023-08-25 01:32:48 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hwaggLee/p/4525491.html

本文详细介绍了jQuery中用于选择子元素的三种方法：>、children()和find()，并通过实例展示了它们的使用场景及区别。children()仅获取直接子元素，而find()可获取所有后代元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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