jquery對DOM的遍歷,實用且高效!

2021-07-13 08:49:35 字數 1015 閱讀 2436

其實web前端有了jquery之後,輕鬆了許多,功能也豐富了許多。

祖先!所謂祖先也就是某個元素的所有上級元素!

結合例子來說最基本的遍歷祖先的操作!

$("p").parent(),獲取p元素的父元素!不包擴他的爺爺及以上的輩分!

$("p").parents(),獲取p元素的所有的長輩!對於這個方法我們就可以進行一定的過濾。比如$("span").parents("ul"),至獲取長輩中的ul元素。

$("p").parentsuntil("div")獲取p往上到div之間的所有元素,不包括p 和 div元素。

子代!$("div").children();獲取該div下的直接子元素,也就是下一代。他的兒子!不包括孫子。

$("div").children("p.demo")獲取兒子中的class為demo的p元素。

$("div").find("*"),獲取所有的子背!

$(「div」).find("span");獲取子背中的所有span元素

同胞!siblings() 獲取所有的同胞

siblings("p")獲取所有同胞中的p元素

next() 獲取下乙個元素

nextall() 獲取下面的所有同胞

nextutil(「h3」) 獲取下乙個元素,知道h3元素,不包括h3

prev()

prevall()

prevutil()與上面的相反

過濾!!!!

下面來說一下我們經常會用到過濾器!

$("p").first()返回第乙個p元素 等同於 $("p:first")

$("p").last()得到最後乙個p元素 等同於$("p:last")

$("p").eq(index)得到下表為index的p元素 $("p:eq('index')")

$("p").filter(".class");得到css類為class的p元素

$("p").not(".class");得到css類不是class的p元素 等價與 $("p:not('.class')")

Jquery之DOM節點遍歷

html dom 是將乙個html文件當做樹結構,樹有根枝葉,html文件也有根枝葉,這些根枝葉,都可以叫做乙個個的節點,即dom節點 要對html進行操作,也就是對html 的dom節點進行操作,要操作,首先就是要找到進行操作的節點,其中一種方法就是用jquery的選擇器 基本選擇器,層次選擇器,...

jQuery遍歷DOM樹方法

一 next 取得匹配的元素集合中每乙個元素緊鄰的後面同輩元素的元素集合。如果提供乙個選擇器,那麼只有緊跟著的兄弟元素滿足選擇器時,才會返回此元素。二 prev 取得乙個包含匹配的元素集合中每乙個元素緊鄰的前乙個同輩元素的元素集合。選擇性篩選的選擇器。next 與.prev 用法基本一致,只是前者是...

jQuery之dom操作 遍歷節點

jquery之dom操作 遍歷節點 children children selector 只考慮子元素,不考慮其他後代元素 next next selector 下乙個兄弟節點 prev prev selector 上乙個兄弟節點 siblings siblings selector 其他兄弟節點 ...