Jquery Access

08/10/2019

Bài sau » « Bài trước

Jquery Access - Phạm vi truy cập là gì ?

Jquery access được dùng để truy cập, tìm kiếm phần tử HTML dựa theo mối quan hệ của nó với các phần tử khác. Nói ngắn gọn là Jquery sẽ duyệt qua các phần tử HTML để tìm kiếm phần tử mong muốn.

Jquery Access - Tổ tiên

Tổ tiên là cha mẹ, ông bà, ông cố, ...

Và Jquery cung cấp 3 phương thức để tìm cha mẹ, tổ tiên như sau:

  • parent()
  • parents()
  • parentsUntil()

Phương thức parent() jquery

Phương thức parent() jquery trả về phần tử cha mẹ trực tiếp của phần tử được chọn.

Phương thức này chỉ lùi qua 1 cấp độ duy nhất theo cấu trúc DOM

Ví dụ ta có cấu trúc DOM như sau:

<div style="width:500px;">div (grandparent) <p>p (direct parent) <span>span</span> </p> </div> <script> $(document).ready(function(){ $("span").parent().css({"color": "red", "border": "2px solid red"}); // thẻ p (cha, mẹ trực tiếp của span sẽ có màu đỏ và border 2px) }); </script>

Phương thức parents() jquery

Phương thức parents() jquery trả về tất cả phần tử cha mẹ, ông bà, tổ tiên của phần tử được chọn, cho đến phần tử root của Document.

Ví dụ dưới đây trả về tất cả tổ tiên của span:

<div style="width:500px;">div (grandparent) <p>p (direct parent) <span>span</span> </p> </div> <script> $(document).ready(function(){ $("span").parents().css({"color": "red", "border": "2px solid red"}); }); </script>

Bạn cũng có thể sử dụng một tham số tùy chọn để lọc tìm kiếm tổ tiên. Ví dụ dưới đây trả về tất cả thẻ ul của span.

<script> $(document).ready(function(){ $("span").parents('ul').css({"color": "red", "border": "2px solid red"}); }); </script>

Phương thức parentsUntil() jquery

Phương thức parentsUntil() jquery trả về tất cả phần tử cha mẹ, ông bà, tổ tiên giữa phần tử được chọn và điều kiện trong parentsUntil().

Ví dụ dưới đây trả về cha mẹ, tổ tiên giữa spandiv:

<div style="width:500px;">div (great-grandparent) <ul>ul (grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </div> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"}); }); </script>

Jquery Access - Con cháu

Trong jquery, Ta có 2 phương thức để duyệt tìm phần tử con, cháu của phần tử được chọn:

  • children()
  • find()

Phương thức children() jquery

Phương thức children() jquery trả về tất cả phần tử con trực tiếp của phần tử được chọn.

Phương thức này chỉ đi qua 1 cấp độ duy nhất theo cấu trúc DOM

Ví dụ dưới đây trả về tất cả con trực tiếp của thẻ div là 2 thẻ p :

<div class="descendants" style="width:500px;">div (current element) <p class="first">p (child) <span>span (grandchild)</span> </p> <p class="second">p (child) <span>span (grandchild)</span> </p> </div> <script> $(document).ready(function(){ $("div").children().css({"color": "red", "border": "2px solid red"}); }); </script>

Bạn cũng có thể sử dụng một tham số tùy chọn để lọc tìm kiếm con cháu. Ví dụ dưới đây trả về thẻ p con có class="first":

<script> $(document).ready(function(){ $("div").children("p.first").css({"color": "red", "border": "2px solid red"}); }); </script>

Phương thức find() jquery

Phương thức find() jquery trả về tất cả các phần tử con cháu của phần tử được chọn, cho đến phần con cháu cuối cùng.

<div class="descendants" style="width:500px;">div (current element) <p class="first">p (child) <span>span (grandchild)</span> </p> <p class="second">p (child) <span>span (grandchild)</span> </p> </div> <script> $(document).ready(function(){ $("div").find("span").css({"color": "red", "border": "2px solid red"}); // Trả về tất cả span là con cháu của DIV }); </script>

Ví dụ dưới đây trả về tất cả con cháu của DIV:

$(document).ready(function(){ $("div").find("*").css({"color": "red", "border": "2px solid red"}); });

Jquery Access - Anh chị em

Với jquery, bạn có thể di chuyển ngang trong DOM để tìm các anh chị em (cùng có chung phần tử cha).

Một số phương thức jquery hữu ích cho việc tìm anh chị em như sau:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

Phương thức jquery siblings()

Phương thức jquery siblings() trả về tất cả phần tử anh chị em (đồng cấp) với phần tử được chọn.

Ví dụ sau trả về các anh chị em của thẻ h2

<div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> <script> $(document).ready(function(){ $("h2").siblings().css({"color": "red", "border": "2px solid red"}); }); </script>

Ngoài ra, bạn còn có thể thêm 1 tham số tùy chọn để lọc anh chị em mong muốn. Ví dụ dưới đây là lọc những anh chị em là thẻ p của thẻ h2 :

$(document).ready(function(){ $("h2").siblings("p").css({"color": "red", "border": "2px solid red"}); });

Phương thức jquery next()

Phương thức jquery next() trả về 1 phần tử anh chị em kế tiếp của phần tử được chọn.

<div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> <script> $(document).ready(function(){ $("h2").next().css({"color": "red", "border": "2px solid red"}); // Kết quả trả về là thẻ h3 }); </script>

Phương thức jquery nextAll()

Phương thức jquery nextAll() trả về tất cả phần tử anh chị em kế tiếp của phần tử được chọn.

<div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> <script> $(document).ready(function(){ $("h2").nextAll().css({"color": "red", "border": "2px solid red"}); // Kết quả trả về là thẻ h3, p }); </script>

Phương thức jquery nextUntil()

Phương thức jquery nextUntil() trả về tất cả phần tử anh chị em nằm giữa phần tử được chọn và điều kiện trong nextUntil().

Ví dụ dưới đây trả về tất cả phần tử nằm giữa h2h6:

<div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <h4>h3</h4> <h5>h3</h5> <h6>h3</h6> <p>p</p> </div> <script> $(document).ready(function(){ $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"}); // Kết quả trả về là thẻ h3, h4, h5 }); </script>

Phương thức jquery prev(), prevAll() và prevUntil

Các phương thức jquery prev(), prevAll()prevUntil() tương tự như các phương thức next(), nextAll()nextUntil(). Nhưng chỉ khác là nó duyệt các phần tử theo thứ tự ngược lại.

<div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <h4>h3</h4> <h5>h3</h5> <h6>h3</h6> <p>p</p> </div> <script> $(document).ready(function(){ $("h3").prev().css({"color": "red", "border": "2px solid red"}); // Kết quả trả về là thẻ h2 $("h3").prevAll().css({"color": "red", "border": "2px solid red"}); // Kết quả trả về là thẻ h2, span, p $("h3").prevUntil("p").css({"color": "red", "border": "2px solid red"}); // Kết quả trả về là thẻ h2, span }); </script>

Bài sau » « Bài trước
Back to top