jQuery - Tổng quan
JQuery là gì?
jQuery là một Thư viện JavaScript ngắn gọn và nhanh chóng được tạo ra bởi John Resig vào năm 2006 với phương châm tốt đẹp: Write less, do more. jQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, tạo hoạt ảnh và tương tác Ajax để phát triển web nhanh chóng. jQuery là một bộ công cụ JavaScript được thiết kế để đơn giản hóa các tác vụ khác nhau bằng cách viết ít mã hơn. Đây là danh sách các tính năng cốt lõi quan trọng được hỗ trợ bởi jQuery:
DOM manipulation - jQuery giúp dễ dàng chọn các phần tử DOM, thương lượng chúng và sửa đổi nội dung của chúng bằng cách sử dụng công cụ chọn mã nguồn mở trên nhiều trình duyệt được gọi là Sizzle.
Event handling - jQuery cung cấp một cách tiện lợi để nắm bắt nhiều sự kiện khác nhau, chẳng hạn như người dùng nhấp vào liên kết mà không cần phải làm lộn xộn mã HTML với các trình xử lý sự kiện.
AJAX Support - jQuery giúp bạn rất nhiều để phát triển một trang web đáp ứng và giàu tính năng sử dụng công nghệ AJAX.
Animations - jQuery đi kèm với nhiều hiệu ứng hoạt hình tích hợp mà bạn có thể sử dụng trong các trang web của mình.
Lightweight - Thư viện jQuery rất nhẹ - kích thước khoảng 19KB (Đã thu nhỏ và nén).
Cross Browser Support - jQuery có hỗ trợ nhiều trình duyệt và hoạt động tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+
Latest Technology - jQuery hỗ trợ các bộ chọn CSS3 và cú pháp XPath cơ bản.
Làm thế nào để sử dụng jQuery?
Có hai cách để sử dụng jQuery.
Local Installation - Bạn có thể tải xuống thư viện jQuery trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể đưa thư viện jQuery vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN).
Cài đặt cục bộ
Đi đến https://jquery.com/download/ để tải xuống phiên bản mới nhất có sẵn.
Bây giờ đặt tải xuống jquery-2.1.3.min.js tệp trong thư mục của trang web của bạn, ví dụ: / jquery.
Thí dụ
Bây giờ bạn có thể bao gồm thư viện jquery trong tệp HTML của mình như sau:
<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("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Phiên bản dựa trên CDN
Bạn có thể đưa thư viện jQuery vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). Google và Microsoft cung cấp nội dung cung cấp cho phiên bản mới nhất.
Chúng tôi đang sử dụng phiên bản Google CDN của thư viện trong suốt hướng dẫn này.
Thí dụ
Bây giờ chúng ta hãy viết lại ví dụ trên bằng cách sử dụng thư viện jQuery từ Google CDN.
<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("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Làm thế nào để gọi một hàm thư viện jQuery?
Như hầu hết mọi thứ, chúng ta làm khi sử dụng jQuery đọc hoặc thao tác mô hình đối tượng tài liệu (DOM), chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện, v.v. ngay khi DOM đã sẵn sàng.
Nếu bạn muốn một sự kiện hoạt động trên trang của mình, bạn nên gọi sự kiện đó bên trong hàm $ (document) .ready (). Mọi thứ bên trong nó sẽ tải ngay sau khi DOM được tải và trước khi nội dung trang được tải.
Để làm điều này, chúng tôi đăng ký một sự kiện sẵn sàng cho tài liệu như sau:
$(document).ready(function() {
// do stuff when DOM is ready
});Để gọi bất kỳ hàm thư viện jQuery nào, hãy sử dụng các thẻ tập lệnh HTML như được hiển thị bên dưới:
<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" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Làm thế nào để sử dụng tập lệnh tùy chỉnh?
Tốt hơn là viết mã tùy chỉnh của chúng tôi trong tệp JavaScript tùy chỉnh: custom.js, như sau -
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});Bây giờ chúng ta có thể bao gồm custom.js tệp trong tệp HTML của chúng tôi như sau:
<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" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Sử dụng nhiều thư viện
Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xung đột lẫn nhau. Ví dụ, bạn có thể sử dụng thư viện javascript jQuery và MooTool cùng nhau. Bạn có thể kiểm tra Phương thức jQuery noConflict để biết thêm chi tiết.
Tiếp theo là gì?
Đừng quá lo lắng nếu bạn không hiểu các ví dụ trên. Bạn sẽ sớm nắm bắt được chúng trong các chương tiếp theo.
Chương tiếp theo sẽ cố gắng đề cập đến một số khái niệm cơ bản đến từ JavaScript thông thường.