Quản
Trị Mạng - Trong bài viết dưới đây, chúng tôi sẽ hướng dẫn và giới
thiệu với các bạn về một số khái niệm cơ bản về jQuery - được thiết kế
để thay đổi cách mà bạn viết mã JavaScript - Viết ngắn gọn, làm được
nhiều! Đó chính là khẩu hiệu của jQuery.

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:








[You must be registered and logged in to see this link.]






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:



Phiên ban jQuery mới nhất được download tại [You must be registered and logged in to see this link.].

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à [You must be registered and logged in to see this link.] 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 [You must be registered and logged in to see this link.]
để 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ẻ , 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:








[You must be registered and logged in to see this link.]


$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});



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ẻ của trang web, chẳng hạn như sau:


Tiếp theo, gán thêm [You must be registered and logged in to see this link.] 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 [You must be registered and logged in to see this link.]:

$("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ố [You must be registered and logged in to see this link.]
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 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 [You must be registered and logged in to see this link.]

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.

$.get('myhtmlpage.html', function(){
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.