jQuery选择直接子元素

当使用jQuery选择器时，我们可能需要选择一个元素的直接子元素，而不是所有后代元素。在这种情况下，我们可以使用 .children() 方法来做到这一点。

使用语法

以下是选择一个元素的所有直接子元素的基本语法：

$(parent).children(childSelector)

parent - 表示父元素的选择器表达式

childSelector(可选) - 表示要选择的直接子元素的选择器表达式

例子

假设我们有以下HTML代码：

<ul id="parent">
  <li>第一个元素</li>
  <li>第二个元素
    <ul>
      <li>嵌套元素</li>
      <li>嵌套元素</li>
    </ul>
  </li>
  <li>第三个元素</li>
</ul>

选择所有直接子元素

以下代码选择了 ul 元素中的所有直接子元素：

$('#parent').children().css('background-color', 'green');

这会为 ul 的三个直接子元素设置绿色背景色。

选择指定的直接子元素

以下代码选择了带li标记的直接子元素：

$('#parent').children('li').css('background-color', 'green');

这会为 ul 的三个 li 元素设置绿色背景色。

总结

在jQuery中使用 .children() 方法可以选择一个元素的直接子元素。使用该方法时，您可以选择所有直接子元素或仅选择符合特定选择器条件的直接子元素。