jQuery中find()方法用法实例

介绍

在jQuery中，我们可以通过选择器来选取文档中的元素，但是当文档中的元素结构比较复杂时，就需要用到find()方法。find()方法用于查找DOM元素中的子元素，这个子元素可以是直接的子元素、间接的子元素、或者不是子元素的后代。

用法

语法

$(selector).find(filter)

• selector: 必填，需要查找的DOM元素
• filter: 可选，代表查找时需要过滤的元素，可以是选择器字符串或jQuery对象，如果省略则查询的是所有后代元素。

示例1：查找直接子元素

在下面的HTML结构中，我们可以用find()方法找到子元素ul，并为其设置样式：

<div id="container">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
  </ul>
  <span>hello world!</span>
</div>

$("#container").find("ul").css("color", "red");

通过上述代码，我们找到了container元素中第一个ul元素，并为其设置了红色的字体颜色。

示例2：查找后代元素

在下面的HTML结构中，我们可以用find()方法找到所有的li元素，并为它们设置样式：

<div id="container">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
  </ul>
  <span>hello world!</span>
</div>

$("#container").find("li").css("color", "red");

通过上述代码，我们找到了container元素中所有的li元素，并为它们设置了红色的字体颜色。

总结

find()方法是jQuery中非常实用的查找元素的方法，它可以完成对DOM结构元素的快速查找和操作。同时，我们还可以利用它的参数来进一步筛选需要查找和操作的元素。