CSS Selector trong jQuery

CSS Selector là một cách để chọn các phần tử HTML dựa trên các tiêu chí như tên thẻ, id, class, thuộc tính, nội dung, vị trí, trạng thái… jQuery sử dụng cú pháp CSS Selector để tìm kiếm và thao tác với các phần tử trong tài liệu. Trong bài viết này, chúng ta sẽ tìm hiểu về các loại CSS Selector trong jQuery và cách sử dụng chúng.

1. Khái niệm về Selector trong jQuery

Trong jQuery, selector là cách để chúng ta có thể lựa chọn các phần tử HTML trong DOM (Document Object Model) giúp thao tác với chúng. Selector trong jQuery cho phép chúng ta chọn các phần tử dựa trên thuộc tính, các kiểu, hoặc chúng ta cũng có thể chọn toàn bộ cấu trúc tài liệu HTML.

Sau đây ta chúng ta sẽ cùng xem qua một số ví dụ cơ bản về các loại selector trong jQuery:

• Selector cơ bản:
  • Chọn phần tử dựa trên tên thẻ: $('p') – chọn tất cả các phần tử <p>.
  • Chọn phần tử dựa trên lớp: $('.className') – chọn tất cả các phần tử có class là “className”.
  • Chọn phần tử dựa trên ID: $('#elementID') – chọn phần tử có ID là “elementID”.
• Selector kết hợp:
  • Kết hợp các selector: $('p.className') – chọn tất cả các phần tử <p> có class là “className”.
  • Kết hợp phần tử: $('p, .className') – chọn tất cả các phần tử <p> và tất cả các phần tử có class là “className”.
• Selector thuộc tính:
  • Chọn phần tử dựa trên thuộc tính: $('input[type="text"]') – chọn tất cả các phần tử input có type là “text”.
• Selector con và cha:
  • Chọn phần tử con: $('parentElement > childElement') – chọn tất cả các phần tử con của phần tử có ID là “parentElement”.
  • Chọn phần tử cha: $('childElement', 'parentElement') – chọn tất cả các phần tử “childElement” trong phần tử có ID là “parentElement”.

Sau đây chúng ta sẽ cùng nhau tìm hiểu kỹ hơn về những thuộc tính trên cũng như cách áp dụng nó vào sử dụng trong thực tế sẽ như thế nào.

>>>>> Xem thêm các bài viết tương tự tại đây:

• jQuery là gì? 2 phút giới thiệu tất tần tật về jQuery
• Sử dụng Grid System trong Bootstrap
• Scrollspy trong Bootstrap 5

2. Các loại CSS Selector trong jQuery

JQuery hỗ trợ rất nhiều CSS Selector phổ biến như sau:

• Basic Selector: Chọn các phần tử dựa trên tên thẻ, id, class, hoặc tất cả các phần tử. Ví dụ:

$("p")
$("#demo")
$(".intro")
$(" * ")

• Attribute Selector: Chọn các phần tử dựa trên giá trị của một hoặc nhiều thuộc tính. Ví dụ:

$("a[href]")
$("input[type='text']")
$("img[alt$='.jpg']")

• Hierarchy Selector: Chọn các phần tử dựa trên vị trí của chúng trong cây DOM. Ví dụ:

$("div > p")
$("ul li")
$("div + p")
$("div ~ p")

• Child Filter Selector: Chọn các phần tử con của một phần tử cha dựa trên thứ tự của chúng. Ví dụ:

$("ul li:first-child")
$("ul li:last-child")
$("ul li:nth-child(2)")
$("ul li:even")
$("ul li:odd")

• Content Filter Selector: Chọn các phần tử dựa trên nội dung của chúng. Ví dụ:

$("p:contains('Hello')")
$("p:empty")
$("p:has(span)")
$("p:parent")

• Form Selector: Chọn các phần tử của biểu mẫu dựa trên loại hoặc trạng thái của chúng. Ví dụ:

