Jquery遍歷之獲取子級元素 同級元素和父級元素

2022-01-12 15:12:23 字數 2114 閱讀 2860

jquery的遍歷,其實就當前位置的元素相對於其他元素的位置的關係進行查詢或選取html元素。以某項選擇開始,並沿著這條線進行移動,或向上(父級)、或向下(子級)、或水平(同級),直到找到目標元素為止,這種移動也被成為對dom進行遍歷。

其實對於dom來說,這個不陌生,jquery的遍歷也就是在dom樹上上躥下跳,當然這種上躥下跳不是沒有規則的,胡亂的找是讓人鄙視的。通俗的說,在一顆樹上(你也在樹上,已經爬上去了,哈哈),以你所在的位置為起點,以樹上有個桃子為目的地,你的這個起點也就是當前this,去移動去摘桃子的過程就是jquery遍歷,所以相對應的jquery所衍生出的遍歷方法可以分為三大類,即jquery遍歷之父級(祖先)、同級(同胞)和子級(後代)三種。

jquery遍歷之父級

parent()返回當前被選元素的直接父元素;

parents()返回當前被選元素的所有父元素,直到文件的根部即處為止;

parentsuntil()返回介於兩個元素之間的所有當前元素的祖先元素;$("#id1").parentsuntil("#id5") 若這個id5是id1的父級元素,則此方法放回的是id1向上遍歷到id5的所有元素。

jquery遍歷之同級

有許多方法讓我們可以在dom樹上進行水平遍歷。下面進行簡單介紹,主要還是要實戰操作。

siblings()返回被選元素的所有同胞(同級)元素;

////向下(next)

next()返回被選元素的下乙個同胞元素;

nextall()返回被選元素的所有跟隨的同胞元素,即當前元素以下的所有同胞元素;

nextuntil()返回介於兩個給定引數之間的所有跟隨的同胞元素.

////向上(prev)

prev()返回被選元素的下乙個同胞元素;

prevall()返回被選元素的所有跟隨的同胞元素,即當前元素以下的所有同胞元素;

prevuntil()返回介於兩個給定引數之間的所有跟隨的同胞元素.

jquery遍歷之子級

children()返回被選元素的直接子元素,就是真正的兒子,不往孫子重孫那邊去。

find()返回被選元素的後代元素,一路向下直到最後乙個後代。

jquery遍歷each()方法

最後也是最為常用常見的方法,jquery的each()方法,一般情況下我們遍歷出來的是乙個陣列,通過遍歷這個陣列獲得目的元素並對其修改,each()方法最好不過了。

each() 方法規定為每個匹配元素規定執行的函式。

提示:返回 false 可用於及早停止迴圈。

語法$(selector).each(function(index,element))

引數:index - 選擇器的 index 位置

element - 當前的元素(也可使用 "this" 選擇器)

結束語:

很長很長的時間我對於dom的理解模模糊糊,感覺抓住了點東西又感覺什麼也沒有學到,理論與實踐總是有差別的,通過幾個專案的實踐,對於概念的理解更加透徹,只有實踐才能讓理論的理解更加成熟,相輔相成。很多的時間花費在了頁面這一塊上,介面的處理,介面資料的處理讓我深深的陷入了這個泥潭,去年花了很長的時間狠狠的學習了一遍資料庫知識,去年下半年花了點時間再次回顧js/jquery,起碼讓我在這個泥潭中陷入的時間短暫一點,對於我乙個剛剛出道的年輕人(好像不怎麼年輕了),迷茫、無知、恐懼總是伴隨,只有不斷的學習才能讓我短暫的得到安全感。

說的有點多了,就這樣吧,以後的日子還長著呢。希望得到各位的鼓勵,謝謝!!!

jQuery如何獲取子元素

jquery獲取子元素的方式有兩種 find 和children 但二者有差異,下面看看二者的差異 1.children 方法 獲取該元素下的直接子集元素 2.find 方法 獲取該元素下的所有子集元素 list2 list3 3 children 方法獲取最外層ul下面直接子集元素li ul ch...

jquery獲取節點的兄弟,父級,子級元素的方法

獲取兄弟,父級,自己元素是經常用到的,尤其在遍歷的時候,會經常用到。1.獲取父級元素parent jquery.parent 這樣能獲得父節點,也也可使用jquery.parent expr 進行過濾,比如jquery.parent class 2.獲取所有父元素parents jquery.par...

jquery獲取父級元素 同級元素以及子元素的方法

有檔案的結構如下 123 4 5 6781.獲取父級元素 parent 獲取td2節點的父節點即tr1,並將背景顏色的樣式改為黑色 td2 parent css background color black 另外 parent document 方法取得乙個包含著所有匹配元素的唯一父元素的元素集合。...