快捷導(dǎo)航

Jquery遍歷節(jié)點(diǎn)的方法小集

更新時(shí)間：2014年01月22日 17:35:36 投稿：whsnow

Jquery遍歷節(jié)點(diǎn)的方法有next、nextAll、prev、prevAll、siblings等等，大家可以根據(jù)自己的需求自由選擇

本文給大家?guī)鞶uery遍歷方法的總結(jié),需要的朋友可以參考下，希望能幫助到大家。下面跟隨小編一起來看一下吧。
函數(shù) 描述

.add() 將元素添加到匹配元素的集合中。
.andSelf() 把堆棧中之前的元素集添加到當(dāng)前集合中。
.children() 獲得匹配元素集合中每個(gè)元素的所有子元素。
.closest() 從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。
.contents() 獲得匹配元素集合中每個(gè)元素的子元素，包括文本和注釋節(jié)點(diǎn)。
.each() 對 jQuery 對象進(jìn)行迭代，為每個(gè)匹配元素執(zhí)行函數(shù)。
.end() 結(jié)束當(dāng)前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態(tài)。
.eq() 將匹配元素集合縮減為位于指定索引的新元素。
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。
.find() 獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，由選擇器進(jìn)行篩選。
.first() 將匹配元素集合縮減為集合中的第一個(gè)元素。
.has() 將匹配元素集合縮減為包含特定元素的后代的集合。
.is() 根據(jù)選擇器檢查當(dāng)前匹配元素集合，如果存在至少一個(gè)匹配元素，則返回 true。
.last() 將匹配元素集合縮減為集合中的最后一個(gè)元素。
.map() 把當(dāng)前匹配集合中的每個(gè)元素傳遞給函數(shù)，產(chǎn)生包含返回值的新 jQuery 對象。
.next() 獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。
.nextAll() 獲得匹配元素集合中每個(gè)元素之后的所有同輩元素，由選擇器進(jìn)行篩選（可選）。
.nextUntil() 獲得每個(gè)元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。
.not() 從匹配元素集合中刪除元素。
.offsetParent() 獲得用于定位的第一個(gè)父元素。
.parent() 獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素，由選擇器篩選（可選）。
.parents() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，由選擇器篩選（可選）。
.parentsUntil() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，直到遇到匹配選擇器的元素為止。
.prev() 獲得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素，由選擇器篩選（可選）。
.prevAll() 獲得匹配元素集合中每個(gè)元素之前的所有同輩元素，由選擇器進(jìn)行篩選（可選）。
.prevUntil() 獲得每個(gè)元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。
.siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
.slice() 將匹配元素集合縮減為指定范圍的子集。

測試代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=GBK"> 
<link rel="stylesheet" type="text/css" href="table.css"> 
<title></title> 
<script src="../jquery-1.7.2.js" type="text/javascript"></script> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
$(function() 
{ 
//next()查找下一個(gè)緊鄰的節(jié)點(diǎn)next("#x")查找下一個(gè)緊鄰的id為x的節(jié)點(diǎn) 
$("#d4").next().css("background-color","red"); 
//nextAll()之后的所有節(jié)點(diǎn).之后的所有的div標(biāo)簽nextAll("div") 
$("#d4").nextAll().css("background-color","red"); 
//之前的緊鄰節(jié)點(diǎn) 
$("#d4").prev().css("background-color","red"); 
//之前的所有節(jié)點(diǎn) 
$("#d4").prevAll().css("background-color","red"); 
//查找所有的兄弟節(jié)點(diǎn) 
$("#d4").siblings().css("background-color","red"); 
//查找本節(jié)點(diǎn)和本節(jié)點(diǎn)之后的節(jié)點(diǎn),end()返回上一次jQuery對象被破壞之前的狀態(tài) 
$("#d4").nextAll().css("background-color","red").end().css("background-color","red"); 
$("#d4").nextAll().andSelf().css("background-color","red"); 
$("#d4").nextAll().andSelf().end().css("background-color","red"); 
}); 
</script> 
</head> 
<body> 
<div>11111111</div> 
<div>22222222</div> 
<div>33333333</div> 
<div id="d4">44444444</div> 
<p>55555555</p> 
<div>66666666</div> 
<div>77777777</div> 
<div>88888888</div> 
<div>99999999</div> 
</body> 
</html>

大家可以測試一下，對學(xué)習(xí)很有幫助。

您可能感興趣的文章: