Chọn các phần tử theo ID hay class là phổ biến nhưng rất nhiều trường hợp chúng ta muốn chỉ chọn một vài phần tử con, cháu, hay anh em của một phần tử nào đó. jQuery cung cấp một tập các selectors để thực hiện điều này, cụ thể như bảng dưới đây:

Selector Mô tả
E F Chọn tất cả các phần tử F phía sau hay phía dưới E trong cây DOM) là hậu duệ (con, cháu) của E.
E > F Chọn tất cả các phần tử F (phía sau hay phía dưới E trong cây DOM)  là con trực tiếp của F.
E + F Chọn phần tử F là phần tử anh em liền kề sau hay kế tiếp E.
E ~ F Chọn tất cả các phần tử F phía sau hay phía dưới E trong cây DOM) là anh em với E.

Xét ví dụ tập tin HTML chứa đoạn mã sau:


<ul class="my-list">

  <li>

    <a href="http://jquery.com">jQuery supports</a>

    <ul>

       <li><a href="css1">CSS1</a></li>

       <li><a href="css2">CSS2</a></li>

       <li><a href="css3">CSS3</a></li>

       <li>Basic jQuery</li>

    </ul>

  </li>

  <li>

    <a href="http://jquery.com">jQuery also supports</a>

    <ul>

       <li>Custom selectors</li>

       <li>Form selectors</li>

    </ul>

  </li>

</ul>

Trong tập tin MyjQuery.js:

Chọn tất cả phần tử li là con trực tiếp của ul có class là my-list như sau (giả sử cho màu nền là vàng bằng phương thức css):


$("ul.my-list > li").css("background-color", "yellow");

Xem kết quả

Chọn tất cả phần tử a là con trực tiếp của các phần tử li ở trên:


$("ul.my-list > li > a").css("background-color", "yellow");

Xem kết quả

Chọn tất cả phần tử a là hậu duệ của li như sau:


$("ul.my-list > li a").css("background-color", "yellow");

Xem kết quả

Chọn tất cả các phần tử:

  • ul là anh em của a
  • a là con trực tiếp của li
  • li là con trực tiếp của ul có class là my-list

$("ul.my-list > li > a ~ ul").css("background-color", "yellow");

Xem kết quả

< Học jQuery