jQuery children() 方法

jQuery 中的 children() 方法返回给定选择器的直接子元素。它是 JQuery 中的一个内置方法。此方法仅遍历 DOM 树的下一层。我们可以使用 find() 方法遍历多层或返回后代（例如孙子、曾孙等）。

假设我们有一个表示元素集的 jQuery 对象，那么 children() 方法在 DOM 树中向下搜索一层，并构建一个包含匹配元素子集的新 jQuery 对象。

children() 方法不返回文本节点。我们可以使用 contents() 方法获取所有包含文本节点的子元素。

使用 children() 方法的语法如下。

语法

此方法接受一个可选参数，即 filter。

filter： 这是一个用于缩小搜索范围的可选值。它是一个选择器表达式，类型与传递给 $() 函数的类型相同。

现在，我们将看一些使用 children() 方法的示例。在第一个示例中，我们不使用可选参数值，而在第二个示例中，我们使用可选值来缩小搜索范围。

示例 1

在此示例中，有一个 div 元素，以及两个 ul 元素、一个标题 h2 和一个 段落 元素。在这里，我们使用 children() 方法获取 div 元素的直接子元素。两个 ul 元素都是 div 元素的直接子元素，因此 children() 方法将返回这两个 ul 元素作为 div 元素的直接子元素。

我们必须单击给定的按钮才能看到效果。

输出

单击给定按钮后，输出将是 -

现在，在下一个示例中，我们将使用 children() 方法的可选参数。

示例 2

在此示例中，我们使用 filter 值来缩小搜索范围。这里有两个 ul 元素，它们都是 div 元素的直接子元素。我们将带有类名 first 的第一个 ul 元素作为 children() 方法的可选参数传递。

因此，该方法将返回相应的 ul 元素，该元素现在是给定选择器所有子元素中的优先子元素。

输出

执行上述代码后，输出将是 -

单击按钮后，我们可以看到该函数将返回带有类名 first 的元素。在此，该函数不会返回第二个 ul 元素，它也是 div 元素的直接子元素。

点击按钮后，输出将是 -