Bài jQuery 4: Các Selector của jQuery

0
123

Xin chào các bạn, trong bài học ngày hôm nay chúng ta sẽ cùng nhau tìm hiểu về các Selector của jQuery.

Chọn các phần tử với jQuery

JavaScript được sử dụng phổ biến để lấy hoặc sửa đổi nội dung hoặc giá trị của các phần tử trên trang HTML, cũng như để sử dụng một số hiệu ứng như hiển thị, ẩn, hiệu ứng, v.v. Nhưng, trước khi bạn có thể thực hiện bất kỳ hành động nào bạn cần tìm hoặc chọn phần tử HTML đích.

Chọn các phần tử thông qua cách JavaScript có thể rất khó khăn, nhưng jQuery hoạt động như một phép thuật ở đây. Khả năng làm cho việc lựa chọn các phần tử DOM trở nên đơn giản và dễ dàng là một trong những tính năng mạnh mẽ nhất của jQuery.

Trong các bài học sau, bạn sẽ thấy một số cách phổ biến để chọn các phần tử trên một trang và làm một hành động gì đó với chúng bằng cách sử dụng jQuery.

Chọn phần tử theo ID

Bạn có thể sử dụng selector ID để chọn một thành phần duy nhất theo ID của nó trên trang.

Ví dụ, đoạn code jQuery sau đâ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 chương trình đã sẵn sàng để được thao tác.

Trong ví dụ trên, $(document).ready() là một sự kiện được sử dụng để thao tác một trang an toàn với jQuery. Đoạn code được bao gồm trong sự kiện này sẽ chỉ chạy khi trang DOM đã sẵn sàng. Chúng ta sẽ tìm hiểu thêm về các sự kiện trong chương tiếp theo.

Chọn các thành phần theo tên class

Bộ Selector class có thể được sử dụng để chọn các phần tử với một class cụ thể.

Ví dụ, đoạn code jQuery sau đây sẽ chọn và làm nổi bật các phần tử có thuộc tính class class = “mark”, khi chương trình đã sẵn sàng.

Chọn một phần tử theo tên

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

Ví dụ: đoạn code jQuery sau đây sẽ chọn và làm nổi bật cả các đoạn text của nó:

Chọn một phần tử theo thuộc tính

Bạn có thể sử dụng selector attribute để chọn một thành phần theo một trong các thuộc tính HTML của nó, chẳng hạn như thuộc tính đích của liên kết hoặc thuộc tính type của <input>, v.v.

Ví dụ: đoạn code jQuery sau đây sẽ chọn và làm nổi bật các phần tử <input>type="text", khi chương trình đã sẵn sàng.

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về các Selector trong jQuery. Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn các sự kiện với Mouse trong jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây