jQuery bài 3 jQuery selector

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: document.getElementById("header") 

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

Rõ ràng là quá đơn giản và ngắn gọn, tuy nhiên, mình khuyên các bạn chưa hiểu rõ về javascript thì nên tìm hiểu về nó, không có gì phức tạp cả. Hiểu được javascript bạn sẽ nắm được cốt lõi của jQuery và từ đó bạn có thể hiểu và dễ dàng custom những mã nguồn trên mạng. 

Cú pháp jQuery selector 

jQuery selector có cấu trúc như sau 

CODE


$(‘CSS selector‘)

jQuery selector được bắt đầu bằng $ kết hợp với các CSS selector trong cặp dấu (‘  và ‘) hoặc (“  và “) 

Bạn cũng có thể sử dụng jQuery để thay cho dấu $ 

CODE


jQuery(‘CSS selector‘)

Các jQuery selector: 

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 
 

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 đó. 

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

CODE


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

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

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. Chúc các bạn tìm hiểu tốt. 

Bạn có thể download tập tin đính kèm theo link làm quen với jquery (do giáo viên trường Khoa Học Tự Nhiên biên soạn). Tập tin đính kèm là file hướng dẫn rất đầy đủ tiếng việt do giảng viên trường mình soạn. Mong rằng các bạn sẻ học nhanh hiểu hết. Nếu thấy hay thì bấm '+' để ủng hộ mình nha. Cảm ơn các bạn.