[jQuery] Một số jQuery Selectors phổ biến (phần 1)

Trong phần 1phần 2 của chuỗi bài jQuery Selectors, các bạn đã tìm hiểu 5 cách sử dụng jQuery Selectors cơ bản.

Trong bài này, các bạn sẽ tìm hiểu một số ví dụ về kết hợp các jQuery selectors để tăng hiệu quả khi code.!

1. Lấy phần tử đầu tiên, cuối cùng, vị trí chẵn, lẻ trong danh sách

Cách dùng: $(“Tên_thẻ:Tùy_chọn”)

Với tùy_chọn là first, last, even, odd. Chi tiết cách sử dụng trong bảng dưới

:first $(“div:first”) Chọn phần tử div đầu tiên
:last $(“h2:last”) Chọn phần tử h2 cuối cùng
:even $(“tr:even”) Chọn các phần tử tr chẵn
:odd $(“tr:odd”) Chọn các phần tử tr lẻ

Ví dụ 1: sử dụng first, last, even, odd với tên thẻ để đổi màu nền.

Kết quả:

  • $(“div:first”).css(“background-color”, “yellow”);  đổi màu nền vàng với thẻ div đầu tiên (khối 1)
  • $(“div:last”).css(“background-color”, “orange”);  đổi màu cam với thẻ div cuối cùng (khối 4)
  • $(“tr:even”).css(“background-color”, “blue”);  đổi màu nền xanh lá cây với thẻ tr chẵn (dòng 2, 4 của bảng)
  • $(“tr:odd”).css(“background-color”, “green”); đổi màu nền xanh dương với thẻ tr lẻ(dòng 1, 3 của bảng)
jQuery Selectors with first, last, even, odd
Hình 1. jQuery – lấy phần tử với first, last, even, odd

2. Lấy phần tử đầu tiên, cuối cùng, có vị trí xác định trong danh sách

:first-child $(“h2:first-child”) Chọn phần tử con là phần tử h2 đầu tiên
:last-child $(“h2:last-child”) Chọn phần tử con h2 cuối cùng
:nth-child(n) $(“h2:nth-child(3)”) Chọn phần tử con là phần tử h2 thứ 3 tính từ đầu danh sách
:nth-last-child(n) $(“h2:nth-last-child(3)”) Chọn phần tử con là phần tử h2 thứ 3 tính từ cuối danh sách
:first-of-type $(“h2:first-of-type”) Chọn phần tử con h2 đầu tiên trong số các phần tử con
:last-of-type $(“h2:last-of-type”) Chọn phần tử con h2 cuối cùng trong số các phần tử con
:nth-of-type(n) $(“h2:nth-of-type(3)”) Chọn phần tử con h2 thứ 3 trong số các phần tử con.

Ví dụ 2: sử dụng jQuery với :first-child, :last-child, :first-of-type và :last-of-type

Kết quả:

  • $(“h3:first-child”).css(“background-color”, “yellow”); đổi màu nền vàng với thẻ h3 đầu tiên của từng khối. Khối 2, thẻ h3 không phải đầu tiên trong danh sách 4 thẻ, do vậy không đổi màu nền.
  • $(“h3:last-child”).css(“background-color”, “orange”); đổi màu nền cam với thẻ h3 cuối cùng của từng khối. Khối 3, thẻ h3 không phải cuối cùng trong danh sách 4 thẻ, do vậy không đổi màu nền.
Hình 2. jQuery với :first_child và :last-child

Chú ý:

  • Sử dụng :first-of-type thay cho :first-child để lấy tất cả phần tử đầu tiên trong danh sách
  • Sử dụng :last-of-type thay cho :last-child để lấy tất cả phần tử cuối cùng trong danh sách
jQuery with :first-of-type and :last-of-type
Hình 3. jQuery với :first-of-type và :last-of-type

Ví dụ 3: sử dụng jQuery với :nth-child(n), :nth-of-type(n) với HTML giống ví dụ 2, chỉ thay đổi mã trong <script>

Kết quả:

  • $(“h3:nth-child(2)”).css(“background-color”, “yellow”); đổi màu nền vàng với các phần tử h3 thứ 2 của từng khối.
  • $(“h3:nth-of-type(3)”).css(“background-color”, “orange”); đổi màu nền cam với các phần tử h3 thứ 3 của khối.
Hình 4. jQuery với :nth-child(n) và :nth-of-type(n)

1 thought on “[jQuery] Một số jQuery Selectors phổ biến (phần 1)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.