Jquery遍歷之獲取子級元素、同級元素和父級元素
Jquery的遍歷,其實就當前位置的元素相對於其他元素的位置的關系進行查找或選取HTML元素。以某項選擇開始,並沿着這條線進行移動,或向上(父級)、或向下(子級)、或水平(同級),直到找到目標元素為止,這種移動也被成為對DOM進行遍歷。
其實對於DOM來說,這個不陌生,Jquery的遍歷也就是在DOM樹上上躥下跳,當然這種上躥下跳不是沒有規則的,胡亂的找是讓人鄙視的。通俗的說,在一顆樹上(你也在樹上,已經爬上去了,哈哈),以你所在的位置為起點,以樹上有個桃子為目的地,你的這個起點也就是當前 this ,去移動去摘桃子的過程就是Jquery遍歷,所以相對應的Jquery所衍生出的遍歷方法可以分為三大類,即Jquery遍歷之父級(祖先)、同級(同胞)和子級(后代)三種。
Jquery遍歷之父級
parent() 返回當前被選元素的直接父元素;
parents() 返回當前被選元素的所有父元素,直到文檔的根部即<html>處為止;
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,起碼讓我在這個泥潭中陷入的時間短暫一點,對於我一個剛剛出道的年輕人(好像不怎么年輕了),迷茫、無知、恐懼總是伴隨,只有不斷的學習才能讓我短暫的得到安全感。
說的有點多了,就這樣吧,以后的日子還長着呢。希望得到各位的鼓勵,謝謝!!!
