jQuery là gì
jQuery là gì? jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn . jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax. Với ...
jQuery là gì?
jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn.
jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax. Với jQuery, khái niệm Rapid Web Development đã không còn quá xa lạ.
jQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạng với việc viết ít code hơn. Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ bởi jQuery:
Cách sử dụng jQuery?
Có hai cách để sử dụng jQuery:
Cài đặt jQuery nội bộ
Ví dụ
Bây giờ bạn có thể include thư viện jquery vào trong HTML file của bạn 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>
Nó sẽ cho kết quả:
Sử dụng CDN
Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network (CDN). Google và Microsoft cung cấp phiên bản mới nhất.
Trong loạt bài này, chúng tôi sử dụng Google CDN.
Ví dụ
Bây giờ chúng ta viết lại ví dụ trên bởi sử dụng thư viện jQuery từ Google CDN.
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://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>
Nó sẽ cho kết quả:
Cách để gọi một hàm thư viện jQuery?
Cũng tương tự như JavaScript, trước khi chúng ta sử dụng các đoạn code của jQuery để đọc hay chỉnh sửa các đối tượng DOM, chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện ngay sau khi DOM sẵn sàng.
Nếu bạn muốn một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong Hàm $(document).ready(). Mọi thứ bên trong 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 ta đă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, sử dụng các thẻ HTML script như dưới đây:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://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>
Nó sẽ cho kết quả sau:
Cách sử dụng Custom Script trong jQuery?
Nó thực sự là tốt hơn khi viết riêng cho bạn Custom Code trong một Custom JavaScript file: custom.js, như sau:
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
Bây giờ chúng ta bao custom.js này vào trong HTML file như sau:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="../custom.js"></script>
</head>
<body>
<div id="mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>
Nó sẽ cho kết quả sau:
Sử dụng nhiều thư viện trong jQuery
Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xảy ra xung đột giữa chúng. Ví dụ, bạn có thể sử dụng các thư viện jQuery và thư viện MooTool JavaScript cùng với nhau.
Bạn có thể kiểm tra phương thức: jQuery - Phương thức noConflict để biết thêm chi tiết.
Những gì có trong Trang sau?
Đừng bận tâm quá nhiều nếu bạn không hiểu các ví dụ trên. Bạn sẽ sớm hiểu chúng trong các chương tiếp theo.
Trong chương tới, chúng tôi sẽ đề cập một số khái niệm cơ bản mà đến từ qui ước của JavaScript.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học jQuery khác tại code24h:
