摘要：只要符合，不管是兒子輩，孫子輩都可以與其他的樹(shù)遍歷方法不同，選擇器表達(dá)式對(duì)于是必需的參數(shù)。方法以選定的元素為中心，往內(nèi)查找可以通過(guò)方法。要一個(gè)一個(gè)給合集中每一個(gè)設(shè)置顏色，這里方法就是方法就是一個(gè)循環(huán)的迭代器，它會(huì)迭代對(duì)象合集中的每一個(gè)元素。

jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的第一級(jí)子元素，此時(shí)可以用children()方法。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個(gè)元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關(guān)系）

節(jié)點(diǎn)查找關(guān)系

    

        
1
    

代碼如果是$("div").children()，那么意味著只能找到ul，因?yàn)閐iv與ul是父子關(guān)系，li與div是祖輩關(guān)系，因此無(wú)法找到

children()無(wú)參數(shù)

允許通過(guò)在DOM樹(shù)中對(duì)這些元素的直接子元素進(jìn)行搜索，并且構(gòu)造一個(gè)新的匹配元素的jQuery對(duì)象

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)children匹配合集中每一個(gè)元素的第一級(jí)子元素

.children()方法選擇性地接受同一類(lèi)型選擇器表達(dá)式

$("div").children(".selected")

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery是一個(gè)合集對(duì)象，如果想快速查找DOM樹(shù)中的這些元素的后代元素，此時(shí)可以用find()方法，這也是開(kāi)發(fā)使用頻率很高的方法。這里要注意 children與find方法的區(qū)別，children是父子關(guān)系查找，find是后代關(guān)系（包含父子關(guān)系）

節(jié)點(diǎn)查找關(guān)系

    

        
1
    

代碼如果是$("div").find("li")，此時(shí)，li與div是祖輩關(guān)系，通過(guò)find方法就可以快速的查找到

.find()方法要注意的知識(shí)點(diǎn)

find是遍歷當(dāng)前元素集合中每個(gè)元素的后代。只要符合，不管是兒子輩，孫子輩都可以

與其他的樹(shù)遍歷方法不同，選擇器表達(dá)式對(duì)于 .find() 是必需的參數(shù)。如果我們需要實(shí)現(xiàn)對(duì)所有后代元素的取回，可以傳遞通配選擇器 "*"

find只在后代中遍歷，不包括自己

選擇器 context 是由 .find() 方法實(shí)現(xiàn)的；因此，$(".item-ii").find("li") 等價(jià)于 $("li", ".item-ii")(找到類(lèi)名為item-ii的標(biāo)簽下的li標(biāo)簽)

注意重點(diǎn)
.find()和.children()方法是相似的

children只查找第一級(jí)的子節(jié)點(diǎn)

find查找范圍包括子節(jié)點(diǎn)的所有后代節(jié)點(diǎn)

jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的每一個(gè)元素的父元素（這里可以理解為就是父親-兒子的關(guān)系），此時(shí)可以用parent()方法；因?yàn)槭歉冈?，這個(gè)方法只會(huì)向上查找一級(jí)

節(jié)點(diǎn)查找關(guān)系

    

        
1
    

// 查找ul的父元素div, $(ul).parent()

parent()無(wú)參數(shù)

parent()方法允許我們能夠在DOM樹(shù)中搜索到這些元素的父級(jí)元素，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)parent是匹配合集中每一個(gè)元素的父元素

parent()方法選擇性地接受同一型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的每一個(gè)元素的所有祖輩元素，此時(shí)可以用parents()方法

其實(shí)也類(lèi)似find與children的區(qū)別，parent只會(huì)查找一級(jí)，parents則會(huì)往上一直查到查找到祖先節(jié)點(diǎn)

節(jié)點(diǎn)查找關(guān)系


    

        
1
    

// 在li節(jié)點(diǎn)上找到祖輩元素div，用$("li").parents()方法

parents()無(wú)參數(shù)
parents()方法允許我們能夠在DOM樹(shù)中搜索到這些元素的祖先元素，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象；返回的元素秩序是從離他們最近的父級(jí)元素開(kāi)始的

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)parent是匹配合集中所有元素的祖輩元素

parents()方法選擇性地接受同一型選擇器表達(dá)式
同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

注意事項(xiàng)

.parents()和.parent()方法是相似的，但后者只是進(jìn)行了一個(gè)單級(jí)的DOM樹(shù)查找

$( "html" ).parent()方法返回一個(gè)包含document的集合，而$( "html" ).parents()返回一個(gè)空集合。

以選定的元素為中心，往內(nèi)查找可以通過(guò)find、children方法。如果往上查找，也就是查找當(dāng)前元素的父輩祖輩元素，jQuery提供了closest()方法，這個(gè)方法類(lèi)似parents但是又有一些細(xì)微的區(qū)別，屬于使用頻率很高的方法

closest()方法接受一個(gè)匹配元素的選擇器字符串

從元素本身開(kāi)始，在DOM 樹(shù)上逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素

