Làm việc với jQuery, Phần 1: Làm việc với jQuery, Phần 1: Đưa các ứng dụng của máy tính để bàn lên trình duyệt

Các hàm lõi, các lựa chọn và duyệt kết quả

jQuery đang nổi lên như là một thư viện JavaScript của sự lựa chọn cho các nhà phát triển đang tìm cách để dễ dàng tạo ra các ứng dụng Internet phong phú (RIA) năng động. Vì rằng các ứng dụng dựa trên trình duyệt tiếp tục thay thế các ứng dụng của máy tính để bàn, nên việc sử dụng các thư viện này sẽ chỉ tiếp tục phát triển mà thôi. Hãy tìm hiểu jQuery trong loạt bài viết này và tìm hiểu cách làm thế nào bạn có thể thực hiện nó trong các dự án ứng dụng web của riêng bạn.

Michael Abernethy, Giám đốc phát triển sản phẩm, IBM

Trong 10 năm làm việc về công nghệ của mình, Michael Abernethy đã làm việc với rất nhiều công nghệ và với rất nhiều khách hàng. Ông hiện đang làm việc trong vai trò Giám đốc phát triển sản phẩm cho Optimal Auctions, một công ty phần mềm về bán đấu giá. Hiện nay ông tập trung vào các ứng dụng RIA và làm cho chúng trở nên phức tạp hơn và đơn giản hơn cùng một lúc. Khi ông không làm việc tại máy tính của mình, bạn có thể tìm thấy ông trên bãi biển ở Mê-hi-cô với một cuốn sách hay.



18 12 2009

Giới thiệu

jQuery không liên quan gì đến các tuỳ chọn của thư viện JavaScript khác để trở thành thư viện được lựa chọn cho các nhà phát triển web và nhanh chóng trở thành sự lựa chọn đầu tiên cho các lập trình viên đang tìm cách để giảm nhẹ công việc phát triển dịch vụ phía khách của họ và tạo ra các RIA một cách nhanh chóng và hiệu quả. Do việc sử dụng RIA trở nên ngày càng phổ biến trên toàn thế giới, nên việc sử dụng các thư viện JavaScript để hỗ trợ sự phát triển của họ cũng sẽ tiếp tục tăng. RIAs được định nghĩa (không rõ ràng) vì rằng các ứng dụng chạy thông qua trình duyệt, trình duyệt này sử dụng kết hợp của CSS/JavaScript/Ajax để tạo ra công việc trên ứng dụng của máy tính để bàn. Các tính năng mới nhất, được bổ sung vào các bản phát hành gần đây của Firefox, Internet Explorer, Safari, và bản phát hành gần đây của trình duyệt Google Chrome mới, được tập trung vào việc tăng tốc độ của máy JavaScript nội bộ của mỗi trình duyệt nhằm mục đích duy nhất là làm cho nó trở nên thuận lợi hơn cho loại ứng dụng RIAs, loại ứng dụng mà những người tạo ra trình duyệt tưởng tượng là chúng ta sẽ sử dụng trong tương lai gần. Các công ty này hình dung các trang Web có chứa hàng chục ngàn dòng mã JavaScript, cho thấy tầm quan trọng của một thư viện hoàn thiện và không có lỗi và từ đó sẽ bắt đầu mọi công việc quan trọng hơn.

Cho nên, vì tương lai của các ứng dụng web đang hướng tới các giao diện nhúng và phong phú này, nên các nhà phát triển web ngày càng chú trọng vào các công cụ để giảm nhẹ các công việc. Hiện giờ trên thế giới đã có một số thư viện JavaScript, mỗi một thư viện có những điểm mạnh và điểm yếu và có những người hâm mộ với lời phê bình riêng của nó. Tôi không viết bài này để tranh luận thư viện nào tốt hơn thư viện khác về mặt tính năng, bởi vì cuối cùng điều đó không quan trọng. Cuối cùng, vấn đề là ở chỗ thư viện nào được sử dụng nhiều hơn các thư viện khác, tức là vấn đề về lượng sử dụng đối với mỗi thư viện. Bạn hãy xem đồ thị của Google Trends về bốn loại thư viện JavaScript phổ biến nhất ở dưới. Rõ ràng là trong vòng từ sáu đến tám tháng qua, jQuery đã trở thành sự lựa chọn chiếm ưu thế cho các thư viện JavaScript và sự lựa chọn đó đang tăng lên nhanh chóng.

