jQuery | children() 示例

children()是jQuery 中的一个内置方法，用于查找与所选元素相关的所有子元素。 jQuery 中的这个 children() 方法向下遍历到所选元素的单个级别并返回所有元素。

句法：

$(selector).children()

这里的选择器是将要找到其子元素的选定元素。
参数：它不接受任何参数。
返回值：它返回所选元素的所有子元素。

jQuery 代码来显示这个函数的工作：
代码#1：在下面的代码中，所有直接连接到“div”元素的元素都用绿色突出显示。

   

    
        .parent * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    
    
    
        $(document).ready(function() {
            $("div").children().css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    

   

   
    This is the current element !!!
        This is first children
            This is grandchild
        
        This is Second children
            This is grandchild
        
    
   

   

输出：

一个可选参数也可以用于 children() 方法来过滤子元素的搜索。
句法：

$(selector1).children("selector2")

这里 selector1 是将要找到其子元素的选定元素。
参数：它接受下面指定的参数-

selector2：这是被选元素的所有子元素中的优先子元素。

返回值：它返回所选元素的先前子元素。

代码#2：在下面的代码中，在所有段落元素中，第一段的元素被选中并以绿色突出显示。

   

    
        .descendants * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    
    
    
        $(document).ready(function() {
            $("div").children("p.first").css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    

   

   
    This is the current element !!!
        This is the first paragraph element !!!
            This is grandchild
        
        This is the second paragraph element !!!
            This is grandchild
        
    
   

   

输出：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。