Bài học jQuery dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về Selector trong jQuery cũng như cách chọn các phần tử HTML bằng jQuery.
JavaScript được sử dụng phổ biến để lấy hoặc sửa đổi nội dung, giá trị của các phần tử HTML trên trang, cũng như để áp dụng một số hiệu ứng như ẩn, hiện .... Tuy nhiên trước khi thực hiện hành động bất kỳ chúng ta phải tìm hoặc chọn phần tử HTML đích.
Việc chọn các phần tử thông qua các tiếp cận JavaScript có thể hơi khó, tuy nhiên với sự trợ giúp của jQuery, tác vụ này trở nên đơn giản hơn rất nhiều. Một trong những tính năng nổi bật 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.
Mẹo: jQuery hỗ trợ hầu hết các selector được xác định trong các CSS3 mới nhất cũng như các selector tùy chỉnh. Các selector tùy chỉnh giúp cải thiện khả năng chọn các thành phần HTML trên một trang.
Ngoài ra chúng ra có thể sử dụng selector 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ẽ 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ẵng sàng:
Kết quả đầu ra có dạng như dưới đây:
Trong ví dụ trên $(document).ready() là sự kiện được sử dụng để thao tác một trang an toàn với jQuery. Mã được bao gồm trong sự kiện này chỉ chạy khi trang DOM đã sẵn sàng.
Lớp selector (class selector) có thể được sử dụng để chọn các phần tử với một lớp cụ thể.
Ví dụ: trong ví dụ dưới đây mã jQuery sẽ chọn và làm nổi bật các phần tử có thuộc tính class là class="mark" khi tài liệu đã sẵn sàng:
Kết quả đầu ra có dạng như dưới đây:
Phần tử selector được sử dụng để chọn các phần tử dựa trên tên của phần tử đó.
Ví dụ: đoạn mã jQuery dưới đây 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 có dạng như dưới đây:
Ngoài ra chúng ta cũng có thể sử dụng thuộc tính selector để chọn một phần tử trong các thuộc tính HTML, chẳng hạn như thuộc tính target của link hoặc thuộc tính type của đầu vào.
Ví dụ: trong ví dụ dưới đây đ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à 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 có dạng như dưới đây:
Nếu muốn, chúng ta cũng có thể kết hợp các selector CSS để chọn các phần tử chính xác hơn. Chẳng hạn như kết hợp lớp selector với phần tử selector để tìm các phần tử trong tài liệu có chứa các loại và các lớp cụ thể.
Ví dụ: ví dụ dưới đây minh họa cách chọn các phần tử bằng cách kết hợp selector CSS:
Kết quả đầu ra có dạng như dưới đây:
Ngoài các selector CSS được xác định, jQuery cũng cung cấp các selector tùy chỉnh để cải thiện khả năng chọn các phần tử trên trang.
Ví dụ: trong ví dụ dưới đây minh họa các Selector tùy chỉnh trong jQuery:
Kết quả đầu ra có dạng như dưới đây:
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về selector trong jQuery. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Event trong jQuery.
Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.