Tự học Selector trong jQuery

Trong bài học trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về cú pháp cơ bản của jQuery, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Selector trong jQuery.

selector trong jquery

Tự học Selector trong jQuery

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.

Mục Lục bài viết:
1. Chọn các phần tử bằng jQuery
2. Chọn các phần tử theo ID
3. Chọn các phần tử theo Class Name
4. Chọn các phần tử theo tên (Name)
5. Chọn các phần tử theo thuộc tính
6. Chọn các phần tử bằng cách kết hợp selector CSS
7. Selector tùy chỉnh trong jQuery

1. Chọn các phần tử trong 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.

2. Chọn các phần tử theo ID

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:

selector trong jquery

Kết quả đầu ra có dạng như dưới đây:

selector trong jquery 2

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.

3. Chọn các phần tử theo Class Name

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:

selector trong jquery 3

Kết quả đầu ra có dạng như dưới đây:

selector trong jquery 4

4. Chọn các phần tử theo tên (Name)

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:

selector trong jquery 5

Kết quả đầu ra có dạng như dưới đây:

selector trong jquery 6

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 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:

selector trong jquery 7

Kết quả đầu ra có dạng như dưới đây:

selector trong jquery 8

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 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:

selector trong jquery 9

Kết quả đầu ra có dạng như dưới đây:

selector trong jquery 10

7. Selector tùy chỉnh trong jQuery

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:

selector trong jquery 11

Kết quả đầu ra có dạng như dưới đây:

selector trong jquery 12

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.

https://thuthuat.taimienphi.vn/selector-trong-jquery-51486n.aspx
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é.

Tác giả: Xuân Bắc     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Học jQuery, tài liệu tự học lập trình jQuery
Phương thức Getter và Setter trong jQuery
Phương thức stop() trong jQuery
Hàm callback trong jQuery
Hiệu ứng động trong jQuery
Từ khoá liên quan:

Selector trong jQuery

, jQuery, học jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới