jQuery là một Thư viện JavaScript nhanh và ngắn gọn do John Resig tạo ra vào năm 2006 với phương châm hay: Viết ít hơn, làm nhiều hơn . jQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt ảnh và tương tác Ajax để phát triển web nhanh chóng.
Tính năng jQuery
jQuery đơn giản hóa các tác vụ khác nhau của một người lập trình 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 −
- Thao tác DOM − jQuery giúp dễ dàng chọn các phần tử DOM, thỏa thuận 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ó tên là Sizzle .
- Xử lý sự kiện − jQuery cung cấp một cách tinh tế để ghi lại nhiều sự kiện khác nhau, chẳng hạn như người dùng nhấp vào một 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.
- Hỗ trợ AJAX − 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 bằng công nghệ AJAX.
- Ảnh động – jQuery đi kèm với rất nhiều hiệu ứng hoạt hình tích hợp sẵn mà bạn có thể sử dụng trong các trang web của mình.
- Trọng lượng nhẹ − jQuery là thư viện rất nhẹ – kích thước khoảng 19KB (Được rút gọn và nén).
- Hỗ trợ nhiều trình duyệt − jQuery có hỗ trợ nhiều trình duyệt và hoạt động tốt trong IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+
- Công nghệ mới nhất − jQuery hỗ trợ bộ chọn CSS3 và cú pháp XPath cơ bản.
Thiết lập jQuery
Có hai cách để sử dụng jQuery.
- Cài đặt cục bộ − 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.
- Cài đặt 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).
jQuery – Cài đặt cục bộ
Bạn có thể tải xuống phiên bản jQuery mới nhất trên máy chủ web của mình và đưa thư viện đã tải xuống vào mã của bạn. Chúng tôi khuyên bạn nên tải xuống phiên bản nén của thư viện để có hiệu suất tốt hơn.
- Truy cập https://jquery.com/download/ để tải xuống phiên bản mới nhất hiện có.
- Bây giờ lưu tệp jquery-3.6.0.min.js đã tải xuống vào một thư mục trên trang web của bạn, ví dụ: /jquery/ jquery-3.6.0.js .
- Cuối cùng bao gồm tệp này trong tệp đánh dấu HTML của bạn như được hiển thị bên dưới.
Ví dụ
Bây giờ bạn có thể đưa thư viện jquery vào tệp HTML của mình như bên dưới. Hãy thử chạy mã jQuery sau –
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<!-- HTML body goes here -->
</body>
</html>
jQuery – Cài đặt 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). Có nhiều CDN khác nhau cung cấp liên kết trực tiếp đến thư viện jQuery mới nhất mà bạn có thể đưa vào chương trình của mình.
Ví dụ
Bây giờ chúng ta hãy viết lại ví dụ trên bằng thư viện jQuery từ Google CDN. Hãy thử chạy mã jQuery sau –
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<!-- HTML body goes here -->
</body>
</html>
<html>
Chúng tôi đang sử dụng phiên bản CDN Hướng dẫn riêng của chúng tôi trong suốt Hướng dẫn jQuery này. Bạn có thể tìm thấy nhiều CDN khác trên internet để đưa jQuery vào các trang web của mình.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<!-- HTML body goes here -->
</body>
</html>
<html>
Làm cách nào để gọi một hàm thư viện jQuery?
Như hầu hết mọi thứ, chúng tôi làm khi sử dụng jQuery để đọc hoặc thao tác với mô hình đối tượng tài liệu (DOM), chúng tôi cần đảm bảo rằng chúng tôi 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 nó bên trong hàm $(document).ready(). Mọi thứ bên trong nó sẽ tải ngay 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ỳ chức năng thư viện jQuery nào, hãy sử dụng các thẻ tập lệnh HTML như bên dưới. Hãy thử chạy mã jQuery sau
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div>Click on this to see a dialogue box.</div>
</body>
</html>
Làm cách 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 bạn trong tệp JavaScript tùy chỉnh: custom.js , như sau
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
Hãy giữ tệp này trong thư mục /jquery và sau đó chúng tôi có thể đưa tệp custom.js vào tệp HTML của mình như sau. Hãy thử nchạy mã jQuery sau –
<!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://code.jquery.com/jquery-3.6.3.js"></script> <script src="https://www.tutorialspoint.com/jquery/custom.js"></script> </head> <body> <div>Click on this to see a dialogue box.</div> </body> </html>
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 đượ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.
