📌  相关文章
📜  jQuery children()方法

📅  最后修改于: 2020-11-26 07:14:57             🧑  作者: Mango

jQuery children()方法

jQuery中的children()方法返回给定选择器的直接子级。它是JQuery中的内置方法。此方法仅遍历DOM树下的单个级别。我们可以使用find()方法向下遍历多个级别或返回后代(例如，孙辈，曾孙辈等)。

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

children()方法不返回文本节点。我们可以使用contents()方法来获取所有带有文本节点的子级。

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

句法

$(selector).children(filter)

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

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

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

例1

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

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









 body
  
 div element
      
     First ul element
      
     Heading h2 
    
      

      
     Second ul element
          
     Paragraph element

输出量

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

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

例2

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

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









 body
  
 div element
      
     First ul element
      
     Heading h2 
    
      

      
     Second ul element
          
     Paragraph element

输出量

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

单击按钮后，我们可以看到该函数将首先返回具有类名的元素。在这里，该函数将不返回第二个ul元素，它也是div元素的直接子代。

单击按钮后，输出将为-