JQuery遍歷DOM節(jié)點的方法
本文實例講述了JQuery遍歷DOM節(jié)點的方法。分享給大家供大家參考。具體分析如下:
本節(jié)的核心是介紹JQuery的DOM操作,前面介紹了很多創(chuàng)建、刪除、替換等等節(jié)點操作。這里介紹如何遍歷節(jié)點,選中臨近節(jié)點等的一些方法。
children()方法
該方法用于取得匹配元素的子元素集合。根據(jù)DOM樹的結(jié)構(gòu),可以知道各個元素之間的關(guān)系以及它們子節(jié)點的個數(shù)。
下面使用children()方法來獲取匹配元素的所有子元素的個數(shù)。
var $body = $("body").children(); var $p = $("p").children(); var $ul = $("ul").children(); alert( $body.length ); // <body>元素下有2個子元素 alert( $p.length ); // <p>元素下有0個子元素 alert( $ul.length ); // <p>元素下有3個子元素 for(var i=0;i< $ul.length;i++){ alert( $ul[i].innerHTML ); }
PS:children()方法只考慮子元素而不考慮任何后代元素。
next()方法
該方法用于取得匹配元素后面緊鄰的同輩元素。從DOM樹的結(jié)構(gòu)中可以知道p元素的下一個同輩節(jié)點是ul,因此可以通過next()方法來獲取ul元素,代碼如下:
var $p1 = $("p").next(); // 緊鄰p元素后的同輩元素
prev()方法
該方法用于取得匹配元素前面緊鄰的同輩元素。從DOM樹的結(jié)構(gòu)中可以知道ul元素的上一個同輩節(jié)點是p,因此可以通過prev()方法來獲取p元素,代碼如下:
var $ul = $("ul").prev(); // 緊鄰ul元素前的同輩元素
siblings()方法
該方法用于取得匹配元素前后所有的同輩元素。以DOM樹的結(jié)構(gòu)為例。ul元素和p元素互為同輩元素,ul元素下的3個li元素也互為同輩元素。
如果要獲取p元素的同輩元素,則可以使用如下代碼:
var $p2 = $("p").siblings(); // 緊鄰p元素的唯一同輩元素
closest()方法
它用來取得最近的匹配元素。首先檢查當(dāng)前元素是否匹配,如果匹配則直接返回元素本身。如果不匹配則向上查找父元素,逐級向上直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的JQuery對象。
比如,給點擊的目標(biāo)元素的最近的li元素添加顏色,可以使用如下代碼:
$(document).bind("click", function (e) { $(e.target).closest("li").css("color","red"); })
除此之外,在JQuery中還有很多遍歷節(jié)點的方法,例如find()、filter()、nextAll()、prevAIl()、parent()和parents()等,此處不再贅述,讀者可以查看附錄的JQuery速查表文檔。值得注意的是,這些遍歷DOM方法有一個共同點,都可以使用JQuery表達(dá)式作為它們的參數(shù)來篩選元素。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jQuery利用DOM遍歷實現(xiàn)商城結(jié)算系統(tǒng)實戰(zhàn)
- jQuery常見的遍歷DOM操作詳解
- jQuery DOM節(jié)點的遍歷方法小結(jié)
- 舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷
- jQuery遍歷DOM的父級元素、子級元素和同級元素的方法總結(jié)
- jQuery遍歷DOM元素與節(jié)點方法詳解
- jQuery遍歷DOM節(jié)點操作之filter()方法詳解
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
相關(guān)文章
jQuery插件Echarts實現(xiàn)的漸變色柱狀圖
本文主要介紹了jQuery插件Echarts實現(xiàn)漸變色柱狀圖的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03jquery插件treegrid樹狀表格的使用方法詳解(.Net平臺)
本文主要介紹了jquery插件treegrid樹狀表格的使用方法,具有一定的參考作用,下面跟著小編一起來看下吧2017-01-01jQuery+CSS3實現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實例詳解
這篇文章主要介紹了jQuery+CSS3實現(xiàn)多種類型的導(dǎo)航條制作實例詳解的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
這篇文章主要介紹了JQuery的ready函數(shù)與JS的onload的區(qū)別,有需要的朋友可以參考一下2013-11-11純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單,實際主要是利用了css的li a屬性,對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08