[Bài 6]: Jquery traversing – phương pháp di chuyển trong DOM
Updated on May 25, 2016
Jquery traversing là gì?
Jquery traversing có nghĩa là phương thức di chuyển để tìm thấy hoặc chọn các thành phần HTML dựa trên các mối quan hệ với các thành phần khác, bắt đầu với một thành phần được chọn rồi di chuyển qua các thành phần khác đến khi tìm được thành phần mong muốn.Author: Võ Thanh Liêm
Giải thích:
- Thẻ <div> là cha của thẻ <ul> và là ông của tất cả mọi thứ bên trong thẻ <ul>
- Thẻ <ul> là cha của cả hai thẻ <li>, và là một đứa con của thẻ <div>
- Thẻ <li> là cha của 2 thẻ <span>, và là con của thẻ <ul> và cháu của thẻ <div>
- Thẻ <span> là một đứa con của thẻ <li> trái và là cháu của thẻ <ul> và thẻ <div>
- Hai thẻ <li> là anh em ruột (họ chia sẻ cùng thẻ cha <ul>)
- Thẻ <li> phải là cha của thẻ <b>, và là con của thẻ <ul> và cháu của thẻ <div>
- Thẻ <b> là con của thẻ <li> phải và cháu của thẻ <ul> và thẻ <div>
jQuery Traversing – Ancestors (Tổ tiên)
Tổ tiên bao gồm cha mẹ, ông bà,..ở đây chính là các phần tử cha, phần tử cha của cha,..của phần tử đang được chọn.Các phương thức để tìm các phần tử cha là:
parent(): lấy trực tiếp phần tử cha của phần tử đang được chọn, và nó chỉ lấy lên một cấp cha duy nhất.
parents(): Lấy tất cả các phần tử tổ tiên của phần tử đang được chọn, và nó sẽ lấy đến phần tử gốc (<html>).
parentUntil(): Lấy tất cả các phần tử tổ tiên giữa hai đối số đưa ra.
jQuery Traversing – Descendants (Con cháu)
Con cháu bao gồm cháu, chắt,…ở đây chính là các phần tử con, phần tử con của con,…của phần tử đang được chọn.Các phương thức để tìm phần tử con là:
children(): lấy trực tiếp phần tử con của phần tử đang được chọn, và nó chỉ lấy xống một cấp con.
find(): lấy tất cả các phần tử con, cháu,.. của phần tử được chọn cho đến phần tử con cuối cùng.
jQuery Traversing – Siblings (Anh em ruột)
Các phần tử có cùng chung phần tử cha.Có nhiều phương thức để lấy các phần tử cùng cấp như sau:
siblings(): lấy tất cả các phần tử có cùng phần tử cha với phần tử đang được chọn.
next(): lấy phần tử có chung phần tử cha tiếp theo so với phần tử đang được chọn.
nextAll(): lấy tất cả các phần tử có chung phần tử cha tiếp theo so với phần tử đang được chọn.
nextUntil(): lấy tất cả các phần tử có chung phần tử cha tiếp theo so với phần tử đang được chọn cho tới đối số đưa ra.
prev(), prevAll(), preUntil tương tự các phương thức trên.
jQuery Traversing – Filtering (Bộ lọc)
Các phương thức trong bộ lọc sẽ giúp tìm các phần tử một cách chi tiết và cụ thể hơn.Sau đây là các phương thức trong bộ lọc:
first(): lấy phần tử đầu tiên của thẻ đang được chọn.
last(): lấy phần tử cuối cùng của thẻ đang được chọn.
ep(): lấy phần tử được chỉ ra vị trí của thẻ đang được chọn.
filter(): lấy các phần tử thỏa điều kiện đưa ra.
not(): lấy các phần tử không thỏa điều kiện đưa ra.