JQuery thư viện JavaScript đa trình duyệt được thiết kế để đơn giản hóa lập trình phía máy người dùng của HTML Đó là phát hành vào tháng 1 năm 2006 tại Bar Camp NYC bởi John Resig. Được sử dụng bởi hơn 52% trong 10.000 truy cập nhiều nhất các trang web. jQuery là thư viện JavaScript phổ biến nhất trong sử dụng ngày nay.
jQuery làm được những gì?
1. Truy cập (access) các phần tử (elements) trong nội dung trang web (document)
2. Thay đổi hình thức/giao diện (appearance) của trang web: Thay đổi class hoặc style riêng lẽ...
3. Thay đổi nội dung (content) trang web.
4. Tương tác với người dùng.
5. Hiệu ứng động: fades, wipes, ...
6. Lấy thông tin từ Server mà không cần load lại trang web (AJAX)
7. Đơn giản hoá tác vụ của JavaScript
Ví dụ đầu tiên sử dụng jQuery: Download jQuery tại http://jquery.com (phiên bản hiện tại là 1.3.2) Tạo file HTML với nội dung sau để xem ví dụ:
Chú ý đường dẫn file jquery.js và các code trong thẻ script Bạn có thể xóa đoạn này ra khỏi file HTML để xem sự khác biệt:
Giải thích:
Công việc cơ bản nhất của jQuery là chọn một thành phần của document để thao tác. Điều này được thực hiện dựa vào cấu trúc $() . Xem $() như 1 hàm nhận một tham số kiểu string có thể là biểu thức chọn CSS.
Trong ví dụ trên, chúng ta đã chọn tất cả các thành phần của document có class là content. Và .addClass() là phương thức inject một class mới vào đối tượng.
Một số cách chọn:
* Chọn theo tên Tag, ví dụ: $('p')
* Chọn theo ID, ví dụ: $('#author')
* Chọn theo class, ví dụ: $('.content')
* Chọn các phần tử con ta dùng thêm > , ví dụ: $('#select-id > li') (chọn tất cả các phần tử trong list)
* Chọn và loại trừ một số phần tử, ví dụ: $('#select-id > li:not(.current)') (loại bỏ phần tử có class current trong tập hợp chọn được)
* Chọn theo thuộc tính của Tag, ví dụ: $('img[alt]') hoặc $('a[href^=mailto:]') hoặc $('a[href$=.pdf]') (chú ý: dấu ^ có nghĩa là bắt đầu bằng, dấu $ có nghĩa là kết thức bằng)
* Chọn kết hợp, ví dụ: $('a[href^=http][href*=zend]') (chọn tất cả các Tag a có thuộc tính href bắt đầu bằng http và chứa chữ zend
* Chọn phần tử theo Index trong tập hợp chọn được, ví dụ: $('#select-id > li:eq(2)') (chọn phần tử thứ 3 _ vì index tính từ 0)
* Chọn tất cả các div là con đầu tiên của div chứ nó, ví dụ: $('div:nth-child(1)') hoặc $('div:first-child')
* Chọn các phần tử có index là số lẽ, ví dụ: $('#select-id > li:odd') hoặc $('#select-id > li:nth-child(even)')
* Chọn theo nội dung bên trong, ví dụ: $('.content:contains(nữa nè)')
* Chọn các thành phần trong Form
Mặc dù bạn vẫn có thể chọn bằng một số cách đã trình bày trên, jQuery cung cấp cho bạn cách chọn ngắn gọn hơn khi làm việc với Form
o :text, :checkbox, :radio, :image, :submit, :reset, :password, :file (từ khóa tương ứng với giá trị của thuộc tính type trong tag <input ...>. Chẳng hạn :text chọn <input type="text"> )
o :input (Chọn input, textarea, select, và button)
o :button (Button và input nào có thuộc tính type="button")
o :enabled, :disabled (phần tử đã enabled, disabled)
o :checked (Radio buttons hoặc checkboxes đã được chọn (checked))
o :selected (Option đã được chọn (selected)) Một số ví dụ: $(':radio:checked')
- Chọn tất cả các radio button đã được check $(':password, :text:disabled') - Chọn tất cả các password input và các disabled text input
Nguồn Vũ Mạnh Báu
