JS - jQuery là gì ? tổng quan về jQuery
by My Love
12/04/2019, 3:39 PM | 12/04/2019, 3:40 PM | 573 | 039
jQuery là một thư viện của
JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm : Write less, do more - Viết ít hơn, làm nhiều hơn. Thật vậy, khi bạn học xong jQuery sẽ thấy là code bằng jQuery ngắn gọn hơn nhiều so với code bằng javascript đơn thuần. Hiện nay ứng dụng thực tiễn của jQuery là rất phổ biến, các dự án từ nhỏ đến lớn hầu như đều sử dụng jQuery. Để học tốt jQuery thì theo mình bạn nên học qua về
Javascript vì jQuery và Javascript có những khái niệm cơ bản tương đồng nhau mà mình không nhắc lại trong series này.
1. Cách khai báo, sử dụng jQuery
jQuery khác với
javascript thuần là nếu bạn muốn sử dụng jQuery thì phải thêm thư viện cho nó, còn với javascript thì các trình duyệt web đã hỗ trợ sẵn cho bạn rồi. Có hai cách thêm thư viện cho jQuery như sau :
Cách 1 : Cài đặt nội bộ vào dự án của bạn
Có nhiều phiên bản jQuery bạn có thể tùy chọn, để tải bản mới nhất bạn vào đường link :
https://jquery.com/download/ để tải về. Sau khi tải được phiên bản thích hợp về máy, ví dụ bạn tải được file
jquery-1.12.4.min.js về sau đó copy vào thư mục
jquery trong project. Tiếp theo bạn đặt đường dẫn đến thư viện jQuery vào trang html như sau :
<html>
<head>
<title>Học jQuery</title>
<script type="text/javascript" src="../jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
</body>
</html>
Bây giờ bạn có thể bắt đầu sử dụng jQuery rồi.
Cách 2 : Sử dụng CDN
Bạn có thể thêm thư viện jQuery vào trong HTML code trực tiếp từ Content Delivery Network (CDN). Hiện nay có nhiều trang hỗ trợ CDN như google, microsoft, cdnjs ...
Ví dụ : Sử dụng google CDN
<html>
<head>
<title>Học jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
</body>
</html>
2. Viết hàm jQuery đầu tiên
Khai báo Query bắt đầu bằng kí tự đô la và dấu ngoặc đơn
$(), nó cũng đồng nghĩa với cách viết sau
jQuery(). Trong trường hợp bạn sử dụng nhiều thư viện javascript gây sung đột thì có thể thay
$() thành
jQuery().
Ví dụ : ta viết hàm cơ bản sau :
<html>
<head>
<title></title>
<script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
alert('Xin chào');
});
</script>
</head>
<body>
</body>
</html>
Ở ví dụ trên câu lệnh :
<script language="javascript">
$(document).ready(function(){
// code
});
</script>
tương đương với lệnh sau trong javascript :
<script language="javascript">
window.onload = function()
{
// code
};
</script>
Có ý nghĩa là khi trình duyệt tải xong mọi thứ thì các lệnh bên trong mới được thực thi, bạn có thể xem sự kiện
onload trong javascript.