Lập trình Jquery

Jquery traversing

02/04/2020

Jquery traversing là gì

jQuery traversing nghĩa là bạn dùng các hàm của jquery để di chuyển qua lại giữa các tag trong trang HTML Việc di chuyển để làm gì? Để đến được tag bạn cần, chọn nó và ra 1 hành động gì đó. Nhờ có các hàm traversing của jquery, bạn có thể chọn được các tag cần thiết để hành động ngay cả khi chúng không có đặc tính gì nổi bật trong tài liệu html.

Với jQuery traversing, bạn có thể di chuyển lên cấp trên(ancestors) – cha ông, hoặc xuống dưới (descendants) – cấp con cháu, hoặc đến các tag ngang hàng (siblings) – cấp anh em … trong cấu trúc tag của tài liệu HTML, tính từ tag bạn chọn đầu tiên.

Tag <div> là cha của <ul>, là là cấp trên (ancestor) của các tag bên dưới
Tag <ul> là cha của 2 tag <li> và là con của <div>
Tag <li> bên trái là cha của 2 tag <span>, con của <ul> là là cháu (descendant) của <div>
Hai tag <span> là con của <li> bên trái là là cháu (descendant) của <ul> và <div>
Hai tag <li> là anh em (siblings) của nhau, do cùng chung 1 cha (parent)
Tag <li> bên phải là cha của <b>, con của <ul> và là cháu (descendant) của div <div>
Tag <b> là con của <li> bên phải và cháu (descendant) của <ul> và <div>

Các hàm jquery traversing

Method	Description
add()	Bổ sung thêm phần tử vào phần tử được chọn
children()	Chọn các phần tử con trực tiếp của phần tử đang chọn
closest()	Returns the first ancestor of the selected element
contents()	Returns all direct children of the selected element (including text and comment nodes)
each()	Lặp qua các tag đã chọn
eq()	Chọn phần tử theo chỉ số
filter()	Lọc các phần tử khớp điều kiện với selector
find()	Tìm các tag con cháu phù hợp với selector
first()	Chọn phần tử đầu tiên phù hợp với selector
has()	Returns all elements that have one or more elements inside of them
is()	Checks the set of matched elements against a selector/element/jQuery object, and return true if at least one of these elements matches the given arguments
last()	Chọn phần tử cuối cùng phù hợp với selector
next()	Chọn phần tử kế với phần tử được chon
nextAll()	Returns all next sibling elements of the selected element
nextUntil()	Returns all next sibling elements between two given arguments
not()	Returns elements that do not match a certain criteria
offsetParent()	Returns the first positioned parent element
parent()	Chọn phần tử cha của phần tử được chọn
parents()	Chọn tất cả cha – ông của phần tử được chọn
parentsUntil()	Chọn tác taReturns all ancestor elements between two given arguments
prev()	Chọn phần tử anh em ở trước phần tử đang chọn
prevAll()	Returns all previous sibling elements of the selected element
prevUntil()	Returns all previous sibling elements between two given arguments
siblings()	Chọn các phần tử anh em với phần tử được chọn
slice()	Reduces the set of matched elements to a subset specified by a range of indices

jQuery Traversing – Filtering

Hàm first() trong jquery

Hàm first()giúp chọn phần tử đầu tiên phù hợp với selector

