Tìm hiểuvềcơchếhoạtđộngcủ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(){
$("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:
<style>
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 đó:
$("a").click(function(event){
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 khifunction ở bậc parent có thể
thực thi trước khi hành độngcủ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.
. 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. 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>