Hình 1. Trang Google Trends về các thư viện JavaScript phổ biến
Trang Google Trends về các thư viện JavaScript phổ biến

Thị trường việc làm cũng cho thấy sự đi lên của jQuery với tư cách là thư viện JavaScript được lựa chọn. Nhìn thoáng qua vào địa chỉ Monster.com ta thấy rằng có 113 việc làm cho "jQuery" được liệt kê, và chỉ có tương ứng 67, 19, và 13 việc làm được liệt kê cho YUI, ExtJS và mootools.

Bài viết đầu tiên của loạt bài viết về jQuery bắt đầu bằng việc khám phá cú pháp của jQuery, cách cú pháp đó được thiết lập, và đặt tên các hàm của jQuery. Các phần sau của bài viết này khám phá những hàm lõi trong thư viện và cách nó sử dụng các trình chọn lựa mạnh và bộ lọc của mình để làm việc duyệt DOM dễ dàng và không phức tạp. Sau đó các bài viết sẽ chuyên bàn về thao tác CSS, điều khiển khuôn dạng, thay đổi văn bản, đơn giản Ajax và các hình động (ưa thích đối với mọi người). Một trong những tính năng thú vị nhất của jQuery là kiến trúc cắm thêm của nó, cho phép nhiều nhà phát triển bổ sung vào các chức năng của jQuery. Bài viết cuối cùng sẽ giới thiệu cho bạn nhiều trình cắm thêm mạnh có sẵn để hoàn tất quá trình phát triển RIA của bạn.

Loạt bài viết này là dành cho những người có kiến thức trước đó về cú pháp của JavaScript, cú pháp của CSS và cú pháp của DOM. Nếu bạn cần một khoá bồi dưỡng về các loại cú pháp này trước khi đọc các bài viết trong loạt bài viết này, tôi xin giới thiệu các đường kết nối tới W3Schools trong phần Tài nguyên của bài viết này.

Các vấn đề cơ bản

Trước khi đi vào những điểm thú vị của jQuery, chúng ta cần phải biết những điều cơ bản, cách cài đặt nó, khởi chạy nó, vv… Bạn hãy bắt đầu bằng cách tải về các thư viện jQuery được cung cấp trong phần Tải về, và liên kết với nó và bất kỳ tệp JavaScript ngoài nào khác:

Liệt kê 1. Làm thế nào để cài đặt jQuery trong mã của bạn
<script type="text/javascript" src="jquery.js"></script>

Bởi vì jQuery gọi hay thao tác các đối tượng DOM, bạn sẽ gặp vấn đề nếu bạn thao tác các đối tượng này ngay lập tức trong mã JavaScript, trước khi hoàn tất việc tải về tất cả các phần tử trên trang. Ngược lại, bạn cũng không muốn phải chờ cho đến khi tất cả mọi thứ trên trang đã được nạp; tất cả hình ảnh, biểu ngữ quảng cáo, mã phân tích, và các đoạn video xem trước của YouTube, trước khi bạn có thể gọi ra mã jQuery. Vùng ở giữa (middle ground) cho phép bạn gọi ra mã jQuery một cách thích hợp bằng một cách thức an toàn và không gây lỗi một khi các tài liệu đã hoàn tất việc tải tất cả các phần tử trên trang, nhưng trước khi tất cả các hình ảnh, liên kết, và hoàn thiện ảnh (rendering) đã hoàn tất. Để làm việc này này một lần nữa theo một cách khác, thì tất cả mã jQuery của bạn cần được có mặt trong hàm này trên một trang, hoặc trong hàm riêng của nó. Bạn đừng đưa mã jQuery vào trong mã JavaScript nếu nó không nằm trong một hàm.

Liệt kê 2. Cách gọi các hàm jQuery đúng cách
// Sai
<script language=JavaScript>
   $("div").addClass("a");
</script>

// Đúng
$(document).ready(function(){
   $("div").addClass("a");
 });

// - or -

$(document).ready(function(){
   myAddClass();
 });

function myAddClass()
{
   $("div").addClass("a");
}

