Jquery là gì?
jQuery là một thư viện được xây dựng từ Javascript nhằm giúp lập trình viên xây dựng những chức năng có sử dụng Javascript trở nên dễ dàng hơn. jQuery được tích hợp nhiều module khác nhau từ module hiệu ứng cho đến module truy vấn selector. jQuery được sử dụng đến 99% trên tổng số website trên thế giới (trừ những website sử dụng JS Framework).
Các module chính của jQuery bao gồm:
Ajax – xử lý Ajax
Atributes – Xử lý các thuộc tính của đối tượng HTML
Effect – xử lý hiệu ứng
Event – xử lý sự kiện
Form – xử lý sự kiện liên quan tới form
DOM – xử lý Data Object Model
Một số tính năng tối ưu quan trọng được hỗ trợ bởi jQuery:
Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.
Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler.
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 − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn có thể sử dụng trong 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 − jQuery được hỗ trợ hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+
Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú pháp XPath cơ bản.
Cách sử dụng jQuery?
Có hai cách để sử dụng jQuery:
Cài đặt cục bộ − Bạn có thể tải jQuery Library trên máy của bạn và đưa nó vào trong code HTML.
Sử dụng từ CDN (CDN Based Version) − Bạn có thể đưa thư viện jQuery vào trong code HTML một cách trực tiếp từ Content Delivery Network (CDN).
Cài đặt jQuery nội bộ
Truy cập trang https://jquery.com/download/ để tải phiên bản jQuery mới nhất. Bây giờ đặt file jquery-2.1.3.min.js vào trong một thư mục trong Website của bạn, ví dụ /jquery.
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="../jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ document.write("Xin chào bạn!"); }); </script> </head> <body> <h1>Hello</h1> </body> </html>
Nó sẽ cho kết quả:
Xin chào bạn!
Sử dụng CDN
Bạn có thể đưa thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network (CDN). Google và Microsoft cung cấp phiên bản mới nhất.
Trong loạt bài này, chúng tôi sử dụng Google CDN.
Ví dụ
Bây giờ chúng ta viết lại ví dụ trên bằng cách sử dụng thư viện jQuery từ Google CDN.
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ document.write("Xin chào bạn!"); }); </script> </head> <body> <h1>Hello</h1> </body> </html>
Nó sẽ cho kết quả:
Xin chào bạn!
Cách để gọi một hàm thư viện jQuery?
Cũng tương tự như JavaScript, trước khi chúng ta sử dụng các đoạn code của jQuery để đọc hay chỉnh sửa các đối tượng DOM, chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện ngay sau khi DOM sẵn sàng.
Nếu bạn muốn một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong hàm $(document).ready(). Mọi thứ bên trong sẽ tải ngay sau khi DOM được tải và trước khi nội dung trang được tải.
Để làm điều này, chúng ta đăng ký một sự kiện đã sẵn sàng cho tài liệu như sau:
$(document).ready(function() { // thực hiện khi DOM sẵn sàng });
Để gọi bất kỳ hàm thư viện jQuery nào, sử dụng các thẻ HTML script như dưới đây:
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function() {alert("Xin chào bạn!");}); }); </script> </head> <body> <div id="mydiv"> Nhấp vào đây để xem hộp hội thoại. </div> </body> </html>
Nó sẽ cho kết quả sau:
Nhấp vào đây để xem hộp hội thoại.
Cách sử dụng Custom Script trong jQuery?
Tốt hơn là viết code tùy chỉnh trong tệp JavaScript tùy chỉnh, có tên custom.js như sau:
/* Filename: custom.js */ $(document).ready(function() { $("div").click(function() { alert("Xin chào bạn!"); }); });
Bây giờ chúng ta đưa custom.js này vào trong HTML file như sau:
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" src="../custom.js"></script> </head> <body> <div id="mydiv"> Nhấp vào đây để xem hộp hội thoại. </div> </body> </html>
Nó sẽ cho kết quả sau:
Sử dụng nhiều thư viện trong jQuery
Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xảy ra xung đột giữa chúng. Ví dụ, bạn có thể sử dụng các thư viện jQuery và thư viện MooTool JavaScript cùng với nhau.
Bạn có muốn tìm hiểu thêm các ngôn ngữ khác không? Bạn có thể xem trang web của chúng tôi nhiều hơn nhé!
Sưu tầm