<script>
$(document).ready(function(){
  $(".row p").first().css("text-transform", "uppercase");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_first

Hàm last() trong jquery

Hàm last()giúp chọn phần tử sau cùng phù hợp với selector

<script>
$(document).ready(function(){
  $(".row p").last().css("text-transform", "uppercase");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_last

Hàm eq() trong jquery

Hàm eq() giúp bạn chọn phần tử theo chỉ số

<script>
$(document).ready(function(){
  $(".row").eq(2).css("background-color", "yellow");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_eq

Hàm filter() trong jquery

Hàm filter() trong jquery dùng để chọn phần tử thỏa điều kiện trong các các phần tử được chọn

<script>
$(document).ready(function(){
  $("p").filter(".td").css("color","red");
  $("p").filter(".td").parent().css("background-color","yellow");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_filter

jQuery Traversing – Descendants

Hàm children() trong jquery

Hàm children()giúp chọn các phần tử con trực tiếp của phần tử đang chọn

<script>
$(document).ready(function(){
  $(".row").children().css("font-weight", "700");
  $(".row").last().children("p").css("background-color", "lightblue");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_children

Hàm find() trong jquery

Hàm find()giúp chọn phần tử là cháu của phần tử đang chọn

<script>
$(document).ready(function(){
  $(".row").eq(2).find("a").css("color", "red");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_find

jQuery Traversing – Ancestors

Hàm parent() trong jquery

Hàm parent() trong jquery dùng để chọn phần tử cha của phần tử đang chọn

<script>
$(document).ready(function(){
  $("a[idTin='749']").parent().css({"background-color": "lightgreen","padding":"8px"});
  $("a[idTin='749']").parent().parent().css({"border": "solid 1px #03c","cursor":"pointer"});
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_parent

Jquery Traversing – Siblings

Hàm next() trong jquery

Hàm next()giúp chọn phần tử kế tiếp của phần tử đang chọn

<script>
$(document).ready(function(){
  $("[idTin='755']").next().css("background-color", "lightcyan");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_next

Hàm prev() trong jquery

Hàm prev()giúp chọn phần tử anh em ở trước phần tử đang chọn

<script>
$(document).ready(function(){
  $("[idTin='718']").prev().css("background-color", "lightgreen");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_prev

Hàm siblings() trong jquery

Hàm siblings() trong jquery dùng để chọn phần tử anh em với phần tử đang chọn

<script>
$(document).ready(function(){
  $("div[idTin='758']").siblings().css({"border": "solid 1px #03c","margin":"10px"});
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_siblings

Các hàm khác

Hàm add() trong jquery

Hàm add() trong jquery giúp bổ sung thêm phần tử vào phần tử được chọn

<script>
$(document).ready(function(){
  $("span").add("em").css("color", "red");
});
</script>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_add

Code HTML học jquery traversing

 <meta charset="UTF-8"><title>TIN TỨC ONLINE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div id="ttl">
  <div> Trang chủ > Tin xã hội > Thể thao </div>
  <div class="row" idTin="758">
    <p> Brazil sẽ ra quân bằng đội hình siêu tấn công </p>
    <span>đăng:: 02/07/2011 </span><em>Xem: 102 </em>
    <p> HLV trưởng Menezes tiết lộ sử dụng một tiền  vệ công và ba tiền đạo khi Brazil đá trận mở màn bảng B Copa America 
      2011 với Venezuela hôm nay (sáng mai 3/6, Hà Nội). </p>
    <p> <a href="#" idTin="758">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="755">
    <p> Argentina gây thất vọng trong trận ra quân Copa America </p>
    <span>đăng:: 02/07/2011. </span><em>Xem: 90 </em>
    <p> Dàn sao đẳng cấp thế giới của đội tuyển chủ nhà Argentina đã có màn trình diễn thiếu thuyết phục và bị Bolivia cầm 
      chân 1-1 trong trận khai mạc sáng thứ bảy, theo giờ Việt Nam. </p>
    <p> <a href="#" idTin="755">Xem chi tiết</a> </p>
  </div>
  <div class="row">
    <p> Kỳ thủ Lê Quang Liêm lên top 30 thế giới </p>
    <span>đăng:: 02/07/2011. </span><em>Xem: 60 </em>
    <p> (NLĐO) - Liên đoàn cờ vua thế giới (FIDE) vừa công bố bảng xếp hạng các kỳ thủ trong hai tháng qua, kỳ thủ Lê Quang 
      Liêm đã “nhảy một mạch” từ hạng 49 lên hạng 27 thế giới. </p>
    <p> <a href="#" idTin="749">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="718">
    <p> De Gea hoàn thành cuộc kiểm tra y tế tại M.U </p>
    <span>đăng:: 28/06/2011. </span><em>Xem: 30 </em>
    <p> Hôm qua 27.6, thủ thành De Gea của Atletico và U21 Tây Ban Nha đã hoàn tất những thủ tục kiểm tra y tế để 
      chuyển sang thi đấu cho MU với mức giá 17,8 triệu bảng. </p>
    <p> <a href="#" idTin="718">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="693">
    <p class="td"> Lội ngược dòng thần kỳ, Mexico vô địch Gold Cup 2011 </p>
    <span>đăng:: 27/06/2011. </span><em>Xem: 109 </em>
    <p> Bất chấp việc bị đội tuyển Mỹ sớm vượt lên dẫn trước 2-0, Mexico vẫn không buông xuôi và đã thực hiện một 
      màn lội ngược dòng thần kỳ, ghi liền 4 bàn để giành chức vô địch Gold Cup 2011. </p>
    <p> <a href="#" idTin="693">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="665">
    <p> “Real sẽ hết cửa vô địch nếu Barca có Alexis Sanchez” </p>
    <span>đăng:: 25/06/2011. </span><em>Xem: 110 </em>
    <p> (Dân trí) - Đó chính là lời khẳng định của chủ tịch Udinese, Giampaolo Pozzo về giá trị mà ngôi sao người Chile có 
      thể mang đến cho Barca. Bên cạnh đó, ông cũng kiên quyết “hét” cái giá 50 triệu euro cho hảo thủ 22 tuổi này. </p>
    <p> <a href="#" idTin="665">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="664">
    <p class="td"> Có Ashley Young, MU vẫn muốn giữ lại Nani </p>
    <span>đăng:: 25/06/2011.</span><em>Xem: 140 </em>
    <p> (Dân trí) - Mặc dù vừa mang về sân Old Trafford chuyên gia chạy cánh A.Young nhưng BLĐ MU vẫn cho biết họ không
      hề có ý định bán Nani. >> Bayern Munich tính “giải cứu” Nani khỏi Old Trafford </p>
    <p> <a href="#" idTin="664">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="663">
    <p> Villas Boas và những thay đổi nhân sự ở Chelsea </p>
    <span>đăng:: 25/06/2011. </span><em>Xem: 420 </em>
    <p> (Dân trí) - Được chủ tịch Abramovich trả 13,2  triệu bảng để phá vỡ hợp đồng với Porto, Villas Boas được kỳ vọng sẽ 
      mang lại thành công cho Chelsea. Ngay từ lúc này, ông đã tính tiêu tiềm rầm rộ bằng những bản hợp đồng mới. </p>
    <p> <a href="#" idTin="663">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="640">
    <p> Falcao đã đạt được thỏa thuận lương với Chelsea </p>
    <span>đăng:: 24/06/2011. </span><em>Xem: 421 </em>
    <p> (Dân trí) - Ngày về Stamford Bridge của “Vua  phá lưới” Europa League có vẻ không còn xa khi anh đã đạt được thỏa 
      thuận với Chelsea về mức lương 5 triệu bảng/mùa. </p>
    <p> <a href="#" idTin="640">Xem chi tiết</a> </p>
  </div>
  <div class="row" idTin="639">
    <p> Neymar đồng ý thi đấu cho Real Madrid trong 6 năm tới </p>
    <span>đăng:: 24/06/2011. </span><em> Xem: 274 </em>
    <p> (Dân trí) - “Thần đồng” của bóng đá xứ Samba đã tiến một bước dài tới Bernabeu sau khi nhất trí với Real Madrid về 
      hợp đồng có thời hạn 6 năm. Tất cả vấn đề còn lại sẽ phụ thuộc vào việc thương thảo giữa đội bóng hoàng gia và CLB Santos. </p>
    <p> <a href="#" idTin="639">Xem chi tiết</a> </p>
  </div>
</div></body>