如何使用 jQuery 过滤任何元素的子元素？

在本文中，我们将学习如何过滤 JQuery 中任何元素的子元素。 JQuery是一个快速且轻量级的 JavaScript 库，它简化了 HTML/CSS 文档，或者更准确地说是文档对象模型 (DOM) 和 JavaScript 之间的交互。它以“少写，多做”的座右铭而广为人知。这意味着您只需编写几行代码即可完成所需的工作。

方法：我们可以通过选择合适的选择器来完成这个任务。例如，如果我们选择第一个孩子选择器，那么只有第一个孩子将被突出显示，如果我们选择了最后一个孩子选择器，那么最后一个孩子将被突出显示。

子过滤器分为以下几类：

• first-child 选择器：此选择器用于选择作为其父元素的第一个子元素的所有元素。
• first-of-type Selector：此选择器用于选择所有同名元素的兄弟中的第一个元素。
• last-child 选择器：此选择器用于选择作为其父元素的最后一个子元素的所有元素。
• last-of-type Selector：此选择器用于选择所有具有相同元素名称的兄弟姐妹中的最后一个元素。
• nth-child() 选择器：此选择器用于选择所有其父元素的第 n 个子元素。
• nth-last-child() 选择器：此选择器用于选择其父元素的第 n 个子元素，从最后一个元素计数到第一个元素。
• nth-last-of-type() 选择器：此选择器用于选择与其父级的第 n 个子元素相关的具有相同元素名称的兄弟元素的所有元素，从最后一个元素计数到第一个元素。
• nth-of-type() 选择器：此选择器用于选择所有元素的第 n 个子元素，这些元素与具有相同元素名称的兄弟元素相关。
• only-child 选择器：此选择器用于选择作为其父元素的唯一子元素的所有元素。
• only-of-type Selector：此选择器用于选择所有没有同名同级元素的元素。

示例 1：在此示例中，我们将使用 first-child Selector选择其父元素的第一个子元素。

HTML

  

    
        span {
            color: black;
        }
  
        span.thisgreen {
            color: green;
            font-weight: bolder;
        }
  
        body {
            text-align: center;
        }
    
    
    

  

    GeeksForGeeks
  
    
        Database,
        OS,
        Computer Networks
    
    
        Windows,
        Linux,
        MacOS
    
  
    
        $("div span:first-child")
            .css("text-decoration", "underline")
            .hover(function () {
                $(this).addClass("thisgreen");
            }, function () {
                $(this).removeClass("thisgreen");
            });
    

  

输出：

示例 2：在此示例中，我们将使用last-child Selector 来选择其父元素的最后一个子元素。

HTML

  

    
        span {
            color: black;
        }
  
        span.thisgreen {
            color: green;
            font-weight: bolder;
        }
  
        body {
            text-align: center;
        }
    
    
    

  

    GeeksForGeeks
  
    
        Database,
        OS,
        Computer Networks
    
    
        Windows,
        Linux,
        MacOS
    
  
    
        $("div span:last-child")
            .css("text-decoration", "underline")
            .hover(function () {
                $(this).addClass("thisgreen");
            }, function () {
                $(this).removeClass("thisgreen");
            });
    

  

输出：