jQuery selector (Phần 1)

jQuery selector tận dụng thế mạnh của CSS selector nhằm giúp người mới tìm hiểu về jQuery có thể nắm bắt nhanh chóng khi đã làm việc và có kiến thức về CSS. Do đó jQuery selector tương tự như CSS selector.

jQuery selector giúp chúng ta dễ dàng truy vấn đến các phần tử DOM (Document Object Model – Mô hình đối tượng tài liệu) một cách nhanh nhất, code đơn giản và ngắn ngọn nhất.

Ví dụ: để truy vấn đến phần tử có id là header, với cách viết javascript thông thường bạn phải viết như sau:

1 document.getElementById("header")

Thì với jQuery, công việc chỉ còn đơn giản như sau:

1 $("#header")

Chắc đến đây bạn đã cảm thấy thế mạnh và lợi ích của jQuery rồi đúng không?

jQuery CSS selector

Cũng giống như CSS selector, 3 thành phần được sử dụng nhiều nhất trong jQuery selector là tên thẻ (type selector), ID và Class

Thành phần Selector CSS selector jQuery selector Mô tả
Tên thẻ HTML (type selector) div $(‘div’) Chọn tất cả các thẻ div trong tài liệu HTML
ID #header $(‘#header’) Chỉ chọn phần tử có id là header
Class .content $(‘.content’) Chọn tất cả các phần tử có class là content
Universal selector * $(“*”) Chọn tất cả các phần tử trong tài liệu HTML
Descendant selector form input $(‘form input’) Chọn tất cả các thành phần inputcủa form
Child selector ul > li $(‘ul > li’) Chọn tất cả các thành phần li (cấp 1) trong danh sách (HTML List)
Adjacent selector div + em $(‘div + em’) Chọn thành phần em liền kề phía sau của div trong tài liệu HTML
Sibling selector div ~ em $(‘div ~ em’) Chọn thành phần em liền kề phía trước của div trong tài liệu HTML

jQuery Attribute selector

Attribute selectors là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó, với Attribute selectors chúng ta có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó. Bạn có thể tìm hiểu thêm về CSS Attribute selector .

 

Tương tự bạn cũng có thể sử dụng các CSS Attribute selectors trong jQuery selector

Ví dụ:

$(‘input[type="text"]‘) //Chọn tất cả các thành phần input có type là text

$(‘input[title]‘) //Chọn tất cả các hình ảnh được gán thuộc tính title

KẾT LUẬN

Qua bài học này chúng ta nhận thấy, jQuery selector hoàn toàn được ứng dụng từ CSS selector kết hợp với hàm $(”) của jQuery.

Bài viết tiếp theo, chúng ta sẽ cùng tìm hiểu một số jQuery selector riêng của jQuery.

VinaInfotech
Bình luận của bạn