区分 find() 和 children() 方法

在使用 jQuery 进行 DOM 操作时，经常会用到 find() 和 children() 这两个方法。这两个方法都可以查找元素，但是具体的实现和使用方式有所不同。

find()

find() 方法用于查找指定元素的后代元素，包括嵌套的子级、孙级等等。它可以接受一个选择器作为参数，如果没有传递参数，则返回所有后代元素。

语法

$(selector).find(filter)

参数：

• selector：用于查找元素的选择器字符串。
• filter：可选参数，用于过滤已查找的元素。

示例

<ul id="list">
  <li>
    <span>菜单 1</span>
    <ul>
      <li><a href="#">子菜单 1-1</a></li>
      <li><a href="#">子菜单 1-2</a></li>
    </ul>
  </li>
  <li>
    <span>菜单 2</span>
    <ul>
      <li><a href="#">子菜单 2-1</a></li>
      <li><a href="#">子菜单 2-2</a></li>
    </ul>
  </li>
</ul>

// 查找所有子菜单的链接
$('#list').find('a')

// 查找菜单 1 的子菜单
$('#list li:first-child').find('a')

// 查找所有菜单项下的所有子级元素
$('#list').find('*')

children()

children() 方法用于查找指定元素的直接子元素。和 find() 方法不同的是，children() 方法不会查找所有后代元素，而只会查找直接子元素。

语法

$(selector).children(filter)

参数：

• selector：用于查找元素的选择器字符串。
• filter：可选参数，用于过滤已查找的元素。

示例

<ul id="list">
  <li>
    <span>菜单 1</span>
    <ul>
      <li><a href="#">子菜单 1-1</a></li>
      <li><a href="#">子菜单 1-2</a></li>
    </ul>
  </li>
  <li>
    <span>菜单 2</span>
    <ul>
      <li><a href="#">子菜单 2-1</a></li>
      <li><a href="#">子菜单 2-2</a></li>
    </ul>
  </li>
</ul>

// 查找所有菜单项的直接子元素（即菜单名称和子菜单列表）
$('#list').children()

// 查找菜单 1 的子菜单列表
$('#list li:first-child').children('ul')

// 查找所有菜单的名称标签
$('#list').children('li').children('span')

总结

find() 和 children() 方法都用于查找元素，但是它们的查找范围不同。find() 方法查找的是元素的后代元素（包括子孙级别），而 children() 方法查找的是元素的直接子元素。在实际开发中，我们根据需要选择合适的方法来查找元素。