Ngoài ra, tôi cũng xin nêu thêm một lưu ý hữu ích: bạn có thể có nhiều hàm document.ready() như bạn cần trên một trang, và chúng sẽ được gọi ra nối tiếp nhau. Đây là một điều tốt đáng để lưu ý nếu bạn đang xây dựng các trang của mình một cách năng động với các modun, và mỗi modun có riêng mã hỗ trợ jQuery của nó (Ví dụ: một trang PHP được xây dựng từ nhiều đoạn trang PHP nhỏ hơn).

Một trong những tính năng thú vị nhất của jQuery là "khả năng tạo thành chuỗi - chainability” của nó, khả năng đặt cùng nhau một loạt các hàm nhằm cải thiện khả năng đọc và mã hóa dễ dàng. Hầu hết các hàm jQuery trả về một đối tượng jQuery, có nghĩa là bạn có thể dễ dàng gọi ra các hàm bổ sung trên các đối tượng đó hết lần này đến lần khác để nối thành một chuỗi lệnh jQuery đầy đủ. Tôi so sánh điều này với lớp String trong Java, trong đó một số hàm trả về một đối tượng String, cho phép bạn nối nhiều hàm với nhau trên một dòng:

Liệt kê 3. Khả năng tạo thành chuỗi của jQuery
String man = new String("manipulated").toUpperCase().substring(0,5).toLowerCase();

$("div").addClass("a").show().text("manipulated");

Cuối cùng, điều sau cùng cần nhớ khi làm việc với jQuery, hoặc với bất cứ thư viện JavaScript nào, là chúng không luôn làm việc tốt với nhau. Nói cách khác, khi làm việc với hai hoặc nhiều thư viện, biến "$" được sử dụng bởi nhiều thư viện, điều đó có nghĩa là máy xử lý (engine) sẽ không biết thư viện nào cần được tham chiếu tới biến "$". Một ví dụ hoàn hảo cho điều này là thư viện CakePHP, gồm một biến prototype.js được xây dựng sẵn. Việc cố gằng sử dụng jQuery trên các trang này sẽ dẫn đến lỗi, trừ khi các lỗi đó được sửa. Để giải quyết vấn đề này, jQuery cung cấp một cách để ánh xạ biến "$" đến một biến khác, ví dụ:

Liệt kê 4. Giải quyết xung đột tại jQuery
j$ = jQuery.noConflict();
j$("div").addClass("a");

Lựa chọn

Gốc của mọi jQuery là khả năng chọn một số phần tử trên một trang và thao tác trên các phần tử đó. Điều đó có nghĩa đó là những đối tượng mà thư viện jQuery được xây dựng để hoạt động xung quanh các đối tượng đó. Vì vậy, với nhiều tùy chọn sẵn có trên một trang HTML bình thường, bạn cần một cách để chọn nhanh chóng và hiệu quả những phần tử mà bạn muốn làm việc với trên trang, bạn chỉ chọn những phần tử mà bạn muốn (không nhiều hơn và cũng không ít hơn). Đúng như mong đợi, jQuery cung cấp các phương thức lựa chọn mạnh mẽ cho phép bạn tìm và chọn các đối tượng trên trang. jQuery đã tạo ra cú pháp riêng của mình để lựa chọn, và cú pháp đó khá dễ để học.

(Nhiều ví dụ dưới đây sử dụng các hàm mà tôi sẽ không dùng đến cho đến bài viết tiếp theo, nhưng các hàm đó cần phải đơn giản để ta được hiểu những gì chúng đang cố gắng làm.)

Về căn nguyên mà nói, quá trình lựa chọn trong jQuery thực sự là một quá trình lọc khổng lồ, theo đó mọi phần tử trên trang được đưa qua các bộ lọc mà bạn cung cấp trong câu lệnh của bạn, và nó trả về hoặc là bản thân đối tượng phù hợp duy nhất, hoặc một mảng của các đối tượng phù hợp, từ đó bạn có thể nghiên cứu kỹ lưỡng.

Ba ví dụ đầu có lẽ là được sử dụng phổ biến nhất. Chúng đang tìm đối tượng bằng các thẻ của HTML, bằng ID hoặc bằng lớp (CLASS).

HTML

Để có được một mảng của tất cả các phần tử HTML phù hợp trong một trang, bạn có thể vượt qua một cách dễ dàng chính các thẻ HTML đó, mà không cần phải cố gắng hết mình, đến trường tìm kiếm của jQuery. Đây là cách "nhanh và không sạch" cho phép tìm các đối tượng và nó có ích để gắn các thuộc tính vào các phần tử HTML chung.