// 在div元素中，往上查找所有的li元素，可以這樣表達(dá)
$("div").closet("li")

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)closest是匹配合集中每一個(gè)元素的祖先元素

closest()方法給定的jQuery集合或元素來(lái)過(guò)濾元素

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)jQuery的對(duì)象

注意事項(xiàng)

起始位置不同：.closest開(kāi)始于當(dāng)前元素 .parents開(kāi)始于父元素

遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)，.parents遍歷到文檔根元素，closest向上查找，直到找到一個(gè)匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合

結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

jQuery是一個(gè)合集對(duì)象，如果想快速查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合，此時(shí)可以用next()方法

節(jié)點(diǎn)查找關(guān)系

//如下的class="item-2"就是class="item-1"的兄弟元素

    
1
    
2
    
3

next()無(wú)參數(shù)

允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象。

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)next匹配合集中每一個(gè)元素的下一個(gè)兄弟元素

next()方法選擇性地接受同一類(lèi)型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery是一個(gè)合集對(duì)象，如果想快速查找指定元素集合中每一個(gè)元素緊鄰的前面同輩元素的元素集合，此時(shí)可以用prev()方法

節(jié)點(diǎn)查找關(guān)系

如下的class="item-1"節(jié)點(diǎn)就是class="item-2"的li元素的prev兄弟節(jié)點(diǎn)

    
1
    
2
    
3

prev()無(wú)參數(shù)

取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)prev是匹配合集中每一個(gè)元素的上一個(gè)兄弟元素

prev()方法選擇性地接受同一類(lèi)型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery是一個(gè)合集對(duì)象，如果想快速查找指定元素集合中每一個(gè)元素的同輩元素，此時(shí)可以用siblings()方法

節(jié)點(diǎn)查找關(guān)系
如下是class="item-1"和class="item-3"就是class="item-2"的siblings兄弟節(jié)點(diǎn)

    
1
    
2
    
3

siblings()無(wú)參數(shù)

取得一個(gè)包含匹配的元素集合中每一個(gè)元素的同輩元素的元素集合

注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)siblings是匹配合集中每一個(gè)元素的同輩元素

siblings()方法選擇性地接受同一類(lèi)型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery是一個(gè)合集對(duì)象，通過(guò)$()方法找到指定的元素合集后可以進(jìn)行一系列的操作。$()之后就意味著這個(gè)合集對(duì)象已經(jīng)是確定的，如果后期需要再往這個(gè)合集中添加一新的元素要如何處理？jQuery為此提供add方法，用來(lái)創(chuàng)建一個(gè)新的jQuery對(duì)象 ，元素添加到匹配的元素集合中

.add()的參數(shù)可以幾乎接受任何的$()，包括一個(gè)jQuery選擇器表達(dá)式，DOM元素，或HTML片段引用

//操作：選擇所有的li元素，之后把p元素也加入到li的合集中

    
list item 1
    
list item 3

新的p元素

// 處理一：傳遞選擇器
$("li").add("p")
// 處理二：傳遞dom元素
$("li").add(document.getElementsByTagName("p")[0])
// 動(dòng)態(tài)創(chuàng)建P標(biāo)簽加入到合集，然后插入到指定的位置，但是這樣就改變?cè)氐谋旧淼呐帕辛? $("li").add("
新的p元素
").appendTo(目標(biāo)位置)

jQuery是一個(gè)合集對(duì)象，通過(guò)$()方法找到指定的元素合集后可以進(jìn)行一系列的操作

如操作$("li").css("") 給所有的li設(shè)置style值，因?yàn)閖Query是一個(gè)合集對(duì)象，所以css方法內(nèi)部就必須封裝一個(gè)遍歷的方法，被稱(chēng)為隱式迭代的過(guò)程。要一個(gè)一個(gè)給合集中每一個(gè)li設(shè)置顏色，這里方法就是each

.each() 方法就是一個(gè)for循環(huán)的迭代器，它會(huì)迭代jQuery對(duì)象合集中的每一個(gè)DOM元素。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開(kāi)始計(jì)數(shù))

三個(gè)重點(diǎn)

each是一個(gè)for循環(huán)的包裝迭代器

each通過(guò)回調(diào)的方式處理，并且會(huì)有2個(gè)固定的實(shí)參，索引與元素

each回調(diào)方法中的this指向當(dāng)前迭代的dom元素

實(shí)例：

    
克利夫蘭騎士
    
LeBorn James

開(kāi)始迭代li，循環(huán)2次
$("li").each(function(index, element) {
     index 索引 0,1
     element是對(duì)應(yīng)的li節(jié)點(diǎn) li,li
     this 指向的是li
})

    
    
    
    



    
each方法
    

        

            

                
list item 1
                
list item 2
                
list item 3
            
        
        

            

                
list item 4
                
list item 5
                
list item 6
            
        
    

    

    點(diǎn)擊：each方法遍歷元素
    點(diǎn)擊：each方法回調(diào)判斷