Jquery là gì?
jQuery là một thư viện JavaScript đa tính năng, nhỏ gọn, nhanh, được tạo bởi John Resig vào năm 2006 với một phương châm hết sức ý nghĩa: Write less, do more – Viết ít, làm nhiều (do mã JavaScript thông thường mất nhiều ký tự hơn cho một chức năng), giúp đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt ảnh và tương tác Ajax để phát triển web nhanh chóng. Các phân tích web đã chỉ ra rằng, jQuery là thư viện JavaScript được triển khai rộng rãi nhất. jQuery là một bộ công cụ JavaScript được thiết kế để đơn giản hóa các tác vụ khác nhau bằng cách viết ít code hơn. Dưới đây liệt kê một số tính năng và ưu điểm của Jquery
- Thao tác với DOM, Jquery dễ dàng lấy, chọn, sửa các phần tử DOM một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung động.
- Xử lý sự kiện: Jquery cung cấp cho chúng ta cực kỳ đa dạng các sự kiện như bàn phím (keyup, keydown), chuột (mouseout, mousehover…) nếu như với mã JavaScript thuần những đoạn code này sẽ khá dài thì với Jquery nó sẽ chỉ ngắn gọn 1 dòng mà thôi.
- Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX.
- Hiệu ứng động − jQuery đi kèm với rất nhiều hiệu ứng động đẹp mà bạn có thể sử dụng cho các website của mình.
- Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB (gzipped)
- Được hỗ trợ hầu hết bởi các trình duyệt hiện đại, hoạt động tốt cả trên PC lẫn Mobile.
- Được hỗ trợ cập nhật lâu dài, cộng đồng người sử dụng đông đảo.
Cách sử dụng jQuery?
Có 2 cách sử dụng Jquery
1. Cài đặt cục bộ
Bạn truy cập https://jquery.com/download/ và tải phiên bản mới nhất về máy, sau đó bạn đặt file jquery vào trong website của bạn, chúng sẽ có dạng như sau:
2. Sử dụng CDN
Bạn có thể đưa thư viện Jquery trực tiếp từ CDN (Content Delivery Network). Hiện tại có khá nhiều nhà cung cấp CDN cho thư viện này, từ CloudFlare, Google, Microsoft… bạn vào link bên dưới và tìm bản mới nhất nhé:
CDN Google: https://developers.google.com/speed/libraries
CDN CloudFlare https://cdnjs.com/libraries/jquery
Về vị trí đặt của Jquery bạn có thể đặt trong thẻ <head> cũng được hoặc ở footer điều được, bạn chỉ cần lưu ý một điều đó là Jquery cũng tương tự như Javascript, chúng cần có DOM để thao tác, do đó nếu bạn đặt Jquery và script của bạn trong cặp thẻ head bạn cần có thêm hàm sau để đảm bảo toàn bộ HTML đã được tải trước khi chạy mã script:
$(document).ready(function() {
// thực hiện khi DOM sẵn sàng
});
Còn nếu như bạn đặt ở cuối html thì có thể không cần vì khi này html đã được tải xong mới đến Jquery. Tuy nhiên chúng ta nên ưu tiên sử dụng cách 1 đó là đặt vào cặp thẻ head
Sử dụng Jquery cơ bản
Về cơ bản cú pháp jQuery được thiết kế riêng để chọn các phần tử HTML và thực hiện một số hành động trên các phần tử.
Cú pháp cơ bản là: $(selector).action()
$(selector) là bộ chọn, nó có thể là id, class, hoặc cả một thẻ html, về cơ bản bộ chọn này cũng tương tự như bộ chọn CSS vậy.
Action() là thực hiện hành động gì đối với bộ chọn đó, ví dụ như lấy giá trị, sửa giá trị, xóa giá trị, thêm CSS, xóa CSS v.v…
Ví dụ:
$(document).ready(function() {
$(“.test”).hide();
});
Đoạn code trên có nghĩa là sau khi tải xong DOM máy tính sẽ thực hiện ẩn tất cả các thẻ có class là .test
Qua bài viết này mình đã trình bày sơ lược về Jquery, một thư viện cực kỳ hữu ích đối với lập trình viên, nó giúp tối ưu việc viết code, làm code gọn hơn, dễ debug hơn. Và hướng dẫn các bạn chèn Jquery vào mã nguồn, chúc các bạn thành công và sớm hoàn tất Project của mình.