Liệt kê 5. Lựa chọn HTML
// Sẽ hiển thị mọi thẻ <div> trên trang.  Chú ý rằng nó sẽ 
// hiển thị mọi <div>, không kể thẻ đầu hoặc cuối có giống hay không.  
// Duyệt mảng (Traversing Arrays) sẽ đề cập sau trong bài này.
$("div").show();

// Sẽ lập nền mầu đỏ cho mọi thẻ <p> trong trang.
$("p").css("background", "#ff0000");

ID

Thiết kế trang đúng cách sẽ yêu cầu mọi ID trên một trang phải là duy nhất, mặc dù điều này đôi khi không thực hiện được (do cố ý hoặc vô ý). jQuery chỉ trả về các phần tử đầu tiên phù hợp khi sử dụng lựa chọn ID, bởi vì nó đòi hỏi bạn thiết kế một trang đúng cách. Nếu bạn cần phải đính kèm một thẻ cho một số phần tử trên cùng một trang, thẻ Class là sự lựa chọn thích hợp.

Liệt kê 6. Lựa chọn ID
// This will set the innerHTML of a span element with the id of "sampleText" to "Hi".  
// Note the initial "#" in the command.  This is the syntax used by jQuery to search 
// for IDs, and must be included.  If it is excluded, jQuery will search for the HTML
// tag instead, and with no <sampleText> tags on a page, will ultimately do
// nothing, leading to frustrating and hard-to-find bugs (not that that has ever 
// happened to me of course).

$("#sampleText").html("Hi");

CLASS

Các lớp rất giống như các ID, ngoại trừ việc chúng có thể được sử dụng cho một hoặc nhiều phần tử trên một trang. Như vậy, khi bạn bị hạn chế chỉ có một phần tử cho mỗi ID trên một trang, thì bạn có thể có nhiều phần tử với cùng một lớp trên một trang. Điều này dẫn đến kết quả là làm bạn thực hiện chậm trễ các hàm trên các phần tử khác nhau trên một trang trong khi bạn chỉ chọn một tên lớp.

Liệt kê 7. Chọn lớp
// Sẽ tạo nền màu đỏ cho mọi phần tử trên trang với lớp "redBack". 
// Chú ý rằng nó không kể đến phần tử HTML mà lớp "redBack" được gắn với. 

$(".redBack").css("background", "#ff0000");

<p class="redBack">This is a paragraph</p>
<div class="redBack">This is a big div</div>
<table class="redBack"><tr><td>Sample table</td></tr></table>

Kết hợp các tiêu chí tìm kiếm

Ba tiêu chí tìm kiếm ở trên, và tất cả các bộ lọc được trình bày dưới đây, có thể được kết hợp trong một tìm kiếm. Bằng việc tách các tiêu chí tìm kiếm bằng một dấu phẩy (","), thao tác tìm kiếm sẽ trả về một tập hợp của tất cả các kết quả phù hợp với thuật ngữ tìm kiếm.

Danh sách 8. Kết hợp các tìm kiếm
// Sẽ ẩn mọi <p>, <span>, hay <div>.
$("p, span, div").hide();

Các bộ lọc khác

Trong khi ta có chắc chắn ba tham số tìm kiếm được sử dụng phổ biến nhất trong jQuery, thì có rất nhiều tham số khác có thể giúp bạn nhanh chóng tìm thấy các phần tử mà bạn đang tìm kiếm trên một trang. Các bộ lọc thêm này đều bắt đầu với dấu ":" để biểu thị rằng chúng là những bộ lọc trong các thuật ngữ tìm kiếm của jQuery. Mặc dù chúng có thể đứng một mình như các tiêu chí tìm kiếm, chúng được thiết kế ban đầu với ba tiêu chí tìm kiếm như trên, cho phép bạn tinh chỉnh các tiêu chí tìm kiếm, tìm ra phần tử cụ thể mà bạn đang cần.

Liệt kê 9. Các bộ lọc khác
// Sẽ ẩn mọi thẻ <p> trên một trang
$("p").hide();

// Sẽ ẩn phần tử đầu tiên của trang, không xét đến thẻ HTML
$(":first").hide();

