jQuery常見的遍歷DOM操作詳解
本文實(shí)例總結(jié)了jQuery常見的遍歷DOM操作。分享給大家供大家參考,具體如下:
向上遍歷DOM樹
- .parent():返回被選元素的直接父元素,該方法只會(huì)向上一級(jí)對(duì)DOM樹進(jìn)行遍歷
- .parents():返回被選元素的所有祖先元素,一直向上遍歷,直到文檔的根元素(html)
- .parentsUntil():返回介于兩個(gè)給定元素之間的所有祖先元素
<!DOCTYPE html> <html> <head> <style> .ancestors *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script > $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <div style="width:500;">div(曾祖父) <ul>ul(祖父) <li>li(直接父) <span>span</span> </li> </ul> </div> <div style="width:500px;">div(祖父) <p>p(直接父) <span>span</span> </p> </div> </div> </body> </html>
運(yùn)行結(jié)果:
parentsUntil()
方法
$(document).ready(function(){ $("span").parentsUntil("div"); });
<!DOCTYPE html> <html> <head> <style> .ancestors *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body(增曾祖父) <div style="width:500px;">div(曾祖父) <ul>ul(祖父) <li>li(直接父) <span>span</span> </li> </ul> </div> </body> </html>
運(yùn)行結(jié)果:
向下遍歷DOM樹
- .children():返回被選元素的所有直接子元素,該方法只會(huì)向下一級(jí)對(duì)DOM樹進(jìn)行遍歷
- .find():返回被選元素的后代元素,一直向下直到最后一個(gè)后代
children()
方法
<!DOCTYPE html> <html> <head> <style> .descendants *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); $("div").children("p.1").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div(當(dāng)前元素) <p class="1">p(子) <span>span(孫)</span> </p> <p class="2">p(子) <span>span(孫)</span> </p> </div> </body> </html>
運(yùn)行結(jié)果:
find()
方法
<!DOCTYPE html> <html> <head> <style> .descendants *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div(current element) <p>P子 <span>span(孫)</span> </p> <p>p子 <span>span(孫)</span> </p> </div> </body> </html>
運(yùn)行結(jié)果:
返回<div>
所有后代
$(document).ready(function(){ $("div").find("*"); });
水平遍歷DOM樹
- .siblings():返回被選元素的所有同胞
- .next():返回被選元素下一個(gè)同胞元素
- .nextAll():返回被選元素的所有跟隨的同胞元素
- .nextUntil():返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素
- .prev():返回被選元素上一個(gè)同胞元素
- .prevAll():返回被選元素的所有之前的同胞元素
- .prevUntil():返回介于兩個(gè)給定參數(shù)之間的所有之前的同胞元素
<!DOCTYPE html> <html> <head> <style> .siblings *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div(父) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
運(yùn)行結(jié)果:
jQuery遍歷 過(guò)濾
- first()方法:返回被選元素的首個(gè)元素
- last()方法:返回被選元素的最后一個(gè)元素
- eq()方法:返回被選元素中帶有指定索引號(hào)的元素
- filter()方法:允許自己規(guī)定一個(gè)標(biāo)準(zhǔn),不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除,匹配的元素會(huì)被返回。
- not()方法:返回不匹配的所有元素
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div p").first().css("background-color","yellow"); }); </script> </head> <body> <h1>我心在北朝、</h1> <div> <p>田野上</p> </div> <div> <p>紅彤彤的野花</p> </div> <p>玲瓏剔透</p> </body> </html>
運(yùn)行結(jié)果:
eq()
方法的使用
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").eq(1).css("background-color","yellow"); }); </script> </head> <body> <h1>我心在南朝、</h1> <p>田野上</p> <p>紅彤彤的野花</p> <p>玲瓏剔透</p> <p>我愛你</p> </body> </html>
運(yùn)行結(jié)果:
filter()
方法的使用
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","yellow"); }); </script> </head> <body> <h1>我心在南朝、</p> <p>田野上</p> <p class="intro">紅彤彤的草莓</p> <p class="intro">玲玲剔透</p> <p>我愛你</p> </body> </html>
運(yùn)行結(jié)果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題:《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
- jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
- 舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷
- jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié)
- jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- JQuery遍歷DOM節(jié)點(diǎn)的方法
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
相關(guān)文章
JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能
JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能...2007-03-03jQuery)擴(kuò)展jQuery系列之一 模擬alert,confirm(一)
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi),都選擇了去封裝一個(gè)屬于自己的alert組件,現(xiàn)在我們就動(dòng)手實(shí)現(xiàn)一個(gè)這樣的小部件。2010-12-12Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery ajax實(shí)現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery實(shí)現(xiàn)的模擬彈出窗口功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的模擬彈出窗口功能,結(jié)合實(shí)例形式分析了jQuery彈出窗口的初始化、坐標(biāo)、背景設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2016-11-11jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法
下面小編就為大家分享一篇jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)購(gòu)物車出現(xiàn)下拉框代碼(推薦)
在做web前端項(xiàng)目開發(fā)的時(shí)候,使用jquery庫(kù)的感觸頗多,下面小編通過(guò)寫購(gòu)物車的下拉框做法,把我的想法給大家分享一下,感興趣的朋友可以參考下2016-07-07