本文實例講述了JQuery遍歷DOM節點的方法。分享給大家供大家參考。具體分析如下：

本節的核心是介紹JQuery的DOM操作，前面介紹了很多創建、刪除、替換等等節點操作。這里介紹如何遍歷節點，選中臨近節點等的一些方法。

children()方法

該方法用于取得匹配元素的子元素集合。根據DOM樹的結構，可以知道各個元素之間的關系以及它們子節點的個數。

下面使用children()方法來獲取匹配元素的所有子元素的個數。

var $body = $("body").children();

var $p = $("p").children();

var $ul = $("ul").children();

alert( $body.length ); //

元素下有2個子元素

alert( $p.length ); //

元素下有0個子元素

alert( $ul.length ); //

元素下有3個子元素

for(var i=0;i< $ul.length;i++){

alert( $ul[i].innerHTML );

}

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

next()方法

該方法用于取得匹配元素后面緊鄰的同輩元素。從DOM樹的結構中可以知道p元素的下一個同輩節點是ul，因此可以通過next()方法來獲取ul元素，代碼如下：

var $p1 = $("p").next();

// 緊鄰p元素后的同輩元素

prev()方法

該方法用于取得匹配元素前面緊鄰的同輩元素。從DOM樹的結構中可以知道ul元素的上一個同輩節點是p，因此可以通過prev()方法來獲取p元素，代碼如下：

var $ul = $("ul").prev();

// 緊鄰ul元素前的同輩元素

siblings()方法

該方法用于取得匹配元素前后所有的同輩元素。以DOM樹的結構為例。ul元素和p元素互為同輩元素，ul元素下的3個li元素也互為同輩元素。

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

var $p2 = $("p").siblings();

// 緊鄰p元素的唯一同輩元素

closest()方法

它用來取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的JQuery對象。

比如，給點擊的目標元素的最近的li元素添加顏色，可以使用如下代碼：

$(document).bind("click", function (e) {

$(e.target).closest("li").css("color","red");

})

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

希望本文所述對大家的jQuery程序設計有所幫助。

總結

以上是生活随笔為你收集整理的遍历同辈节电的方法_JQuery遍历DOM节点的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。