// Thông báo cách sử dụng tổ hợp để tìm mịn hơn với điều kiện tìm kiếm. 
// Nó sẽ chỉ ẩn thẻ <p> đầu tiên trên trang đã cho.
$("p:first").hide();

Nhiều bộ lọc có thể được sử dụng làm các phần tử tìm kiếm, và mặc dù tôi không liệt kê tất cả chúng ở đây (xét cho cùng đó là mục đích của một trang API), một vài bộ lọc trong số đó rất thuận tiện trong việc làm việc với các trang và trong việc tìm kiếm các phần tử.

Tôi sẽ dành nhiều thời gian hơn vào một số bộ lọc rất quan trọng trong phần Lựa chọn này, và đó là các bộ lọc của phần tử form. Các ứng dụng RIA ngày nay dường như tập trung vào các biểu mẫu và các phần tử được chứa trong nó (các trường văn bản, các nút, các hộp đánh dấu chọn (check boxes), các nút tròn (radio buttons), v.v..), chúng tập hợp và truyền tải thông tin đến và đi từ máy chủ. Do tầm quan trọng của chúng trong RIAs, nên các bộ lọc này có một tầm quan trọng đặc biệt trong việc làm việc với jQuery trong các loại ứng dụng web hiện tại.

Các bộ lọc này làm việc như các bộ lọc khác đã giới thiệu trong bài viết này và bắt đầu bằng một dấu ": " để biểu thị chúng là một bộ lọc. Ngoài ra, chúng có thể được sử dụng trong tổ hợp với các bộ lọc tìm kiếm khác để đảm bảo tinh chỉnh hơn nữa. Vì vậy, một bộ lọc tìm kiếm của ":text" sẽ trả lại mọi trường văn bản trên một trang, trong khi bộ lọc tìm kiếm của ":largeFont:text" sẽ chỉ trả lại các trường văn bản trên một trang, các trường này là một phần của lớp "largeFont". Điều này sẽ cho phép sàng lọc hơn nữa và thao tác của các phần tử biểu mẫu thức.

Các bộ lọc biểu mẫu cũng gồm các thuộc tính cá nhân của các phần tử, đây là những điều thích hợp và tốt mà các nhà phát triển ứng dụng phải biết. Vì vậy, các bộ lọc như ":checked", ":disabled" và ":selected"" sẽ tinh chỉnh hơn nữa các tiêu chí tìm kiếm cho một tìm kiếm nhất định.

Duyệt

Bây giờ bạn đã học được cách để tìm kiếm và lọc tất cả các phần tử trên một trang, bạn cần một phương pháp hiệu quả để duyệt các kết quả và hành động đối với các phần tử này. Ta không ngạc nhiên, jQuery cung cấp một vài phương cách để duyệt các kết quả tìm kiếm này.

Kỹ thuật duyệt đầu tiên và phổ biến nhất là sử dụng hàm each(). Hàm này giống như hàm "for loop" về mặt lập trình, vòng lặp qua từng phần tử và tăng dần (incrementing) cho phần tử với mỗi lần lặp đi lặp lại. Ngoài ra, một tham chiếu đến từng phần tử trong vòng lặp có thể được thực hiện với cú pháp "this" (để sử dụng cú pháp JavaScript đều đặn), hoặc cú pháp $(this) (để sử dụng trong các lệnh jQuery).

Ta hãy xem ví dụ sau.

Liệt kê 10. Từng vòng lặp
// Sẽ lặp qua mỗi thẻ <p> trên trang.  Thông báo sự sử dụng hàm 
// inline tại đây -- đây là sự tương tự với lớp vô danh trong Java.
// Bạn có thể gọi hàm tách biệt, hoặc viết một hàm inline thư thế này.

var increment = 1;
$("p").each(function(){

    // thêm số đếm mục vào đằng trước chúng. Thông báo ta có thể dùng biến 
    // $(this) để truy cập vào từng cá thể của các phần tử mục riêng biệt.

    $(this).text(increment + ". " + $(this).text());
    increment++;
});

Vì rằng các kết quả tìm kiếm được lưu trữ trong một mảng, nên bạn mong muốn các hàm làm việc thông qua mảng đó giống như bạn có thể làm với bất kỳ dữ liệu đối tượng nào trong bất kỳ ngôn ngữ lập trình. Vì vậy, để tìm chiều dài của một kết quả tìm kiếm nhất định, bạn có thể gọi hàm $().length trên một mảng. Một số hàm duyệt mảng khác được liệt kê như sau trong Liệt kê 11 và phù hợp một cách thích đáng với việc duyệt mảng trong các ngôn ngữ lập trình khác.

