在這個sprint中，因為要寫前端UI，所以用到了jQuery，但是jQuery在向上遍歷DOM樹的API中，有parents()、 parent()、closest()這幾個，一直不太清楚它們具體的區(qū)別，所以狠下心好好讀了一下jQuery的API文檔，并把區(qū)別記在這里，以供參考。

 1.parents([selector])

本方法用于選擇給定jQuery對象中包含的DOM元素或者DOM元素集的祖先節(jié)點，并將這些節(jié)點包裝成jQuery對象返回，返回的節(jié)點集是以從里到外的順序排序的。

同時，本方法還接受一個字符串選擇器，用于從返回的節(jié)點集中篩選符合選擇器的子元素集。

 2.parent([selector])

本方法用于選擇給定jQuery對象中包含的DOM元素或者DOM元素集的父節(jié)點。它和parents()不同的是，它只向上搜索一層，而parents()會搜索整個DOM樹。

本方法也可以接受一個字符串選擇器，用于篩選返回的元素。

有人可能會問：一個DOM元素的父元素不是只有一個么，為什么還要一個selector選擇器進行篩選呢？其實一個jQuery對象可能包含有很多個DOM元素，例如$('a').parent()就是選擇所有<a>標簽的父元素，這樣返回的就是一個元素集，所以可以進行篩選。

 3.closest(selector)

本方法用于向上遍歷jQuery對象中包含的DOM元素或者DOM元素集的祖先節(jié)點，直到找到符合selector選擇器的節(jié)點為止。

它和parents()的區(qū)別：

closest()從自身開始向上遍歷，直到找到一個適合的節(jié)點，返回的jQuery對象包含0個或者1個對象；

parents()從自身的父節(jié)點開始向上遍歷，返回所有祖先節(jié)點，并根據(jù)選擇器對這些節(jié)點進行篩選，最終返回的jQuery對象可能包含0、1或者多個對象。

 一個能說明區(qū)別的例子：

$('b').parents()將返回：由span、p、div、body、html等元素構造的jQuery對象；

$('b').parent()將返回：由span構造的jQuery對象；

$('b').closest('div')將返回：由div構造的jQuery對象。

最新評論