区分 find() 和 children() 方法

在查看 find()和children()方法之间的差异之前。让我们简要了解这些是什么以及它们的作用。

find()：该方法用于获取当前匹配元素集中每个元素的所有过滤后的后代。

句法：

$(selector).find('filter-expression')

参数：用于过滤后代搜索的选择器表达式、元素或 jQuery 对象。

返回值：它返回调用find()方法的元素的所有匹配后代。这个方法遍历 DOM 一直到最后一个后代。这意味着它遍历所有级别到 DOM，如子级、孙子级、曾孙级等等。

示例 1：在输出中，我们可以清楚地看到所有 ‘span’ 标签颜色都发生了变化，谁是 p 标签的后代。

HTML

  

    
    
    

  
    
    Hello Geeks!
  
    
        Hey! How are you
    
  
    
        $('p').find('span').css('color','blue')
    

输出：

儿童（）： children()方法还用于获取匹配元素集中每个元素的所有后代。我们也可以过滤结果。

句法：

$(selector).children(filter-expression)

参数：（可选）如果我们不提供任何过滤器表达式，它将返回所选元素的所有直接子元素。要过滤结果，请传递参数。

返回值：它只返回被选元素的直接子元素。

示例 2：我们可以看到p标签的颜色改变了谁是“a”类的直接孩子。如果我们没有为 children()方法提供任何过滤器表达式，那么所有的p标签都会是蓝色的，因为类 ‘b’ 也是类 ‘a’ 的直接子类

HTML

  

    
    

  

    
        Hello geeks
  
        
            Hey Geeks
        
        Hello geeks
  
    
    
        $('.a').children('p').css('color','blue')
    

  

输出：

find()和children()方法之间的差异：这两种方法的工作原理几乎相同。它们之间只有一个主要区别，让我们看看它是什么。

让我们举个例子。

HTML

  

    
    
    

  

    
         a1 
         a2 
          
        
             b1 
             b1 
              
            
                 c1 
                 c2 
            
        
    
      
    
        $(".a").find("p").css('color','red')
        $(".a").children("p").css('color','blue')
    

  

输出：

我们选取了 3 个类 a、b 和 c，每个类都包含两个“p”标签。

让我们看看当我们在这个结构上调用 find()和children() 方法时会发生什么。

在类 ‘a’ 上调用 find()方法时，它会一直到最后一个后代并到处搜索 p标签。它检查它的孩子，然后是孩子的孩子，依此类推。

在类 ‘a’ 上调用 children()方法时，它只会检查它的直接子级，即它只会检查一个级别。

find()	children()
This method is used to search more than one level down the DOM tree.	This method is used to search a single level down the DOM tree.
It is slower than the children() method.	It is faster than the find() method.