Liệt kê 11. Các hàm mảng bổ sung
// Hàm eq() đưa bạn đến một phần tử mọtt cách trực tiếp.  
// Trường hợp này, nó sẽ lấy mục thứ 3 và ẩn nó đi
$("p").eq(2).hide();

// Hàm slice() cho phép bạn đưa vào chỉ số đầu và cuối của mảng, để tạo một  
// tập con của mảng. Nó sẽ ẩn các mục từ thứ 3 đến thứ 5 trong trang này
$("p").slice(2,5).hide();

Ngoài các hàm duyệt mảng này, jQuery cũng cung cấp các hàm cho phép bạn tìm các phần tử lồng nhau theo thuật ngữ tìm kiếm của bạn. Tại sao điều này lại có ích? Vâng, điều này có ích trong trường hợp bạn muốn nhúng một nhãn văn bản bên cạnh một hình ảnh, hoặc một thông báo lỗi bên cạnh một phần tử biểu mẫu. Việc sử dụng các lệnh này cho phép bạn tìm kiếm một phần tử biểu mẫu cụ thể và sau đó đặt một thông báo lỗi trực tiếp bên cạnh nó bằng cách đặt nó vào trong phần tử tiếp theo, một thẻ nối (span tag). Liệt kê 12 là một ví dụ của thiết kế này:

Liệt kê 12. Ví dụ về hàm next()
<input type=text class=validate><span></span>

function validateForm()
{
    $(".validate:text").each(function(){
    if ($(this).val()=="")
    //  We'll loop through each textfield on the page with a class of "validate"
    //  and if they are blank, we will put text in the <span> immediately afterwards
    //  with the error message.

        $(this).next().html("This field cannot be blank");
});
}

Nhóm tất cả các bài học với nhau

Để xem cách tất cả các bài học này cùng một lúc như thế nào, bạn hãy xem phần ứng dụng trình diễn có được trong bài viết này. (Xem phần Tải về)

Bạn có thể khởi chạy nhanh ứng dụng trình diễn tại bài viết này. Tôi sẽ sử dụng ứng dụng trình diễn trong suốt loạt bài viết này, vì nó sử dụng một số ví dụ jQuery khác nhau, và đây là một ứng dụng mà gần như tất cả mọi người đều quen thuộc, ứng dụng RIA cho thư tín trên web (web mail)! Ứng dụng trình diễn này là một thư tín phía khách đơn giản, sử dụng jQuery để cho người sử dụng cảm giác làm việc với một thư điện tử phía máy khách; nó thực sự là một ứng dụng của máy tính để bàn. Tại phần cuối của bài viết cuối cùng, bạn sẽ thấy cách mà ứng dụng đơn giản này tạo ra giao diện nhìn và cảm nhận cho người sử dụng, và điều lý tưởng là bạn sẽ thấy việc tạo ra giao diện đó dễ dàng như thế nào với jQuery.

Bài viết này tập trung vào hộp chọn "Select All"/"Deselect All", xuất hiện ở cột bên trái trong bảng Web mail (được tô đậm ở hình dưới). Khi hộp chọn này được chọn, nó sẽ chọn tất cả các hộp chọn trong cột này, và khi thôi chọn, nó sẽ không chọn tất cả các hộp chọn trong cột.

Hình 2. Hộp chọn "Select All"
Hộp chọn Select All
Liệt kê 13. Nhóm tất cả các bài học với nhau
<!-- The first step is creating the Select All checkbox itself.
we give it a unique ID on the page -->

<input type=checkbox id=selectall>

<!-- The next step is giving each of the rows their own checkbox.
we put each row's checkbox into the 'selectable' class, since there can be many rows,
and we want each of the rows' checkboxes to have the same behavior. -->

<input type=checkbox class=selectable>

<!-- The final step is bringing it all together with some jQuery code. -->

// remember that all jQuery setup code must be in this document.ready() function, 
// or contained within its own function in order to function correctly.

$(document).ready(function(){
   // We use the jQuery selection syntax to find the selectall checkbox on the page
   // (note the '#' which signifies ID), and we tell jQuery to call the selectAll()
   // function every time someone clicks on the checkbox (we'll get to Events in a
   // future article).

   $("#selectall").click(selectAll);
});

