Đôi khi bạn bắt gặp những hiệu ứng ẩn hiện, hoặc những chuyển động đẹp mắt khi truy cập một số website. Bạn tự hỏi: "Làm thế nào để thực hiện được điều đó ?". Có rất nhiều cách để tạo ra những hiệu ứng cho website như sử dụng CSS, Javascript và ngày nay rất nhiều lập trình viên sử dụng jQuery.
Vậy jQuery là gì? cách sử dụng jQuery như thế nào? Mời các bạn cùng đọc qua bài viết đầu tiên này trong chuỗi bài viết về jQuery Tutorial với mục đích tìm hiểu, hướng dẫn sử dụng, học jQuery Online từ cơ bản đến nâng cao một cách hiệu quả nhất và cùng cảm nhận những lợi ích mà jQuery mang lại.
jQuery là gì?
Trước khi có ý định tìm hiểu và học jQuery, Lời khuyên của mình là việc đầu tiên bạn phải cần tìm hiểu những kiến thức cơ bản về thiết kế website bao gồm:- Ngôn ngữ HTML
- CSS
- Javascript
Click vào button dưới đây:
CLICK thử để xem hiệu ứng jQuery mang đến
Bạn có thấy không? Khi bạn bấm vào thì nút trên sẽ tự biến mất. Đó là một ví dụ đơn giản nhất về jQuery.
Dưới đây là đoạn mã sử dụng jQuery để thực hiện: có ý nghĩa là khi click chuột vào thành phần có class là vd1
$(".vd1").click(function(){}); thì thành phần đó sẽ bị ẩn đi $(this).hide()
$(document).ready(function(){
$(".vd1").click(function(){
$(this).hide();
});
});
Vậy thực chất jQuery là gì? jQuery được John Resig tạo ra từ năm 2006, đây chính là javascript được tổng hợp, tổ chức thành một thư viện, mà ở đó bạn có thể sử dụng những tính năng một cách dễ dàng, đơn giản. Và quả thực jQuery rất dễ học, điều này được thể hiện từ tinh thần từ Sologon mà jQuery mang đến : "Write less, Do more" - Viết ít, làm nhiều
Nói cách khác, mục đích mà jQuery mang lại là giúp bạn ít phải viết javascript hơn. Chẳng hạn cùng thực hiện một việc giống nhau, nhưng javascript phải dành 10 dòng code để viết. Trong khi đó, khi sử dụng jQuery, bạn chỉ cần 1 dòng là làm được điều mình muốn.
Các chức năng của jQuery và sự phổ biến
Tương tự javascript, thì jQuery cũng có thể thực hiện được các chức năng sau:- Thao tác trên HTML/DOM.
- Thao tác với CSS.
- Xử lý những phương thức sự kiện HTML.
- Tạo những hiệu ứng và chuyển động.
- AJAX.
- Tiện ích.
- Microsoft
- IBM
- Netflix
Hướng dẫn Cài đặt jQuery
Để cài đặt jQuery cho website bạn có thể tải về từ jQuery.Com hoặc sử dụng những thư viện jQuery từ CDN như của Google, Cloudflare...Tại jQuery.Com có 2 phiên bản sau đây:
- jQuery Production version - đây là phiên bản khuyên dùng vì đã được nén lại nhỏ gọn (minified & compressed) giúp tối ưu tốc độ tải cho trang web của bạn, giúp website load nhanh hơn.
- jQuery Development version - đây là phiên bản không nén và thu gọn nên có kích thước cao hơn, nặng hơn. Thường dành cho những tester hoặc lập trình viên nghiên cứu và phát triển.
<head> và thẻ </head> bằng cặp thẻ<script src="link-jquery"></script>. Trong đó link-jquery là đường dẫn đến file jQuery tải về hoặc link từ CND nhé các bạnCụ thể như sau
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
Trường hợp nếu các bạn không muốn tải jQuery về thư mục website của mình, thì các bạn có thể sử dụng jQuery từ CDN
Ví dụ như dùng jQuery từ CDN của Google như sau
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
jQuery CDN Cloudflare.com:
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.js
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js
jQuery CDN jQuery.com:
- https://code.jquery.com/jquery-3.5.1.js
- https://code.jquery.com/jquery-3.5.1.min.js
- https://code.jquery.com/jquery-3.5.1.slim.js
- https://code.jquery.com/jquery-3.5.1.slim.min.js
Lịch sử phát triển của jQuery
jQuery được phát hành lần đầu tiên vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC, hiện đang được lãnh đạo bởi Timmy Wilson và được duy trì bởi một nhóm các nhà phát triển.Phiên bản mới nhất hiện tại là jQuery 3.5.1 được phát hành vào ngày 10 tháng 4 năm 2020.
jQuery đã cải tiến và phát triển rất nhiều so với trước đây, cùng xem bảng dưới đây để biết rõ hơn về lịch sử phát triển, nâng cấp phiên bản của jQuery
| Version | Ngày phát hành |
|---|---|
| 1.0 | 26/08/2006 |
| 1.1 | 14/01/2007 |
| 1.2 | 10/09/2007 |
| 1.3 | 14/01/2009 |
| 1.4 | 14/01/2010 |
| 1.5 | 31/01/2011 |
| 1.6 | 03/05/2011 |
| 1.7 | 03/11/2011 |
| 1.8 | 09/08/2012 |
| 1.9 | 15/01/2013 |
| 1.10 | 24/05/2013 |
| 1.11 | 24/01/2014 |
| 2.0 | 18/04/2013 |
| 2.1 | 24/01/2014 |
| 2.2 | 08/01/2016 |
| 3.0 | 09/06/2016 |
| 3.1 | 07/06/2016 |
| 3.2 | 16/03/2017 |
| 3.3 | 19/01/2018 |
| 3.4 | 10/04/2019 |
| 3.5 | 10/04/2020 |
