Khám phá cách chọn phần tử trong jQuery

Khám phá cách chọn phần tử trong jQuery

Trong bài học này, chúng ta sẽ tìm hiểu về Selector trong jQuery và cách chọn các phần tử HTML bằng jQuery.

1. Lựa chọn phần tử trong jQuery

JavaScript thường được sử dụng để trích xuất hoặc thay đổi nội dung, giá trị của các phần tử HTML trên trang web, cũng như để áp dụng một số hiệu ứng như hiển thị hoặc ẩn đi. Trước khi thực hiện bất kỳ hành động nào, chúng ta cần phải tìm hoặc chọn được phần tử HTML mục tiêu.

Việc chọn phần tử thông qua JavaScript có thể phức tạp, nhưng với jQuery, nhiệm vụ này trở nên đơn giản hơn nhiều. Một trong những tính năng quan trọng nhất của jQuery là hỗ trợ việc lựa chọn các phần tử DOM trở nên dễ dàng hơn.

Gợi ý: jQuery hỗ trợ hầu hết các bộ chọn được định nghĩa trong CSS3 mới nhất cũng như các bộ chọn tùy chỉnh. Việc sử dụng các bộ chọn tùy chỉnh giúp cải thiện khả năng lựa chọn các phần tử HTML trên một trang.

2. Lựa chọn phần tử theo ID

Ngoài ra, bạn có thể sử dụng bộ chọn theo ID để chọn một phần tử duy nhất với một ID duy nhất trên trang.

Ví dụ: Đoạn mã jQuery dưới đây sẽ lựa chọn và làm nổi bật một phần tử có thuộc tính ID id='mark' khi tài liệu đã sẵn sàng:

Kết quả xuất ra sẽ có dạng như sau:

Trong ví dụ trên, $(document).ready() là sự kiện được sử dụng để thao tác an toàn trên trang với jQuery. Mã trong sự kiện này chỉ chạy khi DOM của trang đã sẵn sàng.

3. Lựa chọn các phần tử theo Tên Lớp

Bộ chọn lớp (class selector) có thể được sử dụng để chọn các phần tử có một lớp cụ thể.

Ví dụ: Trong ví dụ dưới đây, đoạn mã jQuery sẽ chọn và làm nổi bật các phần tử có class là 'mark' khi tài liệu đã sẵn sàng:

Kết quả xuất ra sẽ có dạng như sau:

4. Lựa chọn các phần tử theo Tên (Name)

Bộ chọn phần tử được sử dụng để lựa chọn các phần tử dựa trên tên của chúng.

Ví dụ: Trong ví dụ sau, đoạn mã jQuery sẽ chọn và làm nổi bật tất cả các đoạn văn bản, tức là các phần tử p trong tài liệu:

Kết quả đầu ra sẽ có dạng như sau:

5. Chọn các phần tử theo thuộc tính

Ngoài ra, chúng ta cũng có thể sử dụng bộ chọn thuộc tính để lựa chọn một phần tử dựa trên các thuộc tính HTML như thuộc tính target của liên kết hoặc thuộc tính type của phần tử nhập liệu.

Ví dụ: Trong ví dụ sau, đoạn mã jQuery sẽ chọn và làm nổi bật tất cả các văn bản đầu vào, tức là các phần tử input có thuộc tính type='text' khi tài liệu đã sẵn sàng:

Kết quả đầu ra sẽ có dạng như sau:

6. Chọn các phần tử bằng cách kết hợp selector CSS

Nếu muốn, chúng ta cũng có thể kết hợp các bộ chọn CSS để lựa chọn các phần tử chính xác hơn. Ví dụ, kết hợp bộ chọn lớp với bộ chọn phần tử để tìm các phần tử trong tài liệu chứa các loại và lớp cụ thể.

Ví dụ: Dưới đây là một ví dụ minh họa về cách chọn các phần tử bằng cách kết hợp selector CSS:

Kết quả sẽ có dạng như sau:

7. Selector tùy chỉnh trong jQuery

Ngoài các selector CSS tiêu chuẩn, jQuery cung cấp các selector tùy chỉnh để tăng cường khả năng chọn các phần tử trên trang.

Ví dụ: Trong ví dụ sau đây, mình sẽ minh họa về các Selector tùy chỉnh trong jQuery:

Kết quả xuất hiện như sau:

Bài học trước đó đã giới thiệu về selector trong jQuery. Tiếp theo, chúng ta sẽ tìm hiểu về Sự kiện trong jQuery.

Nếu bạn có thắc mắc hoặc câu hỏi gì cần được giải đáp, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.