Tìm hiểu về cơ chế hoạt động của jQuery
1. Cơ bản:
Bài thử nghiệm dưới đây được xây dựng để giúp các bạn mới bắt đầu sử
dụng jQuery. Nếu chưa có sẵn 1 trang chuyên để test thì hãy bắt đầu bằng cách
tạo trang HTML mới với mã nguồn như dưới đây:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>
Thay đổi thuộc tính src trong thẻ script để trỏ tới file jquery.js của bạn. Ví dụ, nếu
file jquery.js nằm cùng thư mục với file HTML thì chúng ta có thể sử dụng:
<script src="jquery.js"></script>
Phiên ban jQuery mới nhất được download tại đây.
2. Ghép code trên trang có sẵn:
Một trong những việc đầu tiên mà hầu hết các lập trình viên Javascript đều muốn
làm là ghép code tới chương trình, ứng dụng chính của họ. Chẳng hạn như sau:
window.onload = function(){ alert("welcome"); }
Bên trong đoạn code đó là những gì chúng ta muốn trình duyệt hoạt động khi
website được tải. Nhưng vấn đề xảy ra ở đây là đoạn mã Javascript sẽ không chạy
cho tới khi tất cả các file ảnh đã được tải hết về máy (có bao gồm các banner
quảng cáo). Lý do sử dụng window.onload là vì các văn bản HTML vẫn chưa
được tải hết trong lần hoạt động đầu tiên.
Để giải quyết vấn đề trên thì jQuery đã có sẵn 1 mệnh đề có khả năng kiểm tra
các biến document và chờ đợi cho tới khi được cố định, đó chính là event ready:
$(document).ready(function(){
// Your code here
});
Bên trong event ready đó, chúng ta chèn thêm sự kiện handler click tới đường
dẫn:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Lưu lại file HTML và tải lại trang test này, nhấn vào đường dẫn trên trang đó sẽ
hiển thị cửa sổ cảnh báo dưới dạng pop up trước khi chuyển tới trang jQuery
chính. Đối với các click cũng như nhiều event khác, chúng ta có thể chặn các thao
tác mặc định tại đây, như ví dụ trên thì sau đường dẫn nhấn vào là
trang jquery.com bằng cách gọi event.preventDefault() trong handler event:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
3. Ví dụ hoàn chỉnh:
Dưới đây là 1 ví dụ hoàn chỉnh của file HTML dựa theo các đoạn mã trên. Lưu ý
rằng đường dẫn tại đây sẽ kết nối tới CDN của Google để tải file gốc của jQuery.
Bên cạnh đó, đoạn script tùy chỉnh của chúng ta được bao gồm trong thẻ <head>,
thì thích hợp hơn là đặt nó vào 1 file riêng biệt, sau đó truyền thông số tới file đó
qua thuộc tính src tương ứng của element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){