Bùi Tấn Lực - 1021
- 14/05/2024
Bùi Tấn Lực 
jQuery là gì? Đó là thư viện JavaScript mã nguồn mở xây dựng các chức năng bằng Javascript dễ dàng, tối giản hóa quá trình xử lý dữ liệu, chi tiết như nào hãy cùng chúng tôi phân tích:
jQuery là gì? Cú pháp cơ bản của jQuery
Mục Lục [Ẩn]
jQuery là gì?
jQuery là thư viện JavaScript mã nguồn mở xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn, tối giản hóa quá trình xử lý dữ liệu, DOM, HTML, CSS , tương tác Ajax ,... trên các trang web.
Xem thêm bài viết:
Lịch sử ra đời của jQuery
Vào tháng 1/2006 John Resig tại BarCamp NYC phát hành jQuery. Các nhà phát triển của Google đứng đầu trong việc phát triển đó là Timmy Wilson đã duy trì và phát triển.
Lịch sử các phiên bản ra đời của jQuery là:
Vào ngày 26/8/2006 phiên bản 1.0 ra đời
Vào ngày 14/1/2007 phiên bản 1.1 ra đời
Vào ngày 10/9/2007 phiên bản 1.2 ra đời
Vào ngày 14/1/ 2009 phiên bản 1.3 ra đời
Vào ngày 14/1/2010 phiên bản 1.4 ra đời
Vào ngày 31/1/2011 phiên bản 1.5 ra đời
Vào ngày 3/5/ 2011 phiên bản 1.6 ra đời
Vào ngày 3/11/ 2011 phiên bản 1.7 ra đời
Vào ngày 9/8/ 2012 phiên bản 1.8 ra đời
Vào ngày 15/1/ 2013 phiên bản 1.9 ra đời
Vào ngày 24/5/ 2013 phiên bản 1.10 ra đời
Vào ngày 24/1/ 2014 phiên bản 1.11 ra đời
Vào ngày 18/4/ 2013 phiên bản 2.0 ra đời
Vào ngày 24/1/ 2014 phiên bản 2.1 ra đời
Cú pháp cơ bản của jQuery
$(selector) Selector có thể là tên thẻ HTML, lớp CSS, ID CSS hoặc các thuộc tính khác của phần tử, dựa trên các điều kiện được chỉ định trong "selector" để chọn các phần tử HTML.
.action() Trên các phần tử HTML được chọn sẽ thực hiện một hành động như thêm nội dung, thay đổi nội dung, thêm hoặc xóa các thuộc tính CSS,...
Bắt đầu bằng kí tự $ hoặc jQuery trong cú pháp của jquery.
Ví dụ 1
# Lấy đối tượng có id = button-id trong jquery
var object = $('#button-id');
hoặc
var object = jQuery('#button-id');
Ví dụ 2
$('#button-id').on('click', function(){
var textbox = $('#textbox-id');
alert(textbox.val());
# $('#button-id').on('click', function(){}
# => Hàm sự kiện click vào button có id = button-id
# var textbox = $('#textbox-id');
# => Lấy ra thẻ HTML có id = textbox-id
# alert(textbox.val()); in ra giá trị của textbox.
};
Document Ready (sự kiện sẵn sàng)
Bạn cần sử dụng một sự kiện xác định sẵn tài liệu sẵn sàng để đảm bảo các đoạn mã JQuery không chạy trước khi trang đã được tải xong.
$(document).ready(function(){
// Các đoạn JQuery
});
Hành động của JQuery là thất bại nếu đoạn mã JQuery của bạn có tác động đến một class có tên “.viewsp” nhưng class này chưa được tải xong.
Sự kiện cho các phần tử trong jQuery
Cú pháp jQuery sử dụng sự kiện là một hành động đến từ người dùng hoặc trình duyệt: $ (selector).sự_kiện(Mã_thực_thi) có những sự kiện sau:
Các sự kiện thông qua hành động của “chuột”
click: Đối tượng khi được click vào.
dblclick: Đối tượng khi được double click vào.
mouseenter: Đối tượng khi được rê chuột vào.
mouseleave: Đối tượng khi được đưa chuột rời khỏi.
Các sự kiện đến từ hành động của bàn phím
keypress: Sự kiện khi phím được nhấn vào.
keydown: Sự kiện khi nhấn xuống và giữ nguyên phím.
keyup: Sự kiện khi phím được thả ra.
Các sự kiện đến từ form
submit: Khi nhấn gửi dữ liệu đi (loại button với type submit).
change: Khi giá trị trong thẻ input thay đổi.
focus: Sự kiện khi người dùng nhấn vào thẻ input hoặc dùng nút tab chuyển đến thẻ input khác.
blur: Sự kiện khi rời khỏi thẻ input.
Các sự kiện đến từ trình duyệt
load: Sự kiện khi trang đang tải.
resize: Sự kiện khi trang thay đổi kích thước tổng thể.
scroll: Sự kiện khi trang đang cuộn lên xuống.
unload: Sự kiện khi trang đang được load lại.
Lấy phần tử trong HTML
Việc tương tác với phần tử HTML sử dụng Javascript là một công việc rất gian nan và đòi hỏi lập trình viên phải viết rất nhiều các đoạn code dài để chỉ thực hiện một công việc đơn giản trước khi jQuery ra đời. Trở nên đơn giản hơn rất nhiều khi sử dụng jQuery việc tương tác với phần tử HTML.
Muốn lấy một phần tử trong HTML trong Javascript thuần bạn sẽ có cú pháp document.getElementBy{Id|Class|Tagname}("Tên_element")… Bạn có thể thấy nó rất tốn thời gian và quá dài. Để lấy ra một phần tử trong HTML bạn chỉ cần sử dụng $(selector) trong jQuery. Ví dụ:
$(this) : Chọn lấy phần tử hiện tại.
$("h1") : Chọn lấy các phần tử thẻ H1.
$(".sanpham") : Chọn lấy các phần tử có class là “sanpham“.
$("# idsanpham") : Chọn lấy phần tử có ID là “idsanpham“.
$("*") : Chọn lấy tất cả phần tử.
$("p.intro") : Chọn lấy các phần tử p có class là “intro“
$("p:first") : Chọn lấy phần tử p đầu tiên trong tài liệu HTML.
$("p:last") : Chọn lấy phần tử p cuối cùng trong tài liệu HTML.
$("ul li:first") : Chọn lấy phần tử li đầu tiên trong phần tử ul
$("[href]") : Chọn lấy các phần tử có thuộc tính href.
$("a[target='_blank']") : Chọn lấy các phần tử a có thuộc tính target='_blank'
$("a[target!='_blank']") : Chọn lấy các phần tử a có thuộc tính target nhưng không phải là '_blank'
$(":button") : Chọn lấy các phần tử button hoặc các phần tử input có loại là button.
$("tr:even") : Chọn lấy các phần tử tr chẵn trong bảng.
$("tr:odd") : Chọn lấy các phần tử tr lẽ trong bảng.
Những cách sử dụng jQuery hiện nay
Cài đặt cục bộ và sử dụng từ CDN chính là hai cách sử dụng jQuery phổ biến nhất hiện nay:
Cài đặt cục bộ
Bạn có thể đưa file jquery vào thư mục của source web sau khi tải về từ thư viện jQuery máy chủ https://jquery.com/download/ , theo cú pháp sau để có thể đưa jQuery vào HTML file:
<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>
Sử dụng CDN
Cách vô cùng đơn giản là tự thêm jQuery vào trong HTML code trực tiếp từ Content Delivery Network (CDN). Những phiên bản mới nhất được Google và Microsoft cung cấp để mang đến những tính năng đột phá, nhập lệnh sau khi sử dụng CDN Google:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://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>
Kết quả trả ra đều sẽ là “Xin chào bạn” với hai cách sử dụng trên.
Ưu điểm và Nhược điểm của jQuery
Ưu điểm của jQuery:
Chạy nhanh
Xử lý code rất nhanh và có khả năng mở rộng với jQuery.
Đơn giản, dễ sử dụng
Người dùng chỉ phải viết ít dòng lệnh với cú pháp đơn giản để tạo ra các chức năng, giúp tiết kiệm thời gian hơn cho lập trình viên
Là một thư viện lớn của javaScript
So với các thư viện javaScript khác thì có khả năng thực thi nhiều chức năng hơn.
Hiệu suất
Cải thiện hiệu suất lập trình web khi sài jQuery.
Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn)
Để giúp phát triển các plugin, JQuery có một cộng đồng người dùng lớn. Giúp đẩy nhanh quá trình viết code của lập trình viên, hàng trăm plugin được viết sẵn để có thể tải về ngay lập tức, các script này đều được đảm bảo an toàn và hiệu quả cao.
Tương thích
Các ứng dụng có tương thích với trình duyệt khi phát triển với jQuery.
Có sẵn nhiều tài liệu và hướng dẫn cụ thể
Kể cả người mới làm lập trình cũng có thể tham khảo các trang web JQuery có sẵn các bộ tài liệu và hướng dẫn chi tiết và áp dụng trong thực tế.
Hỗ trợ Ajax
Ajax còn giúp giao diện trên website trở nên thu hút hơn, có thể thực hiện các chức năng ngay trên trang mà không phải tải lại toàn bộ trang và JQuery giúp người dùng dễ dàng phát triển các template Ajax.
Nhược điểm của jQuery:
Làm chậm Client
Sẽ làm chậm Client nếu lạm dụng jQuery nhiều, đặc biệt là những Client yếu. Vì thế, lập trình viên sẽ cần phải dùng thêm cache.
Có thể không có một số chức năng
Vẫn cần đến javascript thuần để xây dựng chức năng do nhiều chức năng vẫn chưa được phát triển mặc dù jQuery sở hữu rất nhiều chức năng, tùy thuộc vào yêu cầu trên trang web.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết jQuery là gì?
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
