jQuery : thư viện Javascript số một


Sau một thời gian tìm hiểu và xem xét các thư viện javascript mình quyết định là sẽ chọn jQuery để nghiên cứu trước. Lý do là thư viện này khá mạnh, có tutorial và tài liệu tham khảo dễ học, đã có sách xuất bản, có nhiều thư viện mở rộng và đặc biệt là có thể dùng chung tương thích với các thư viện khác như Prototype.

Bạn nào chuyên về thiết kế web và chỉ biết một chút về javascript thì khi dùng jQuery sẽ thấy dễ dàng và rất tiện lợi. Dưới đây là một vài mình họa cho các ứng dụng của jQuery trong trang web.

Download jQuery

Để sử dụng jQuery thì trang web cần phải liên hệ đến nó như sau:

Code:

<script type="text/javascript" src="jquery.js" mce_src="jquery.js">
</script>

Các đoạn mã xử lý khác cần phải được đặt trong mã sau để đảm bảo rằng chúng chỉ thực thi sau khi tài liệu đã được tải xong, đọan mã sau cũng tương đương với window.onload = function():

Code:

$(document).ready(function(){
   // Your code here
});

Cú pháp mặc định của jQuery là $() ta sẽ dùng nó rất nhiều khi cần thao tác trên bất kỳ một đối tượng nào trong trang web.

Thông thường nếu ta muốn hiện một thông báo mỗi khi người dùng bấm vào các đường link trong trang thì phải thêm thuộc tính onclick vào mỗi tag a. Nhưng với jQuery thì chỉ cần mấy dòng lệnh sau là xong:

Code:

$("a").click(function(){
   alert("Cảm ơn đã ghé thăm!");
   // return false;
});

Nếu không muốn browser chuyển sang URL trong liên kết thì thêm dòng lệnh return false vào như ở trên.

Tương tự, việc áp dụng một kiểu CSS vào tất cả các tag a cũng có thể được thực hiện dễ dàng như sau:

Code:

$("a").addClass("test");

Dĩ nhiên là bạn cần phải định nghĩa kiểu CSS trong trang web của bạn trước khi muốn áp dụng:

Code:

<style type="text/css">
   a.test { font-weight: bold; }
</style>

Với jQuery ta có thể thêm các hiệu ứng đặc biệt vào như khi click thì sẽ ẩn một đối tượng nào đó đi. Ví dụ sau làm ẩn chính các liên kết khi chúng được click. Và hiệu ứng này thực hiện với tốc độ chậm để mắt thường có thể nhìn thấy được.

Code:

$("a").click(function(){
   $(this).hide("slow");
   return false;
});

Mỗi phương thức trong jQuery trả về tượng của chính nó, nó cho phép bạn thực hiện liên tục nhiều thao tác như các mắc ‘xích’ và tiết kiệm thời gian viết mã, ví dụ:

Code:

$("a").addClass("test").show().html("foo");

Câu lệnh này chứa những phương thức (addClass, show, và html) trả về đối tượng jQuery, nó cho phép bạn có thể tiếp dụng sử dụng phương thức để đặt cho phần tử hiện tại.

Ngoài ra, bằng cách thêm hoặc bỏ phần tử từ vùng chọn, thay đổi các phần tử này và sau đó trả giá trị lại cho vùng chọn trước, ví dụ:

Code:

$("a")
   .filter(".clickme")
     .click(function(){
       alert("Bạn sắp đi qua một trang khác.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();

Với jQuery bạn sẽ ứng dụng AJAX vào trang web một cách dễ dàng với những dòng lệnh cực kỳ đơn giản. Ví dụ sau tải một trang ‘myhtmlpage.html’ khác lên mà không phải load lại trang, sau khi load xong thì thực hiện hàm ‘myCallBack’

Code:

$.get('myhtmlpage.html', myCallBack);

Nếu bạn cần truyền thông số vào hàm ‘myCallBack’ thì phải sử dụng cú pháp sau chứ đừng truyền một cách trực tiếp:

Code:

$.get('myhtmlpage.html', function(){
   myCallBack(param1, param2);
});

Để tìm hiểu thêm về jQuery thì hãy ghé qua các trang sau.

tutorials

Documentation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s