jQuery | find() 与示例

find()是 jQuery 中的一个内置方法，用于查找所选元素的所有后代元素。它将一直向下遍历到 DOM 树中所选元素的最后一片叶子。
句法：

$(selector).find()

这里的选择器是被选择的元素，所有的后代元素都将被找到。
参数：它不接受任何参数。

返回值：返回被选元素的所有后代元素。

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

  

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

  

  
    This is the current element !!!
        This is the paragraph element !!!
             This is span element !!!
        
        This is the paragraph element !!!
            This is span element !!!
        
    
  

  

输出：

特定元素的所有后代元素也可以在带有一些参数的 find()函数的帮助下找到。
句法：

$(selector1).children("selector2")

这里 selector1 是被选元素，其所有后代元素都将被找到。

参数：它接受下面指定的参数-

selector2：这是唯一的“*”符号，它返回被选元素的所有子元素。

返回值：它返回被选元素的所有子元素。
代码#2：
在下面的代码中，“p”元素的所有“span”元素都被选中并以绿色突出显示。

  

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

  

  
    This is the current element !
        This is the paragraph element !!!!
            This is span 1 !!!
            This is span 2 !!!
            This is span 3 !!!
            This is span 4 !!!
        
    
  

  

输出：

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