這篇文章將為大家詳細講解有關(guān)jquery查找后代元素的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，成都小程序開發(fā)，軟件按需策劃等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

一： 查找后代元素三種方法

（1）children()；

（2）contents()；

（3）find()；

所謂的后代元素，就是某個元素的“子元素”、“孫元素”……。孫元素，在前端雖然沒這個說法，但是卻比較形象，所以這一節(jié)使用這一個說法。

二：jquery獲取后代元素方法

1.children()方法

在jQuery中，我們可以使用children()方法來查找當前元素的“所有子元素”或“部分子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。

語法：children(expression)

說明：參數(shù)expression表示jQuery選擇器表達式，用來過濾子元素。當參數(shù)省略時，則將選擇所有的子元素。如果參數(shù)不省略，則表示選擇符合條件的子元素。

舉例:

    
    
    


    

        
子元素
        

            
孫元素
            
孫元素
            
孫元素
        
        
子元素
    
    

    

        
子元素
        

            
孫元素
            
孫元素
            
孫元素
        
        
子元素
    

效果如下：

當我們鼠標移到第1個class為wrapper的div元素上時，在瀏覽器預(yù)覽效果如下：

分析：$(this).children(".test")表示選擇當前元素下class為test的“子元素”。在這里我們會發(fā)現(xiàn)，雖然也有class為test的“孫元素”，但是使用children()方法卻不會將“孫元素”選中。

2.contents()方法

與children()方法相似，contents()方法也是用來查找子內(nèi)容的，但它不僅獲取子元素，還可以獲取文本節(jié)點、注釋節(jié)點等。因此讀者可以把它視為DOM中childNodes屬性的jQuery實現(xiàn)。contents()方法很少用，作為初學者我們可以直接忽略這個方法。

我記得在之前不少教程中，對于常見但不常用的一些知識，都會多少提及一下。很多熱心的建議說，站長啊，既然這個知識用不到，浪費篇幅，干嘛提及呢？直接刪除都行了。其實嘛，道理很簡單：學習知識，知道“哪些不用深入學習”，跟“知道哪些需要深入學習”是同等重要的。一來為了方便讀者理清思路，二來以后碰到這個知識了，也有那么點印象不至于手忙腳亂。

3.find()方法

find()方法和children()方法相似，都是用來查找所選元素的后代元素，但是find()方法能夠查找所有后代元素，而children()方法僅能夠查找子元素。

find()方法和children()方法使用頻率差不多，同等重要。大家要認真掌握，并且認真區(qū)分。

語法：find(expression)

說明：參數(shù)expression表示jQuery選擇器表達式，用來過濾子元素。當參數(shù)省略時，則將選擇所有的子元素。如果參數(shù)不省略，則表示選擇符合條件的子元素。

舉例:

    
    
    


    

        
子元素
        

            
孫元素
            
孫元素
            
孫元素
        
        
子元素
    
    

    

        
子元素
        

            
孫元素
            
孫元素
            
孫元素
        
        
子元素
    

默認情況下，在瀏覽器預(yù)覽效果如下：

當我們鼠標移到第1個class為wrapper的div元素上時，在瀏覽器預(yù)覽效果如下：

分析：$(this).find(".test")表示選擇當前元素下的class為test的所有“后代元素”，既包括子元素，也包括孫元素等所有后代元素。大家將find()方法這個例子跟children()方法那個例子對比一下，就能很直觀發(fā)現(xiàn)兩者之間的不同。

與children()方法相似，contents()方法也是用來查找子內(nèi)容的，但它不僅獲取子元素，還可以獲取文本節(jié)點、注釋節(jié)點等。因此讀者可以把它視為DOM中childNodes屬性的jQuery實現(xiàn)。contents()方法很少用，作為初學者我們可以直接忽略這個方法。

關(guān)于jquery查找后代元素的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享名稱：jquery查找后代元素的方法-創(chuàng)新互聯(lián)
本文來源：http://weahome.cn/article/ipodi.html