jQuery--遍歷操作例項小結【後代、同胞及過濾】
本文例項講述了jQuery--遍歷操作。分享給大家供大家參考,具體如下:
jQuery--遍歷【後代】
向下遍歷 DOM 樹
下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法:
- children()
- find()
children() 方法
返回每個 <div> 元素的所有直接子元素:
$(document).ready(function(){ $("div").children(); });
返回類名為 "1" 的所有 <p> 元素,並且它們是 <div> 的直接子元素:
$(document).ready(function(){ $("div").children("p.1"); });
find() 方法
返回屬於 <div> 後代的所有 <span> 元素:
$(document).ready(function(){ $("div").find("span"); });
返回 <div> 的所有後代:
$(document).ready(function(){ $("div").find("*"); });
jquery--遍歷【同胞】
在 DOM 樹進行水平遍歷:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
siblings() 方法
返回 <h2> 的所有同胞元素:
$(document).ready(function(){ $("h2").siblings(); });
返回屬於 <h2> 的同胞元素的所有 <p> 元素:
$(document).ready(function(){ $("h2").siblings("p"); });
next() 方法
返回 <h2> 的下一個同胞元素:
$(document).ready(function(){ $("h2").next(); });
nextAll() 方法
返回 <h2> 的所有跟隨的同胞元素:
$(document).ready(function(){ $("h2").nextAll(); });
nextUntil() 方法
返回介於 <h2> 與 <h6> 元素之間的所有同胞元素:
$(document).ready(function(){ $("h2").nextUntil("h6"); });
prev(),prevAll() & prevUntil() 方法
prev(),prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元素(在 DOM 樹中沿著同胞之前元素遍歷,而不是之後元素遍歷)
jQuery--遍歷【過濾】
縮小搜尋元素的範圍
三個最基本的過濾方法是:first(),last() 和 eq(),它們允許您基於其在一組元素中的位置來選擇一個特定的元素。
其他過濾方法,比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
first() 方法
選取首個 <div> 元素內部的第一個 <p> 元素:
$(document).ready(function(){ $("div p").first(); });
last() 方法
選擇最後一個 <div> 元素中的最後一個 <p> 元素:
$(document).ready(function(){ $("div p").last(); });
eq() 方法
索引號從 0 開始,因此首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素(索引號 1):
$(document).ready(function(){ $("p").eq(1); });
filter() 方法
返回帶有類名 "url" 的所有 <p> 元素:
$(document).ready(function(){ $("p").filter(".url"); }); $("p.url").css("background-color","yellow"); //效果相同
not() 方法
not() 方法返回不匹配標準的所有元素。
提示:not() 方法與 filter() 相反。
下面的例子返回不帶有類名 "url" 的所有 <p> 元素:
$(document).ready(function(){ $("p").not(".url"); });
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於jQuery相關內容還可檢視本站專題:《jQuery遍歷演算法與技巧總結》、《jQuery操作DOM節點方法總結》、《jQuery擴充套件技巧總結》、《jquery選擇器用法總結》及《jQuery常用外掛及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。