jQuery closest()和parent()、parentes()之间的区别
在這個(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ì)象。
?
<!DOCTYPE html> <html lang="en"> <head><title>a test document</title><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript">//$('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ì)象。 function aa(){var b1 = $('b').parents();alert(b1.length);}function bb(){var b2 = $('b').parent();alert(b2.length);}function cc(){var b3 = $('b').closest('div');alert(b3.length);}</script> </head> <body><div><p><span><b>My parents</b></span></p></div><span><b>My parents</b></span><br/><input type="button" value="parents()" onclick="aa();"><br/><input type="button" value="parent()" onclick="bb();"><br/><input type="button" value="closest('div')" onclick="cc();"><br/> </body> </html>?
在上述文檔中：
$('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ì)象。
?
轉(zhuǎn)載于:https://www.cnblogs.com/peston/articles/3281003.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的jQuery closest()和parent()、parentes()之间的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery源码分析系列
- 下一篇： 用shell脚本监控进程是否存在 不存在