var $body = $("body").children(); 
var $p = $("p").children(); 
var $ul = $("ul").children(); 
alert( $body.length ); // <body>元素下有2個(gè)子元素 
alert( $p.length );  // <p>元素下有0個(gè)子元素 
alert( $ul.length ); // <p>元素下有3個(gè)子元素 
for(var i=0;i< $ul.length;i++){ 
  alert( $ul[i].innerHTML ); 
}

PS：children()方法只考慮子元素而不考慮任何后代元素。

next()方法

該方法用于取得匹配元素后面緊鄰的同輩元素。從DOM樹(shù)的結(jié)構(gòu)中可以知道p元素的下一個(gè)同輩節(jié)點(diǎn)是ul，因此可以通過(guò)next()方法來(lái)獲取ul元素，代碼如下：

var $p1 = $("p").next();
// 緊鄰p元素后的同輩元素

prev()方法

該方法用于取得匹配元素前面緊鄰的同輩元素。從DOM樹(shù)的結(jié)構(gòu)中可以知道ul元素的上一個(gè)同輩節(jié)點(diǎn)是p，因此可以通過(guò)prev()方法來(lái)獲取p元素，代碼如下：

var $ul = $("ul").prev();
// 緊鄰ul元素前的同輩元素

siblings()方法

該方法用于取得匹配元素前后所有的同輩元素。以DOM樹(shù)的結(jié)構(gòu)為例。ul元素和p元素互為同輩元素，ul元素下的3個(gè)li元素也互為同輩元素。

如果要獲取p元素的同輩元素，則可以使用如下代碼：

var $p2 = $("p").siblings();
// 緊鄰p元素的唯一同輩元素

closest()方法

它用來(lái)取得最近的匹配元素。首先檢查當(dāng)前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，逐級(jí)向上直到找到匹配選擇器的元素。如果什么都沒(méi)找到則返回一個(gè)空的JQuery對(duì)象。

比如，給點(diǎn)擊的目標(biāo)元素的最近的li元素添加顏色，可以使用如下代碼：

$(document).bind("click", function (e) { 
 $(e.target).closest("li").css("color","red"); 
})

除此之外，在JQuery中還有很多遍歷節(jié)點(diǎn)的方法，例如find()、filter()、nextAll()、prevAIl()、parent()和parents()等，此處不再贅述，讀者可以查看附錄的JQuery速查表文檔。值得注意的是，這些遍歷DOM方法有一個(gè)共同點(diǎn)，都可以使用JQuery表達(dá)式作為它們的參數(shù)來(lái)篩選元素。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

JQuery
DOM

相關(guān)文章

JQuery autocomplete 使用手冊(cè)
Jquery autocomplete是一個(gè)很強(qiáng)大的類(lèi)似google suggest的自動(dòng)提示插件。它幾乎可以滿(mǎn)足我們所有的需要。
2010-04-04
jQuery插件Echarts實(shí)現(xiàn)的漸變色柱狀圖
本文主要介紹了jQuery插件Echarts實(shí)現(xiàn)漸變色柱狀圖的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
jquery插件treegrid樹(shù)狀表格的使用方法詳解（.Net平臺(tái)）
本文主要介紹了jquery插件treegrid樹(shù)狀表格的使用方法，具有一定的參考作用，下面跟著小編一起來(lái)看下吧
2017-01-01
jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解
這篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)多種類(lèi)型的導(dǎo)航條制作實(shí)例詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
這篇文章主要介紹了JQuery的ready函數(shù)與JS的onload的區(qū)別，有需要的朋友可以參考一下
2013-11-11
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實(shí)際主要是利用了css的li a屬性，對(duì)于以后用css制作更絢麗的效果提高了很好的參考。
2010-08-08
jQuery TextBox自動(dòng)完成條
剛開(kāi)始學(xué)jQuery，于是想試試學(xué)習(xí)效果，所以就做了個(gè)這個(gè)TextBox自動(dòng)完成條，練習(xí)練習(xí)。請(qǐng)牛人們別笑話。
2009-07-07
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行上移下移和置頂?shù)姆椒?涉及jQuery操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05