Trong quá trình học lập trình web, có lẽ JavaScript sẽ là phần khó nhằn nhất với tất cả mọi người do có cú pháp và câu lệnh phức tạp, khó nhớ. Chính vì vậy, đã có nhiều thư viện JavaScript như jQuery, MooTools,… ra đời để giúp các lập trình viên viết JavaScript một cách nhanh chóng và đơn giản hơn. Trong số các thư viện đó thì jQuery là thư viện được ưu chuộng nhất do tính dễ học và tính năng đa dạng của nó.
Khái niệm jQuery là gì?
jQuery là một thư viện JavaScript hỗ trợ lập trình viên viết các đoạn mã nhanh hơn, ngắn gọn hơn và đơn giản hơn. jQuery có thể tương tác với hệ thống HTML DOM, tạo ra các hiệu ứng, xử lí sự kiện và cung cấp các API đơn giản cho việc sử dụng Ajax. jQuery có độ tương thích cao với hầu hết các trình duyệt web như Chrome, Firefox, Safari, Internet Explorer,… jQuery có lẽ là thư viện JavaScript phổ biến nhất hiện nay và nó được phát hành dưới dạng miễn phí mã nguồn mở với giấy phép MIT.
Lịch sử hình thành jQuery
Phiên bản jQuery đầu tiên được phát hành vào tháng 1 năm 2006 tại New York bởi John Resig, chịu ảnh hưởng của thư viện cssQuery trước đây của Dean Edwards. Hiện jQuery đang được duy trì bởi một nhóm các nhà phát triển do Timmy Willison dẫn đầu.
jQuery ban đầu có giấy phép CC BY-SA 2.5 và được cấp lại thành giấy phép MIT vào năm 2006. Vào cuối năm 2006, nó được cấp phép kép theo giấy phép GPL và MIT. Vì điều này dẫn đến một số nhầm lẫn, vào năm 2012, GPL đã bị loại bỏ và hiện chỉ được cấp phép theo giấy phép MIT.
- Trong năm 2015, jQuery đã được sử dụng trên 62,7% trong số 1 triệu trang web phổ biến nhất (theo BuildWith) và 17% của tất cả các trang web Internet.
- Trong năm 2017, jQuery đã được sử dụng trên 69,2% trong số 1 triệu trang web phổ biến nhất (theo Libscore).
- Năm 2018, jQuery đã được sử dụng trên 78% trong số 1 triệu trang web phổ biến nhất.
- Năm 2021, jQuery đã được sử dụng trên 80% trong số 1 triệu trang web phổ biến nhất (theo BuildWith) và 74,1% trong số 10 triệu phổ biến nhất (theo W3Techs).
- Tính đến tháng 2 năm 2021, jQuery được sử dụng bởi 74,4% trong số 10 triệu trang web phổ biến nhất (theo W3Techs).
Tính năng của jQuery
jQuery có rất nhiều tính năng và có thể nhóm lại thành các tính năng chính như sau:
1. Xử lí sự kiện
jQuery có thể bắt sự kiện tạo ra bởi người dùng hoặc gán sự kiện cho các đối tượng trên trang web như sự kiện click chuột, sự kiện hover, sự kiện nhấn phím, sự kiện cuộn trang và các sự kiện khác.
2. Tương tác với HTML DOM
jQuery có thể tạo ra hoặc thay đổi các thuộc tính của thẻ HTML bao gồm cả class. jQuery cũng có thể thay đổi CSS của các đối tượng này.
3. Tạo ra các hiệu ứng chuyển động
jQuery có thể tạo ra các hiệu ứng cho đối tượng HTML như fade (làm mờ), slide (trượt), ẩn, hiện,…
4. Xử lí Ajax
jQuery cũng cấp các hàm API để đơn giản hóa việc sử dụng Ajax cho lập trình viên. Các cú pháp được rút gọn lại giúp code của trang web ngắn gọn và dễ hiểu.
Ưu – nhược điểm của jQuery
* Ưu điểm của jQuery
1. Dễ học, dễ tiếp cận
Các cú pháp của jQuery rất đơn giản và dễ hiểu. Bạn chỉ cần nắm vững được CSS là đã nắm được 50% cách sử dụng của jQuery. Ngoài ra, các hàm của jQuery rất gần với ngôn ngữ đời thường nên rất dễ nhớ.
2. Cú pháp ngắn gọn
Để làm cũng 1 việc, nếu bạn sử dụng JavaScript thuần thì số lượng code có thể nhiều gấp đôi hoặc hơn so với khi sử dụng jQuery.
3. Xây dựng sẵn rất nhiều hàm, tiết kiệm thời gian và công sức cho lập trình viên
Số lượng các hàm của jQuery là vô cùng lớn, bạn sẽ không thể nhớ và biết cách sử dụng tất cả các hàm jQuery trong một hai ngày, nhưng tài liệu jQuery luôn sẵn sàng để bạn có thể tra cứu bất cứ khi nào bạn cần.
4. Tương thích với nhiều trình duyệt web
jQuery hiện tương thích với hầu hết các trình duyệt web trên thế giới, bao phủ đến hơn 90% thị phần trình duyệt web nên bạn hoàn toàn có thể yên tâm với tính tương thích của jQuery khi sử dụng. Hiện phiên bản 3.x của jQuery tương thích với các trình duyệt sau:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Internet Explorer (phiên bản 9 trở lên)
- Safari
- Opera
- Và nhiều trình duyệt khác
5. Có cộng đồng người dùng lớn
Do tính phổ biến cũng như tính mở của jQuery, cộng đồng hỗ trợ và phát triển của thư viện này là vô cùng lớn. Có rất nhiều plugin hỗ trợ trong quá trình lập trình web sử dụng jQuery, và chúng đều dễ dàng tìm và tải về (có cả miễn phí) trên Internet.
* Nhược điểm của jQuery
Có lẽ nhược điểm duy nhất của jQuery chính là việc chúng ta phải nhúng thêm 1 thư viện vào trang web. Mặc dù jQuery rất tiện lợi và nhiều tính năng, nhưng không phải lúc nào chúng ta cũng khai thác hết tất cả những chức năng đó trên trang web của mình. Khi đó việc nhúng thư viện jQuery cũng một phần làm trang web nặng hơn mặc dù không đáng kể. Tuy nhiên chúng ta hoàn toàn có thể đánh đổi vì những tiện ích của jQuery mang lại là rất lớn.
Cách cài đặt jQuery đơn giản
Bạn có thể dễ dàng cài đặt jQuery cho trang web của mình bằng 2 cách sau:
– Tự tải về thư viện của jQuery tại trang chủ: https://jquery.com/download/ và đưa vào code của website
– Sử dụng sẵn CDN của jQuery mà không cần tải về
– Nhúng thư viện jQuery vào website với cú pháp sau:
<script src=”đường_dẫn_tới_thư_viện_jQuery”></script>
Hướng dẫn sử dụng jQuery cơ bản
Trước khi có thể sử dụng jQuery, bạn cần nắm vững kiến thức về HTML, CSS và nắm cơ bản kiến thức của JavaScript.
Cú pháp của 1 câu lệnh jQuery có dạng như sau: $(selector).func();
Trong đó selector là đối tượng mà chúng ta muốn tác động đến; func là tên hàm sẽ áp dụng. Chúng ta cũng có thể áp dụng liên tiếp nhiều hàm cho 1 đối tượng với cú pháp: $(selector).func1().func2().func3();
Cách chọn đối tượng (selector) trong jQuery giống với cách chọn đối tượng của CSS
Một số cách chọn đối tượng cơ bản của jQuery:
| $(this) | Chọn đối tượng hiện tại (đơn lẻ) |
| $(document) | Chọn đối tượng toàn bộ tài liệu (đơn lẻ) |
| $(window) | Chọn đối tượng cửa sổ hiện hành (đơn lẻ) |
| $(“div”) | Chọn tất cả các thẻ <div> (nhiều) |
| $(“#vidu1”) | Chọn thẻ có id=“vidu1” (đơn lẻ) |
| $(“.vidu2”) | Chọn tất cả các thẻ có class=“vidu2” (nhiều) |
Ngoài ra, bạn có thể tìm hiểu các cách chọn đối tượng khác và các quy định sử dụng hàm của jQuery tại địa chỉ: https://api.jquery.com/
Kết bài
Trên đây là những chia sẻ của cloudlanes về thư viện JavaScript – jQuery. Hi vọng sẽ giải đáp được những thắc mắc của các bạn về vấn đề này.
