区分 find() 和 children() 方法

在 jQuery 中，有两个常用的操作 DOM 树结构的方法： find() 和 children() 。虽然它们的功能有些相似，但是它们之间还是有区别的。

find() 方法

find() 方法用于查找指定元素下的所有子孙元素。可以传入选择器字符串作为参数，也可以不传任何参数，直接查找所有的子孙元素。 find() 方法返回包含一个或多个匹配元素的 jQuery 对象。

语法：

$(selector).find(filter)

参数：

• filter：可选参数，用于过滤需要查找的元素。

示例：

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">
    <p>子元素2</p>
    <div class="grandchild">孙元素</div>
  </div>
  <div class="child">子元素3</div>
</div>

// 查找 id 为 parent 的元素下所有的子孙元素
$('#parent').find('*');

// 查找 class 为 child 的元素下的所有子孙元素
$('.child').find('*');

// 查找 class 为 child 的元素下的所有 p 元素
$('.child').find('p');

// 查找 class 为 child 的元素下的所有 class 为 grandchild 的元素
$('.child').find('.grandchild');

children() 方法

children() 方法用于查找当前元素的所有直接子元素。可以传入选择器字符串作为参数，也可以不传任何参数，直接查找所有的子元素。 children() 方法返回包含一个或多个匹配元素的 jQuery 对象。

语法：

$(selector).children(filter)

参数：

• filter：可选参数，用于过滤需要查找的元素。

示例：

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">
    <p>子元素2</p>
    <div class="grandchild">孙元素</div>
  </div>
  <div class="child">子元素3</div>
</div>

// 查找 id 为 parent 的元素下直接的子元素
$('#parent').children();

// 查找 class 为 child 的元素下的直接子元素
$('.child').children();

// 查找 class 为 child 的元素下的所有 p 元素
$('.child').children('p');

// 查找 class 为 child 的元素下没有任何子元素
$('.child').children(':empty');

区别

• find() 方法查找的是当前元素下的所有子孙元素，而 children() 方法只查找当前元素下的直接子元素。
• find() 方法可以查找任意深度的子孙元素，而 children() 方法只查找当前元素的一层子元素。
• find() 方法可以传入任意选择器字符串作为参数，而 children() 方法只能传入简单的选择器字符串。
• children() 方法执行的效率比 find() 方法要高。

总之，在操作 DOM 树结构时，根据需要选择合适的方法，提高使用效率。