// This function will get called every time someone clicks on the selectall checkbox
function selectAll()
{
    // this line determines if the selectall checkbox is checked or not.  The attr()
    // function, discussed in a future article, simply returns an attribute on the
    // given object.  In this case, it returns a boolean if true, or an undefined if
    // it's not checked.

    var checked = $("#selectall").attr("checked");

    // Now we use the jQuery selection syntax to find all the checkboxes on the page
    // with the selectable class added to them (each row's checkbox).  We get an array
    // of results back from this selection, and we can iterate through them using the
    // each() function, letting us work with each result one at a time.  Inside the
    // each() function, we can use the $(this) variable to reference each individual
    // result.  Thus, inside each loop, it finds the value of each checkbox and matches
    // it to the selectall checkbox.

    $(".selectable").each(function(){
       var subChecked = $(this).attr("checked");
       if (subChecked != checked)
          $(this).click();
    });
}

Kết luận

jQuery đang trở thành thư viện JavaScript ưa thích nhất trong cộng đồng phát triển ứng dụng web, và nó có khả năng sẽ tiếp tục mở rộng tầm quan trọng của nó vì ứng dụng RIA ngày càng trở nên phổ biến. Vì rằng nhiều công ty chuyển các ứng dụng nội bộ của họ thành ứng dụng trực tuyến, và chuyển các ứng dụng hàng ngày của máy tính để bàn của họ thành ứng dụng trực tuyến (gồm cả máy xử lý văn bản và các bảng tính), nên thư viện JavaScript, công cụ đơn giản hoá sự phát triển và sự hỗ trợ xuyên suốt các nền tảng đầy hứa hẹn, sẽ trở thành một phần của sự lựa chọn về công nghệ khi ứng dụng được kiến trúc hoá.

Bài đầu tiên này trong loạt bài viết về jQuery giới thiệu cho bạn cú pháp của jQuery, cách sử dụng đúng jQuery trong mã JavaScript của riêng bạn, và cách để tránh bất kỳ khó khăn khi sử dụng nó với các thư viện khác. Hơn nữa, bài viết này giới thiệu cho bạn cú pháp tìm kiếm của jQuery và cú pháp lựa chọn, mà tất cả các hàm khác trong jQuery dựa vào. Nó cho phép tìm thấy bất kỳ phần tử nào của trang mà bạn muốn, đơn giản và nhanh chóng, và có những hành động trên các phần tử đó. Bài viết này cũng cho bạn thấy cách làm thế nào để duyệt thông qua các kết quả từ những tìm kiếm này, cho phép bạn có những hành động trên các phần tử một cách riêng rẽ. Hai khía cạnh này của jQuery sẽ là cơ sở căn bản cho các bài viết tiếp theo của loạt bài viết này và tất cả các mã jQuery của bạn sẽ được dựa trên hai khía cạnh đó.

Cuối cùng, một ứng dụng trình diễn đã được giới thiệu, đó là ứng dụng thư điện tử phía máy khách phong phú. Trong bài viết này, bạn tạo ra hộp chọn Select All/Deselect All bằng cách sử dụng jQuery mà bạn đã học trong bài viết này, và bạn thấy rằng chỉ với một vài dòng mã, bạn có thể tạo ra một giao diện đồ họa phổ biến thường thấy ở nhiều trang web.

Bài viết tiếp theo của loạt bài viết này sẽ bổ sung thêm một số tương tác cho ứng dụng Web mẫu của chúng tôi. Bạn sẽ học cách để xử lý sự kiện trang (nhấn vào các phần tử, nhấn vào nút, chọn các combobox, v.v..), cách để lấy các giá trị từ các phần tử trên trang, và cách làm thế nào để thay đổi các CSS tiêu chuẩn trên một trang để thay đổi màu sắc, bố cục và v.v.., mà không cần phải tải lại trang.


Các tải về

Mô tảTênKích thước
Zip file containing the sample applicationjquery.zip68KB
War file containing the sample applicationjquery.war68KB

Tài nguyên

Học tập

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=457829
ArticleTitle=Làm việc với jQuery, Phần 1: Làm việc với jQuery, Phần 1: Đưa các ứng dụng của máy tính để bàn lên trình duyệt
publish-date=12182009