jQuery in Action study - Part 1

Tổng quan về jQuery

1.1 Các định nghĩa

1.1.1 Định nghĩa jQuery

Dịch từ http://jquery.com/ url:

jQuery là một thư viện JavaScript nhanh và chính xác mà làm đơn giản hóa các công việc lập trình JavaScript như duyệt tài liệu HTML, xử lý sự kiện, hoạt hình(animating), và những tương tác Ajax cho việc phát triển web một cách nhanh chóng. jQuery được thiết kế để thay đổi cách chúng ta viết JavaScript.

Bởi vì jQuery là JavaScript nên nó có thể được nhúng vào trong bất kỳ một project nào mà ở đó JavaScript được áp dụng.

1.1.2 Định nghĩa jQuery function

jQuery function là method trong jQuery được định nghĩa trực tiếp bắt đầu bằng dấu dollar $ hoặc hàm jQuery().

Cú pháp:

$(selector)

hoặc

jQuery(selector)

Trong đó hàm $(..) là một cách viết tắt của hàm jQuery().

Hàm jQuery sẽ trả về một đối tượng JavaScript đặc biệt chứa đựng một mảng các phần tử DOM mà match với selector.

Ví dụ:

$(“p a”)

Lấy về một nhóm các links nằm bên trong một phần tử <p>

1.1.3 Định nghĩa Selector

Selector: đại diện cho các phần tử html dựa trên các thuộc tính(tên, thuộc tính, nội dung) hoặc vị trí của chúng bên trong tài liệu HTML.

Ví dụ:

p a

đại diện cho một nhóm các phần tử <a> ( các links) mà nằm bên trong một phần tử <p>

1.1.4 Định nghĩa jQuery wrapper

jQuery wrapper là một tập các phần tử bắt cặp (matched) qua lời gọi hàm jQuery.

Ví dụ $(“div.notLongForThisWorld”) sẽ bao gồm một tập hợp các phần tử <div> với CSS class = notLongForThisWorld. Tập các phần tử matched trên là một jQuery wrapper. Điều này có nghĩa là kết quả trả về qua lời gọi hàm jQuery chứa jQuery wrapper.

1.1.5 Định nghĩa jQuery commands

jQuery commands là các methods được gọi bởi jQuery wrapper. jQuery commands cũng còn được gọi là các action.

Ví dụ, có câu lệnh jQuery sau:

$(“div.notLongForThisWorld”).fadeOut();

Trong câu lệnh trên, fadeOut() là một jQuery commands hay action, nó thực hiện hành động fading-out (làm hình ảnh mờ dần).

1.1.6 Định nghĩa jQuery plugin

jQuery plugin là các thư viện mở rộng của jQuery nhằm cung cấp thêm các chức năng khác như validate mà thư viện chuẩn của jQuery chưa có.

Nội dung của các plugin thường được xây dựng bên trong tệp có tên là jquery.PLUGINNAME.js với PLUGINNAME là một chuỗi hợp lệ.

Các plug-ins miễn phí của jQuery có thể download ở địa chỉ http://plugins.jquery.com/

1.1.7 Định nghĩa jQuery UI

jQuery UI là một widget và thư viện tương tác được xây dựng mở rộng từ jQuery JavaScript Library, mà bạn có thể dùng để xây dựng các ứng dụng web có tính tương tác cao.

Ví dụ, datepicker widget là một dạng của jQuery UI

Accordion widget trông giống như các tab, tại một thời điểm chỉ có 1 tab được mở ra.

1.1.8 Định nghĩa jQuery theme

jQuery theme là styles trong một ứng dụng web mà có thể áp dụng cho một widget hoặc toàn bộ ứng dụng web.

Look & feel là thành phần chính của styles, nó bao gồm những color chính, background images và các icons.

Tuy nhiên styles còn có cả structural style, ví dụ như các thuộc tính dimensions, padding, margins, positioning & floats mà một widget nào đó áp dụng theme.

Ví dụ, Black Tie Theme áp dụng cho datepicker widget sẽ làm cho giao diện widget này có màu đen nổi bật.

1.2 Lợi ích của jQuery

- Thư viện jQuery sử dụng giấp phép MIT License, là một loại license nguồn mở mà người sử dụng nó theo các mục đích thương mại hoặc không thương mại, không phải trả phí, tự do sửa đổi, không phải công khai mã nguồn sửa đổi. Chi tiết tham khảo tại địa chỉ http://jquery.org/license/.

- Lợi ích về thời gian: với jQuery, thời gian để xây dựng các hàm JavaScript sẽ giảm xuống.

- Giảm bớt số dòng lệnh JavaScript trong dự án: sử dụng jQuery sẽ làm giảm số dòng lệnh JavaScript mà lập trình viên phải làm trong 1 dự án, mã nguồn sẽ rõ ràng và trong sáng hơn.

