Home > Web > jQuery hoạt động như thế nào ?

jQuery hoạt động như thế nào ?

1.Tạo trang web đầu tiên sử dụng jQuery

Trước hết chúng ta tạo 1 tài liệu HTML với nội dung như sau :

<!doctype html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>Hello jQuery</title>
         <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
         <script type="text/javascript">
             // them code javascript tai day
         </script>
     </head>
     <body>
         <a href="">Hello world!</a>
     </body>
 </html>

Thuộc tính src trong thẻ script trỏ tới thư viện jQuery. Ở đây tôi trỏ đến jQuery được hosted trên server jquery.com, bạn có thể download thư viện jQuery về và trỏ tới nơi nó được hosted trên server của bạn.

Bạn cần chú ý là thư viện jQuery phải được load trước khi code jQuery, nếu không khi code jQuery của bạn sẽ không làm việc đúng như mong đợi.

2.Bắt đầu code jQuery

Để trang web thực thi một hàm nào đó sau khi trang được tải về, bạn có thể sử dụng một trong 3 cú pháp sau :

$(document).ready(handler)
$().ready(handler)
$(handler)

Tham số handler là hàm sẽ thực thi sau khi DOM đã sẵn sàng. Phương thức .ready() có công dụng tương tự như thuộc tính onload của thẻ <body> (<body onload=””>)

Thao tác cơ bản nhất của jQuery là chọn một phần tử nào đó của tài liệu HTML. Bạn tiến hành nó bằng cách sử dụng hàm $(). Thường thì nằm giữa dấu ngoặc () là một chuỗi dưới dạng tham số, nó có thể là những CSS Selector. Trong ví dụ này chúng ta muốn tìm tất cả những thẻ link “a” trong tài liệu, cú pháp giống như khi bạn viết code CSS vậy.

Sự kiện click :

Giả sử ta muốn khi click vào thẻ link sẽ hiện lên hộp thoại “Hello World!”. Khi đó ta cần thêm đoạn code sau :

$(document).ready(function(){
     $("a").click(function(){
         alert("Hello World!");
     });
 });

Giải thích code :

+ $(“a”) là một jQuery selector, trong trường hợp này, nó chọn ra tất cả các thành phần là thẻ a.

+ Bản thân $ là một alias cho class jQuery, do đó $() tạo ra một jQuery object mới.  jQuery object bao gồm không hoặc nhiều thành phần DOM và cho phép chúng ta tương tác với chúng bằng nhiều cách.

+ function click() là một phương thức của đối tượng jQuery. Nó gắn một sự kiện click vào tất cả các thành phần được chọn ( trong trường hợp này, là một thẻ a ) và thực thi hàm được cung cấp khi có sự kiện xảy ra.

Đoạn code trên có chức năng tương tự với đoạn code sau :

<a href="" onclick="alert('Hello world')"> Hello world!</a>

Tuy nhiên sự khác biệt khá rõ ràng: Sử dụng jQuery, chúng ta không cần phải viết mỗi sự kiện onclick cho từng thành phần, chúng ta sẽ có được sự phân chia rất sáng tỏ giữa cấu trúc (HTML) và hành vi (js), cũng như chúng ta phân chia cấu trúc và hiển thị bằng cách sử dụng CSS.

Thêm hoặc bỏ 1 class (lớp với CSS)

Đây là tác vụ dùng để thêm vào ( hoặc bỏ đi ) các class từ phần tử nào đó.

Trước tiên bạn thêm 1 vài thông tin style vào thẻ <head> trong tài liệu HTML, ví dụ :

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

Sau đó gọi addClass trong script :

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

Khi đó tất cả các phần tử “a” sẽ có class = “test”, do đó nó sẽ được tô đậm.

Để bỏ class, bạn có thể sử dụng removeClass

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

HTML cho phép nhiều class có thể được thêm vào 1 element.

Các hiệu ứng khác

jQuery cung cấp các thành phần effects giúp cho website của bạn thật sự nổi bật.

Chẳng hạn bạn muốn là khi click vào liên kết có trong trang thì nó sẽ biến mất một cách từ từ. Đoạn code sau sẽ thực hiện việc đó :

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

3.Khả năng liên kết thành chuỗi ( một phép thuật của jQuery)

jQuery cung cấp cho bạn một cách viết code đơn giản và ngắn gọn, tương tự như cách lập trình hướng đối tượng, nói đúng hơn đây là cách viết thẳng một hàng.

Mỗi phương thức trong jQuery trả về câu truy vấn đối tượng của chính nó, nó cho phép bạn “xích” chúng lại với nhau. Ví dụ :

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

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

Mở rộng hơn, bạn có thể 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ụ bạn tạo thêm đoạn mã HTML như sau :

 <a href="http://google.com/" class="clickme">I give a message when you leave</a>
 <a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
 <a href="http://microsoft.com/">I'm a normal link</a>

Sau đó thêm đoạn code sau vào phần script của bạn :

$("a")
     .filter(".clickme")
     .click(function(){
         alert("You are now leaving the site.");
     })
     .end()
     .filter(".hideme")
     .click(function(){
         $(this).hide();
         return false;
     })
     .end();

Các phương thức thay đổi vùng chọn của jQuery, có thể hoàn lại với phương thức end(), nó cho biết sự kết thúc của vùng chọn đó và bắt đầu áp dụng lựa chọn mới:

  • add()
  • children()
  • eq()
  • filter()
  • find()
  • gt()
  • lt()
  • next()
  • not()
  • parent()
  • parents()
  • siblings()

Để biết thêm chi tiết về các phương thức này, bạn có thể đọc thêm tại : http://docs.jquery.com/DOM/Traversing

4.Callback (hàm hồi quy) và function (hàm)

Hàm hồi quy là một hàm được truyền như một tham số cho một hàm khác ( hàm gọi/ hàm bao ngoài ) và sẽ được thực thi sau khi hàm gọi hoàn tất. Điều đáng lưu ý về hàm hồi quy là tất cả những hàm xuất hiện sau “hàm gọi” có thể thực thi trước hàm hồi quy.

Một điều quan trọng khác cần lưu ý là làm thế nào dùng đúng hàm hồi quy. Đây là điều mà mọi người thường hay quên cú pháp câu lệnh.

Hàm hồi quy không có tham số :

Đối với một hàm hồi quy không tham số, bạn có thể gọi theo cách sau :

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

Lưu ý : tham số thứ hai chỉ đơn giản là tên hàm ( không truyền như một giá trị chuỗi ký tự và không có dấu ngoặc đơn). Các hàm trong javascript được xem là “First class citizens” và vì vậy có thể truyền như một biến số và sẽ được thực thi sau đó.

Hàm hồi quy có tham số :

Bạn thắc mắc sẽ phải gọi hàm hồi quy như thế nào nếu có tham số ?

Cách dùng sai ( không hoạt động )

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

Cách này không hoạt động vì bạn gọi myCallBack(param1, param2) sau đó lại truyền giá trị trả về như là một thông số mới cho hàm $.get()

Cách dùng đúng

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

Lý do : bằng cách truyền một anonymous function (hàm vô danh), ( đoạn mã với

function(){
    /* ham can thuc thi */
 };

sẽ tự động gọi hàm cần thực thi với những tham số cần thiết ) , bạn đã hoàn tất việc gọi hàm hồi quy.

Cách dùng này đúng vì bạn truyền hàm vô danh như thông số thứ hai cho hàm $.get() mà không phải thực thihamf đó trước khi truyền.

Advertisements
Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: