Về mặt bản chất, jQuery là thư viện JavaScript, hay còn gọi là JavaScript Framework, hỗ trợ bạn trong việc xử lý HTML, xử lý các sự kiện trong trang HTML, tạo các hiệu ứng đẹp, xử lý Ajax nhanh và ngắn gọn hơn cho ứng dụng website của người sử dụng.
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:
<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:
<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(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</body>
</html>
4. Xóa bỏ hoặc gán thêm class HTML:
Lưu ý rằng một số đoạn mã jQuery ví dụ dưới đây cần phải đặt bên trong event ready để được thực thi khi website sẵn sàng trong trạng thái “làm việc”. Một trong những tác vụ phổ biến là gán thêm hoặc xóa bớt class.
Trước tiên, hãy thử gán 1 số thông tin style vào trong thẻ <head> của trang web, chẳng hạn như sau:
a.test { font-weight: bold; }
</style>
Tiếp theo, gán thêm addClass vào trong đoạn mã:
$("a").addClass("test");
Toàn bộ các thành phần đó sẽ được bôi đậm. Còn nếu muốn gõ bỏ class, sử dụng removeClass:
$("a").removeClass("test");
HTML cho phép gán nhiều class vào 1 element.
5. Một số hiệu ứng đặc biệt:
Trong jQuery đã có sẵn một số hiệu ứng khá đặc biệt để làm cho trang web của bạn trở nên đặc biệt. Để chèn vào trang test của chúng ta, hãy thay đổi sự kiện click đã được gán vào trước đó:
event.preventDefault();
$(this).hide("slow");
});
Giờ đây, khi nhấn vào bất kỳ đường dẫn nào thì trang web sẽ từ từ biến mất.
6. Callback và Functions:
Thực chất, callback chính là 1 chức năng có nhiệm vụ chuyển argument tới 1 chức năng khác và được thực thi sau khi function parent hoàn tất. Điểm đặc biệt của callback là function sẽ được hiển thị ngay sau khi function ở bậc parent có thể thực thi trước khi hành động của callback xảy ra. Một điểm quan trọng khác cần biết ở đây là làm thế nào callback được “gọi” ra đúng thời điểm.
Callback không đi kèm argument có cú pháp chung như sau:
$.get('myhtmlpage.html', myCallBack);
Lưu ý rằng tham số thứ 2 ở đây đơn giản chỉ là tên của function. Các function trong Javascript là First class citizens và có thể được sử dụng làm biến tùy chỉnh, được thực thi tại các thời điểm sau đó.
Callback với argument: câu hỏi được đặt ra ở đây là các bạn sẽ phải làm gì nếu có các argument cần phải bỏ qua? Nếu sử dụng cú pháp thông thường như dưới đây:
$.get('myhtmlpage.html', myCallBack(param1, param2));
thì sẽ không hoạt động, bởi vì hệ thống sẽ gọi:
myCallBack(param1, param2)
và sau đó bỏ qua giá trị được trả về dưới dạng tham số thứ 2 tới $.get()
Tuy nhiên, vấn đề xảy ra với ví dụ trên là myCallBack(param1, param2) được đánh giá trước khi được chuyển đi dưới dạng 1 function. Javascript và jQuery extension thường phải sử dụng các pointer function trong những trường hợp như thế này, chẳng hạn như function setTimeout…
Ví dụ như dưới đây, 1 chức năng anonymous được khởi tạo (đơn giản chỉ là 1 khối statement) và được đăng ký dưới dạng function callback, lưu ý tới cách sử dụng của 'function(){'. Hàm anonymous thực hiện đúng 1 chức năng duy nhất, đó là gọi ra myCallBack với giá trị đi kèm của param1 param2.
myCallBack(param1, param2);
});
Trong đó param1 và param2 được sử dụng dưới dạng callback khi hàm '$.get' hoàn tất quá trình tải trang web.