- Có rất nhiều plugin miễn phí để sử dụng ví dụ calendar textbox, ..

- Hỗ trợ AJAX mà lập trình viên không phải tự xây dựng.

- Tương thích nhiều trình duyệt web phổ biến.

- Thời gian học không dài.

1.3 Các chức năng căn bản của jQuery

1.3.1 Lựa chọn, duyệt các phần tử html

jQuery cho phép lựa chọn một hoặc nhiều phần tử html, duyệt các phần tử html của trang web thông qua các tên phần tử, tên thuộc tính, nội dung hay vị trí phần tử. Toàn bộ trang web html được tổ chức theo cấu trúc cây và jQuery sẽ tìm kiếm các phần tử html dựa trên mô hình DOM (Document Object Model) giông như tìm kiếm các phần tử xml đã được biết tới từ trước.

1.3.2 Thao tác thay đổi nội dung phần tử html

Với mỗi một phần tử html mà jQuery tìm được, jQuery sẽ sử dụng các method để thao tác với phần tử html đó.

Ví dụ, jQuery có thể dùng html() method để thay đổi nội dung (giá trị của thuộc tính innerHTML) của các phần tử HTML tìm được. jQuery cũng có thể dùng append() method để nối nội dung vào bên trong của các phầm tử html duyệt tới.

1.3.3 Tương tác với css

jQuery có một method quan trọng để thao tác với CSS đó là method css().

css() method có 3 cú pháp khác nhau để thực hiện các công việc khác nhau:

css(name) - trả về giá trị của thuộc tính CSS

css(name,value) - thiết đặt thuộc tính và giá trị CSS

css({properties}) - Thiết đặt nhiều thuộc tính và giá trị CSS

Ví dụ:

$(this).css("background-color");

Câu lệnh trên sẽ lấy về giá trị của thuộc tính CSS có tên là ("background-color" của phần tử bắt cặp (matched) đầu tiên.

$("p").css("background-color","yellow");

Với câu lệnh này, jQuery dùng method css() để thiết đặt giá trị cho thuộc tính "background-color" của tất cả những phần tử html tìm được.

1.3.4 Tương tác với người dùng thông qua xử lý sự kiện

Các method xử lý sự kiện trong jQuery là một trong những chức năng chính của thư viện jQuery.

Những Event handler là các method mà được gọi khi "một cái gì đó xảy ra" trong các phần tử HTML. Ví dụ khi người dùng click vào các link, button hay checkbox,.. thì sự kiện("một cái gì đó”) xảy ra.

Thông thường người ta để jQuery code của các methods xử lý sự kiên ở bên trong phần <head> của trang html.

Ví dụ, có đoạn mã jQuery sau:

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

Trong ví dụ trên, một function được gọi khi sự kiện click đối với phần tử html “button” được kích hoạt:

$("button").click(function() {..some code... } )

method sau đây ẩn tất cả các phần tử <p> tìm thấy:

$("p").hide();

1.3.5 Hiệu ứng javascript và hình ảnh động

jQuery hỗ trợ các hiệu ứng ví dụ như làm mờ dần hình ảnh, hoạt hình (animations), hiện lên, ẩn đi các phần tử html. Những hiệu ứng JavaScript mà jQuery hỗ trợ sẽ giúp người thiết kế web sử dụng dễ hơn thông qua vài hàm jQuery mà không cần hiểu biết nhiều về JavaScript. Nội dung chi tiết của mục này sẽ được trình bày ở phần 3.1 bên dưới.

1.3.6 Ứng dụng AJAX với jQuery

AJAX là gì?

AJAX = Asynchronous JavaScript and XML.

AJAX là một kỹ thuật không đồng bộ để tạo ra các trang web động có tốc độ tải trang nhanh hơn.

AJAX cho phép các trang web được cập nhật không đồng bộ bằng việc thay đổi một khối lượng nhỏ dữ liệu giữa client và server. Điều này có nghĩa là có thể cập nhật một phần của 1 trang web mà không phải tải lại toàn bộ trang.

AJAX và jQuery

jQuery cung cấp một tập hợp phong phú các methods cho việc phát triển web sử dụng AJAX.

Với jQuery AJAX, bạn có thể tạo các request lấy về dữ liệu ở định dạng TXT, HTML, XML hoặc JSON từ một remote server sử dụng các phương thức HTTP Get, HTTP Post.

Sử dụng jQuery AJAX, người dùng không phải tự tạo ra các thư viện AJAX phức tạp một cách thủ công nữa, người dùng chỉ việc học các API của jQuery để thực hiện lập trình AJAX.

Next: jQuery in action study - Phần 2