在這個(gè)sprint中,因?yàn)橐獙懬岸薝I,所以用到了jQuery,但是jQuery在向上遍歷DOM樹的API中,有parents()、 parent()、closest()這幾個(gè),一直不太清楚它們具體的區(qū)別,所以狠下心好好讀了一下jQuery的API文檔,并把區(qū)別記在這里,以供參考。
1.parents([selector])
本方法用于選擇給定jQuery對(duì)象中包含的DOM元素或者DOM元素集的祖先節(jié)點(diǎn),并將這些節(jié)點(diǎn)包裝成jQuery對(duì)象返回,返回的節(jié)點(diǎn)集是以從里到外的順序排序的。
同時(shí),本方法還接受一個(gè)字符串選擇器,用于從返回的節(jié)點(diǎn)集中篩選符合選擇器的子元素集。
2.parent([selector])
本方法用于選擇給定jQuery對(duì)象中包含的DOM元素或者DOM元素集的父節(jié)點(diǎn)。它和parents()不同的是,它只向上搜索一層,而parents()會(huì)搜索整個(gè)DOM樹。
本方法也可以接受一個(gè)字符串選擇器,用于篩選返回的元素。
有人可能會(huì)問:一個(gè)DOM元素的父元素不是只有一個(gè)么,為什么還要一個(gè)selector選擇器進(jìn)行篩選呢?其實(shí)一個(gè)jQuery對(duì)象可能包含有很多個(gè)DOM元素,例如$('a').parent()就是選擇所有<a>標(biāo)簽的父元素,這樣返回的就是一個(gè)元素集,所以可以進(jìn)行篩選。
3.closest(selector)
本方法用于向上遍歷jQuery對(duì)象中包含的DOM元素或者DOM元素集的祖先節(jié)點(diǎn),直到找到符合selector選擇器的節(jié)點(diǎn)為止。
它和parents()的區(qū)別:
closest()從自身開始向上遍歷,直到找到一個(gè)適合的節(jié)點(diǎn),返回的jQuery對(duì)象包含0個(gè)或者1個(gè)對(duì)象;
parents()從自身的父節(jié)點(diǎn)開始向上遍歷,返回所有祖先節(jié)點(diǎn),并根據(jù)選擇器對(duì)這些節(jié)點(diǎn)進(jìn)行篩選,最終返回的jQuery對(duì)象可能包含0、1或者多個(gè)對(duì)象。
一個(gè)能說明區(qū)別的例子:
$('b').parents()將返回:由span、p、div、body、html等元素構(gòu)造的jQuery對(duì)象;
$('b').parent()將返回:由span構(gòu)造的jQuery對(duì)象;
$('b').closest('div')將返回:由div構(gòu)造的jQuery對(duì)象。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注