Nếu bạn đang học hoặc muốn học về JavaScript (hay còn gọi là JS), chắc chắn bạn cũng cần làm quen với một công cụ liên quan đến JS có tên là jQuery.
Vậy,
jQuery là gì?
Rất đơn giản, jQuery là một tập hợp Code JavaScript được các Lập trình viên tài năng viết sẵn rồi đóng gói lại (Nó còn được gọi là Thư viện JavaScript) mà bạn có thể đem ra để sử dụng trong dự án của mình.
-
Note: Nhiều người vẫn tranh cãi jQuery là một Thư viện hay là một Framework. Nhưng mình thấy rằng điều này không quan trọng. Dùng tốt là được rồi.
Nếu bạn mới bắt đầu tiếp xúc với lập trình, sử dụng jQuery giống như là "Dùng phao trong phòng thi" vậy đó.
Thực tế là đối với một số nhiệm vụ lập trình thông thường, bạn thường làm việc để "Phát minh lại bánh xe".
Ví dụ: Bạn hoàn toàn có thể sẽ tự trồng cây, chặt gỗ, xẻ gỗ... để dựng nhà của mình. Trong lập trình cũng thế. jQuery cho phép các Lập trình viên sử dụng jQuery để gọi các tính năng được đóng gói sẵn (Mà không cần phải dùng Javascritp viết lại từ đầu)
Việc này giúp cho các lập trình viên có thể tiết kiệm thời gian ngồi viết những thứ đã có sẵn (thậm chí rất tốt) để tập trung vào làm các tính năng phức tạp hơn.
Tại sao nên sử dụng jQuery?
Ngoài việc hiểu jQuery là gì, các lập trình viên cũng cần hiểu TẠI SAO lại nên sử dụng jQuery. Chúng ta sẽ cùng tìm hiểu sâu hơn về một số lý do nên sử dụng chúng ở dưới đây:
-
jQuery giúp lập trình JavaScript nhanh hơn và hiệu quả hơn
-
jQuery là mã nguồn mở (có nghĩa là bất kỳ ai cũng có thể đóng góp hoặc sửa đổi nó) và nó có một cộng đồng người dùng rất lớn, luôn được hỗ trợ và bổ sung.
-
jQuery có tài liệu hướng dẫn rất phong phú (Xem thêm về tài liệu jQuery tại đây)
-
JQuery kết hợp tốt với mọi thư viện JavaScript khác mà bạn có thể đang sử dụng
-
jQuery có hàng TẤN plug-in để hỗ trợ mở rộng các chức năng của jQuery khi cần thiết.
Đây làm một ví dụ về Menu Dropdown khi sử dụng jQuery
Điểm khác biệt chính giữa JavaScript và jQuery là gì?
JavaScript và jQuery hay đi cùng nhau và sử dụng để thay thế cho nhau nên có thể sẽ gây nhầm lẫn cho các bạn mới học lập trình.
Chỉ cần ghi nhớ: JavaScript là ngôn ngữ lập trình độc lập, trong khi jQuery là tập hợp code JavaScript (không phải ngôn ngữ riêng).
Để hiểu nhanh về sự khác biệt (và để minh họa chính xác những gì jQuery được sử dụng để làm gì), hãy xem xét những điều sau đây.
Ví dụ: Bạn muốn người dùng nhận được một lời cảm ơn vì đã đăng ký nhận thông tin qua email.
Lập trình chay bằng JavaScript thuần sẽ trông giống như thế này:
window.onload = initAll;
function initAll() {
document.getElementById("submit").onclick = submitMessage;
}
function submitMessage() {
var greeting = document.getElementById("name").getAttribute("value");
document.getElementById("headline").innerHTML =
"Cảm ơn " + greeting + " đã đăng ký nhận bài viết của chúng tôi";
return false;
}
Cần rất nhiều dòng code Javascript cho một chức năng cơ bản như vậy. Tuy nhiên, bằng cách sử dụng jQuery, bạn sẽ đơn giản hóa nó thành một chức năng dễ đọc, dễ hiểu. Ví dụ như thế này:
$("#submit").click(function() {
var greeting = $("#name").val();
$("#headline").html(
"Cảm ơn " + greeting + " đã đăng ký nhận bài viết của chúng tôi"
;);
return false;
});
Sử dụng jQuery dễ quản lý và dễ đọc hơn nhiều đúng không?
Lưu ý: Để sử dụng jQuery thì trước tiên trong thẻ <head></head> của trang HTML bạn cần phải gọi đến thư viện jQuery như sau:
<script src="https: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Cách sử dụng Javacript cũng sẽ tạo ra một thông báo cảm ơn, nhưng một tập lệnh jQuery sẽ làm việc này nhanh hơn và hiệu quả hơn.
Hơn nữa, bạn sẽ có thể sử dụng lại hàm jQuery này bất cứ khi nào có nhu cầu.
Một ví dụ khác vê jQuery
10 Plug-in jQuery phổ biến giúp ích cho việc lập trình web
Cũng như jQuery, để đơn giản hóa các chức năng riêng lẻ, jQuery nó có thể được mở rộng hơn nữa dưới dạng các plugin từ thư viện jQuery, kết hợp các chức năng riêng lẻ đó và tạo ra các tính năng mạnh mẽ trên web và Các tools.
Các plugin được tạo bởi người dùng jQuery dựa trên code trong thư viện jQuery và sau đó có thể được chia sẻ công khai.
Mặc dù các plugin có thể được tìm thấy ở nhiều nơi, nhưng các plugin được tìm thấy trên kho lưu trữ jQuery UI chính thức có thể được coi là rất an toàn và mạnh mẽ, vì chúng được quản lý bởi cộng đồng chuyên nghiệp.
Để tìm hiểu kỹ hơn việc jQuery có thể làm được gì, dưới đây là 10 Plugin jQuery có sẵn từ trang jQuery.
1. Effect: Plug-in jQuery tạo hiệu ứng mạnh mẽ
Effect là một plugin jQuery đơn giản cho phép bạn gán một số hiệu ứng animation cho các thành phần trên trang web.
Các nút bấm được chỉ định với hiệu ứng bạn mong muốn được chọn sẽ khiến thành phần của trang web hoạt động theo các cách khác nhau nảy nảy, biến mất, trượt, mờ dần, v.v.
2. TaggingJS: Hỗ trợ tạo thẻ Tag phân loại nội dung
Bạn đã bao giờ thử sử dụng một thẻ phân loại bài viết trên blog bao giờ chưa? (Ví dụ Hashtag trên Facebook). Rất có thể, tính năng này cũng được viết bằng Javascript.
Plug-in TaggingJS của jQuery sẽ cho phép bạn thêm hệ thống gắn thẻ vào trang web của mình một cách nhanh chóng.
Chỉ với một thẻ tag, bạn có thể nhóm các bài viết liên quan đến cùng chủ đề lại với nhau. Bằng cách này, Google có thể xếp hạng thẻ Tag của bạn lên trên Google tìm kiếm khá tốt đấy.
3. Autocomplete: Hỗ trợ dự đoán từ ngữ
Bạn có biết thanh tìm kiếm trên các trang web lớn như Google.com có tính năng tự động hoàn thành hoặc cung cấp thêm các đề xuất để hoàn thành nội dung bạn đang gõ không?
Bạn cũng có thể thêm chức năng tương tự vào trang web của mình với plugin Autocomplete của jQuery này.
Bạn có thể thêm danh sách các thuật ngữ tự động hoàn thành của riêng bạn vào plugin này để gia tăng trải nghiệm tìm kiếm tốt hơn.
4. Scrollmagic: Plug in hỗ trợ hiệu ứng cuộn
Plugin ScrollMagic sử dụng code jQuery để làm động các thành phần trang web dựa trên định vị của thanh cuộn (thanh bên phải của cửa sổ trình duyệt cho phép bạn cuộn trang web lên và xuống).
Bạn có thể tạo animation khi cuộn trang hoặc đồng bộ hóa animation với vị trí cuộn.
5. Fine Uploader: Plug in hỗ trợ chức năng upload
Bạn đã từng sử dụng một trong những trang web nào đó để tải lên một hình ảnh trong đó bạn có thể kéo thả hình ảnh hoặc nhấp vào nút để chọn file hình ảnh từ máy tính của mình chưa?
Chắc chắn là RỒI! Vì chức năng upload ảnh lên facebook cũng tương tự như thế.
Đây một ví dụ hàng ngày bạn vẫn sử dụng, và bạn phải biết rằng tự viết chức năng này bằng Javascript thì rất khổ đấy.
Thay vào đó, Plugin Fine Uploader của jQuery cho phép các lập trình viên web bỏ qua các bước khó khăn này một cách nhanh chóng.
6. Blueimp Gallery: Plugin hỗ trợ tạo thư viện ảnh
Blueimp Gallery là một thư viện jQuery hỗ trợ tạo thư viện hình ảnh responsive (Hiển thị tốt trên PC và Mobile).
Nó có thể được điều khiển bằng bàn phím và chuột trên máy tính để bàn hoặc bằng cách vuốt trên điện thoại hoặc máy tính bảng.
Plugin này có thể được thiết lập để hiển thị hình ảnh hoặc video ở định dạng băng chuyền và cũng có thể hiển thị hình ảnh ở chế độ lightbox.
7. Slick: Plug in hỗ trợ tạo carousel thú vị
Slick là một thư viện jQuery cho phép tạo Carousel với nhiều kiểu khác nhau thú vị hơn Blueimp Gallery ở trên.
Slick cho phép trình chiếu một hình ảnh hay nhiều hình ảnh, "lazy loading", và nhiều hiệu ứng khác.
8. Slider: Plugin hỗ trợ tạo slide đẹp
Slide là một tính năng rất phổ biến trên các trang web. Chính vì thế, jQuery có Plug in để hỗ trợ tạo chức năng này nhanh chóng, đẹp đẽ.
Plugin Slider này sử dụng thư viện jQuery để gán các giá trị số trên thanh ngang. Thanh trượt sau đó có thể được di chuyển lên và xuống thanh bằng phím mũi tên chuột hoặc bàn phím.
9. Infinite Ajax Scroll: Cuộn không ngừng
Một trong những hàm liên quan đến JavaScript mà jQuery có thể đơn giản hóa dành cho các lập trình viên gọi là AJAX.
Mặc dù có thể bạn chưa biết về AJAX là gì, nhưng tóm lại, nó lấy nội dung từ máy chủ và tải nó trên chính trang người dùng đang xem mà không cần phải tải lại trang.
Plugin Infinite AJAX Scroll này sử dụng AJAX để tải thêm nội dung trên một trang khi người dùng tiếp tục cuộn xuống (Thay vì phải nhấn Next và tải trang mới)
Bạn có thể thấy hiệu ứng ở trên Facebook, chính là chức năng mà khi bạn cuộn không ngừng trên newfeed và nội dung cứ tiếp tục đẩy về mà không cần load lại trang.
10. AnimateScroll: Plug in hỗ trợ cuộn đến vị trí định sẵn
Plugin AnimateScroll này giúp bạn tạo ra các menu, khi người dùng click vào từng menu thì sẽ chuyển đến nội dung của phần đó, hoặc...
Khi người dùng thao tác cuộn trên trang web, cuộn đến phần nội dung tương ứng thì hiệu ứng active cũng kích hoạt trên menu tương ứng. (Bạn có thể xem ví dụ tương tự như thế ở trang Giới thiệu về NIIT -ICT Hà Nội)
Bạn đã sẵn sàng học jQuery chưa?
jQuery là một thư viện Javascript mạnh mẽ sẽ giúp các kỹ năng lập trình Javascript của bạn trở nên hiệu quả và nhanh hơn rất nhiều.
Cách jQuery sinh ra cũng nói lên bản chất chung của việc lập trình:
Tất cả các plugin này là nỗ lực của các lập trình viên tài năng đang tìm cách tối đa hóa lợi ích từ JavaScript và jQuery và chia sẻ các thành quả đó với cộng đồng.
Ngay cả khi các kỹ năng lập trình Javascript của bạn được cải thiện, bạn có thể (và nên) tiếp tục sử dụng các công cụ này, thậm chí đóng góp để phát triển jQuery hoặc các thư viện khác cho cộng đồng.
Và nếu bạn đã sẵn sàng tìm hiểu về Lập trình jQuery / Javascript hay Lập trình Web. Khóa học Lập trình Web với PHP tại NIIT sẽ hướng dẫn bạn kỹ càng về cách sử dụng jQuery hiệu quả.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543 - 0353655150
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp