Giới thiệu về jQuery Selectors

Trong lập trình web, việc thao tác với các phần tử HTML là một tác vụ quan trọng. jQuery cung cấp một tập hợp các bộ chọn (Selectors) mạnh mẽ giúp chúng ta dễ dàng truy cập, thay đổi và thao tác với phần tử HTML mà không cần viết quá nhiều mã JavaScript thuần.

jQuery Selectors cho phép bạn chọn phần tử dựa trên thẻ HTML, id, class, thuộc tính, vị trí, và nhiều tiêu chí khác. Chúng giúp tăng hiệu suất lập trình, giảm mã nguồn và cải thiện trải nghiệm người dùng.

Hãy cùng khám phá cách sử dụng jQuery Selectors trong bài viết này.

1. Chọn phần tử theo tên thẻ (Tag Selector)

Cú pháp:

js
$("tag")

Ví dụ: Chọn tất cả thẻ <p> trên trang và thay đổi màu chữ thành đỏ.

js
$("p").css("color", "red");

2. Chọn phần tử theo ID (ID Selector)

Cú pháp:

js
$("#id")

Ví dụ: Chọn phần tử có id="header" và ẩn nó đi.

js
$("#header").hide();

3. Chọn phần tử theo Class (Class Selector)

Cú pháp:

js
$(".class")

Ví dụ: Chọn tất cả các phần tử có class .highlight và thay đổi nền thành vàng.

js
$(".highlight").css("background-color", "yellow");

4. Chọn phần tử theo thuộc tính (Attribute Selector)

Bạn có thể chọn phần tử dựa trên các thuộc tính HTML.

4.1. Chọn theo giá trị thuộc tính

Cú pháp:

js
$("[attribute='value']")

Ví dụ: Chọn tất cả các thẻ <input> có type="text" và thêm viền đỏ.

js
$("input[type='text']").css("border", "2px solid red");

4.2. Chọn phần tử có thuộc tính bất kỳ

js
$("[attribute]")

Ví dụ: Chọn tất cả phần tử có thuộc tính title.

js
$("[title]").css("font-weight", "bold");

5. Chọn phần tử theo mối quan hệ

5.1. Chọn phần tử con trực tiếp (> - Child Selector)

Chỉ chọn phần tử con trực tiếp của phần tử cha.

js
$("div > p").css("color", "blue");

5.2. Chọn tất cả phần tử con ( - Descendant Selector)

js
$("div p").css("font-size", "18px");

5.3. Chọn phần tử liền kề (+ - Adjacent Sibling Selector)

js
$("h2 + p").css("margin-top", "10px");

5.4. Chọn tất cả phần tử anh em (~ - General Sibling Selector)

js
$("h2 ~ p").css("color", "gray");

6. Chọn phần tử theo vị trí

Bạn có thể chọn phần tử theo thứ tự xuất hiện trên trang.

6.1. Chọn phần tử đầu tiên (:first)

js
$("li:first").css("font-weight", "bold");

6.2. Chọn phần tử cuối cùng (:last)

js
$("li:last").css("color", "blue");

6.3. Chọn phần tử theo vị trí cụ thể (:eq(index))

js
$("li:eq(2)").css("background-color", "lightgray");

6.4. Chọn tất cả phần tử chẵn/lẻ (:even, :odd)

js
$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#ffffff");

7. Chọn phần tử dựa trên trạng thái

7.1. Chọn phần tử đang được chọn (:checked)

js
$("input:checked").css("outline", "2px solid green");

7.2. Chọn phần tử đang bị vô hiệu hóa (:disabled)

js
$("input:disabled").css("background-color", "gray");

7.3. Chọn phần tử đang được focus (:focus)

js
$("input:focus").css("border", "2px solid blue");

8. Kết hợp nhiều bộ chọn

Bạn có thể kết hợp nhiều bộ chọn để tăng độ chính xác khi chọn phần tử.

8.1. Chọn nhiều phần tử khác nhau

js
$("h1, h2, h3").css("font-family", "Arial, sans-serif");

8.2. Chọn phần tử theo nhiều tiêu chí

js
$("input[type='text'][name='username']").css("border", "1px solid black");

Kết luận

jQuery Selectors giúp lập trình viên dễ dàng thao tác với các phần tử HTML một cách nhanh chóng và hiệu quả. Việc hiểu và sử dụng đúng các bộ chọn sẽ giúp bạn viết mã sạch hơn, tối ưu hơn và cải thiện hiệu suất ứng dụng web.

Hãy tiếp tục theo dõi CodeTutHub để cập nhật thêm nhiều kiến thức hữu ích về lập trình web và jQuery!