Nội dung chính
jQuery là gì?
jQuery là một thư viện kiểu mới nhanh, nhỏ, đa nền tảng và giàu tính năng được viết từ JavaScript. Nó được thiết kế để đơn giản hóa các kịch bản phía máy khách của HTML. JQuery cung cấp các API giúp việc duyệt tài liệu HTML, thao tác, hoạt ảnh, xử lý sự kiện, và theo tác AJAX đơn giản hơn. JQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau.
- jQuery là một thư viện nhỏ, nhanh của JavaScript.
- jQuery là một độc lập nền tảng (platform-independent).
- Ý tưởng vĩ đại của JQuery đó là "write less do more" có nghĩa là "viết ít làm nhiều".
- jQuery đơn giản hóa các thao tác AJAX và DOM.
Các tính năng của jQuery
- Thao tác (chèn, sửa, xóa) HTML
- Thao tác (chèn, sửa, xóa) DOM
- Thao tác (chèn, sửa, xóa) CSS
- Tạo hiệu ứng và hoạt ảnh
- Cung cấp các tiện ích
- Thao tác với AJAX
- Các phương thức xử lý sự kiện HTML
- JSON Parsing
- Khả nẳng mở rộng thông qua các plug-in
Tại sao nên sử dụng jQuery?
Đôi khi bạn tự hỏi tại sao nên sử dụng jQuery? hoặc Vì sao nên sử dụng jQuery thay vì AJAX / JavaScript? Câu trả lời sẽ là:
- Nó rất nhanh và có khả năng mở rộng.
- Nó tạo điều kiện cho người dùng viết các mã chức năng liên quan đến giao diện người dùng bằng các dòng tối thiểu.
- Cải thiện hiệu suất.
- Các ứng dụng web tương thích của trình duyệt có thể được phát triển.
- Nó sử dụng hầu hết các tính năng mới của các trình duyệt mới.
Vì vậy, có thể nói rằng trong các framework của JavaScript, jQuery được sử dụng phổ biến nhất. Nhiều công ty lớn nhất trên thế giới sử dụng jQuery, ví dụ như Microsoft, Google, IBM, Netflix, etc.
Lịch sử của jQuery
JQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. Nó hiện đang được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là Timmy Wilson.
Ngày nay, jQuery được sử dụng khá rộng rãi. Hầu hết các trang web đang sử dụng jQuery.
Dưới đây là lịch sử các phiên bản của jQuery:
| Version No. | Release Date |
|---|---|
| 1.0 | 26,August,2006 |
| 1.1 | 14,January,2007 |
| 1.2 | 10, September, 2007 |
| 1.3 | 14, January, 2009 |
| 1.4 | 14, January, 2010 |
| 1.5 | 31, January, 2011 |
| 1.6 | 3, May, 2011 |
| 1.7 | 3, November, 2011 |
| 1.8 | 9, August, 2012 |
| 1.9 | 15, January, 2013 |
| 1.10 | 24,May, 2013 |
| 1.11 | 24, January, 2014 |
| 2.0 | 18, April, 2013 |
| 2.1 | 24, January, 2014 |
Sử dụng jQuery
1. Chuyển bị file jQuery.
Trước tiên, để sử dụng jQuery bạn cần sử dụng tệp JavaScript cho jQuery. Bạn có thể tải tệp jQuery từ jquery.com/download. Hoặc sử dụng URL tuyệt đối của tệp jQuery như sau:
http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js
Trong đó, x.x.x là version của jQuery bạn muốn sử dụng.
2. Liên kết jQuery với HTML
Tiếp theo, bạn cần phải liên kết jQuery với HTML. Để liên kết jQuery với HTML, chúng ta sử dụng thẻ script với thuộc tính type="text/javascript" và thuộc tính src="đường dẫn đến file jQuery"
Ví dụ 1: liên kết với 1 URL tuyệt đối.
<head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> ... </head>
Ví dụ 1: liên kết với file mà bạn tải về.
<head> ... <script type="text/javascript" src="js/jquery.2.1.4.min.js"> </script> ... </head>
3. Ví dụ sử dụng jQuery
Dưới đây là ví dụ sử dụng jQuery để cài đặt màu nền cho thẻ p sau khi trang được tải.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ví dụ đầu tiên về jQuery</title>
<!-- liên kết jQuery với HTML -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<!-- cài đặt màu nền cho thẻ p -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "99FF99");
});
</script>
</head>
<body>
<p>Đoạn văn 1.</p>
<p>Đoạn văn 2.</p>
<p>Đoạn văn 3.</p>
</body>
</html>
Kết quả:
jQuery Selectors
jQuery Selector được sử dụng để chọn và thao tác các phần tử HTML. Chúng rất quan trọng trong thư viện jQuery.
jQuery Selector, bạn có thể tìm hoặc chọn các phần tử HTML dựa trên id, các class, thuộc tính, kiểu và nhiều thứ khác từ DOM.
Làm thế nào để sử dụng jQuery Selectors
jQuery Selector có thể được sử dụng đơn hoặc với sự kết hợp của bộ chọn khác. Chúng được sử dụng để chọn phần tử chính xác mà bạn muốn từ tài liệu HTML của bạn. Dưới đây là các jQuery Selector quan trong hay được sử dụng.
| No. | Selector | Môt tar |
|---|---|---|
| 1) | Name: | Nó chọn tất cả các phần tử khớp với tên phần tử đã cho. |
| 2) | #ID: | Nó chọn một phần tử duy nhất khớp với id đã cho. |
| 3) | .Class: | Nó chọn tất cả các phần tử phù hợp với class đã cho. |
| 4) | Universal(*) | Nó chọn tất cả các phần tử có trong DOM. |
| 5) | Multiple Elements A,B,C | Nó chọn các kết quả kết hợp của tất cả các selector được chỉ định A, B và C. |
