jQuery | children() 示例

children() 方法是 jQuery 中常用的用于获取元素的孩子节点的方法。该方法可以接受一个参数，用于筛选符合条件的元素。

语法

$(selector).children(filter);

参数：

• selector：可选参数，用于选择筛选条件的字符串。
• filter：可选参数，用于进一步筛选孩子节点的字符串或函数。

示例

我们来看一个示例，首先我们有以下的 HTML 结构：

<ul>
  <li>Html</li>
  <li>Css</li>
  <li>
    JavaScript
    <ul>
      <li>jQuery</li>
      <li>React</li>
      <li>Vue</li>
    </ul>
  </li>
</ul>

代码示例1：获取所有孩子节点

我们可以使用 children() 方法来获取所有的孩子节点。

$('ul').children().css('color', 'red');

在上面的代码中，我们使用了 css() 方法将孩子节点的颜色设置为红色。

代码示例2：获取符合条件的孩子节点

我们可以传递一个选择器参数给 children() 方法来获取所有符合条件的孩子节点。

$('ul').children('li:first').css('color', 'blue');

在上面的代码中，我们使用了 :first 选择器来获取第一个孩子节点，并使用 css() 方法将其颜色设置为蓝色。

代码示例3：获取符合条件的孩子节点的孩子节点

我们可以使用嵌套的 children() 方法来获取符合条件的孩子节点的孩子节点。

$('ul').children('li:last').children().css('text-transform', 'uppercase');

在上面的代码中，我们使用了 :last 选择器来获取最后一个孩子节点，然后使用 children() 方法获取其孩子节点，并将它们的文本转换为大写字母。

代码示例4：获取符合条件的孩子节点的特定孩子节点

我们可以使用嵌套的 children() 方法和选择器参数来获取符合条件的孩子节点的特定孩子节点。

$('ul').children('li:last').children('ul').children('li:first').css('color', 'green');

在上面的代码中，我们首先获取最后一个孩子节点，并使用 children() 方法获取其孩子节点 ul，然后使用 children() 方法获取该 ul 的第一个孩子节点，并将其颜色设置为绿色。

总结

children() 方法是 jQuery 中常用的获取元素孩子节点的方法。我们可以使用选择器参数来进一步筛选孩子节点。此外，我们还可以使用嵌套的 children() 方法来获取孩子节点的孩子节点。