$("input:button")
$("input:checkbox")
$("input:checked")
$("input:disabled")
$("input:enabled")
$("input:focus")
$("input:hidden")
$("input:image")
$("input:password")
$("input:radio")
$("input:reset")
$("input:selected")
$("input:submit")
$("input:text")

• Visibility Filter Selector: Chọn các phần tử dựa trên khả năng hiển thị của chúng. Ví dụ:

$("p:hidden")
$("p:visible")

Ngoài ra, jQuery còn cung cấp một số CSS Selector mở rộng, bao gồm:

• Basic Filter Selector: Chọn các phần tử dựa trên một số tiêu chí cơ bản. Ví dụ:

$("p:first")
$("p:last")
$("p:not(.intro)")
$("p:even")
$("p:odd")
$("p:eq(1)")
$("p:gt(1)")
$("p:lt(1)")
$("p:header")
$("p:animated")

• jQuery Extensions Selector: Chọn các phần tử dựa trên một số tiêu chí đặc biệt của jQuery. Ví dụ:

$("p:lang(en)")
$("p:root")
$("p:focus")
$("p:target")
$("p:containsOwn('Hello')")
$("p:hasText()")
$("p:matches('Hello|Hi')")
$("p:matchesOwn('Hello|Hi')")
$("p:hasAttribute('title')")
$("p:hasAttributeStartsWith('data-')")
$("p:hasAttributeEndsWith('-id')")
$("p:hasAttributeValue('title','Hello')")
$("p:hasAttributeValueContains('title','Hello')")
$("p:hasAttributeValueStartsWith('title','Hello')")
$("p:hasAttributeValueEndsWith('title','Hello')")
$("p:hasAttributeValueMatching('title','^Hello')")

Bạn có thể tham khảo thêm về các CSS Selector trong jQuery tại tài liệu API của jQuery.

3. Cách sử dụng CSS Selector trong jQuery

Để sử dụng CSS Selector trong jQuery, bạn cần sử dụng phương thức $() hoặc jQuery(), với cú pháp như sau:

$(selector).action();

Trong đó:

• selector: là một biểu thức CSS Selector để chọn các phần tử HTML.
• action: là một phương thức jQuery để thực hiện một hành động nào đó với các phần tử được chọn.

Ví dụ:

// Chọn tất cả các thẻ p và thay đổi màu chữ thành đỏ
$("p").css("color", "red");
// Chọn thẻ p đầu tiên và ẩn nó
$("p:first").hide();
// Chọn các thẻ input có thuộc tính type là checkbox và đánh dấu chúng
$("input[type='checkbox']").prop("checked", true);
// Chọn các thẻ li có class là odd và thêm class là highlight vào chúng
$("li.odd").addClass("highlight");

Bạn có thể kết hợp nhiều CSS Selector với nhau để chọn các phần tử một cách chính xác hơn. Ví dụ:

// Chọn các thẻ p có id là demo và có nội dung chứa từ Hello
$("p#demo:contains('Hello')").css("font-weight", "bold");
// Chọn các thẻ li là con trực tiếp của thẻ ul có class là menu và có thứ tự chẵn
$("ul.menu > li:even").css("background-color", "yellow");

Bạn cũng có thể sử dụng các biến để lưu trữ các CSS Selector và sử dụng chúng sau đó. Ví dụ:

// Khai báo một biến để lưu trữ CSS Selector
var mySelector = $("p.intro");
// Sử dụng biến để thực hiện các hành động
mySelector.css("color", "blue");
mySelector.slideUp();

Tổng kết

CSS Selector là một công cụ mạnh mẽ để chọn và thao tác với các phần tử HTML trong jQuery. Bằng cách sử dụng các cú pháp CSS Selector chuẩn hoặc mở rộng, bạn có thể chọn các phần tử linh hoạt và dễ dàng. 

---

Cộng Đồng Linux là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 – 3 năm.

Bộ API giao tiếp của hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký bài viết mới: