Làm việc với jQuery, Phần 2: jQuery: Xây dựng các ứng dụng web của tương lai ngay bây giờ

Sự kiện, thuộc tính và CSS

Bài thứ hai này trong loạt bài về jQuery bàn về cách để thêm nhiều tương tác vào bất kỳ trang web nào để tạo một ứng dụng Internet phong phú động. Hãy học cách jQuery sử dụng sự kết hợp các sự kiện được tạo bởi tương tác người dùng, các thông tin được thu thập từ chính trang web và khả năng thay đổi việc nhìn và cảm nhận của ứng dụng mà không cần phải tải lại để tạo các RIAs nhanh chóng và dễ dàng.

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

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.



20 11 2010

Giới thiệu

JQuery đã phát triển nhanh chóng và phổ biến trong sáu tháng qua để trở thành một thư viện JavaScript được lựa chọn cho các nhà phát triển Web. Điều này trùng với sự tăng trưởng nhanh chóng về sử dụng và nhu cầu về Ứng dụng Internet phong phú-RIAs, sẽ thay thế các ứng dụng trên máy tính để bàn bằng các ứng dụng dựa trên trình duyệt. Tất cả mọi thứ, từ các bảng tính đến bảng lương và ứng dụng thư điện tử lặp lại kinh nghiệm của máy bàn trong trình duyệt. Vì rằng các ứng dụng này trở nên nhiều và phức tạp hơn, nên thư viện JavaScript sẽ trở nên quan trọng hơn bao giờ hết với vai trò là nền tảng vững chắc để xây dựng trên đó. JQuery là nền tảng lựa chọn đối với các nhà phát triển. Loạt bài này khám phá jQuery sâu hơn và cung cấp một nền tảng vững chắc mà từ đó bất kỳ nhà phát triển nào cũng có thể xây dựng một RIA nhanh chóng và dễ dàng.

Trong bài viết trước, bạn đã học những điều căn bản của jQuery, bao gồm cách thiết lập jQuery trong môi trường phát triển của bạn và cách mà các hàm lõi của nó làm việc. Bạn biết được cách jQuery làm cho việc tìm và phát hiện dễ dàng các phần tử trên trang với các phương thức chọn và lọc và cách mà bạn có thể tìm thấy chính xác những phần tử đơn hoặc các nhóm phần tử mà bạn đang tìm kiếm. Tiếp theo bạn đã đến các phương thức khác nhau mà jQuery cung cấp cho bạn để duyệt các kết quả đã chọn, với nhiều hàm giống như những hàm mà bạn quen thuộc trong các ngôn ngữ lập trình khác. Cuối cùng, bạn đã đến một điều khiển mẫu, hộp chọn Select All/Deselect All và thấy cách jQuery có thể thực hiện được điều khiển này chỉ bằng một vài dòng mã.

Trong bài viết này, bạn hãy mở rộng kiến thức về jQuery của mình bằng cách xem xét hàm nhấp nháy, và thêm "phong phú" thực sự vào ứng dụng Internet cũ đơn sơ của mình để bạn có thể biến một ứng dụng RIA thành một ứng dụng quảng cáo. Trước tiên, tôi sẽ bắt đầu bằng việc chỉ cho bạn biết cách jQuery xử lý sự kiện. Sự kiện được định nghĩa là một cú nhấp chuột, tô sáng mầu, kéo chuột, vv… Lưu ý rằng các sự kiện này không giới hạn chỉ các nút và những thứ tương tự, mà chúng còn có thể được thực hiện để xử lý một cú nhấp chuột vào bất kỳ lệnh div, span, vv… nào . Tiếp theo, tôi sẽ chuyển sang thảo luận cách có được và thiết lập các thuộc tính trên các đối tượng trong trang Web. Nó bao gồm cách để có được văn bản từ các phần tử khuôn dạng innerHTML từ divs, và thậm chí cách tìm ra lớp nào được gắn với phần tử nào. Phần cuối sẽ thảo luận cách để sửa đổi các đặc tính CSS của các phần tử trang, mà không cần phải tải lại trang hoặc điều chỉnh tờ kiểu dáng bên ngoài.

Ứng dụng mẫu sẽ bao gồm tất cả mọi thứ trong các thanh điều khiển phụ đối với các ứng dụng thư tín trên Web, chỉ cho bạn biết cách có thể tạo một ứng dụng phía khách đa dạng, thay đổi màu sắc, kích thước và vị trí của các đối tượng dựa trên tương tác với trang. (Các tương tác này hiện thời giới hạn ở ứng dụng phía khách — bài tiếp sẽ bổ sung các tương tác phía máy chủ). Kết thúc bài này, bạn sẽ có tất cả các công cụ của jQuery để tạo RIA của riêng bạn và gây ấn tượng cho khách hàng của bạn.

Mô-đun các sự kiện - Events

Mô-đun Events trong jQuery thực sự là bước đầu trong việc xây dựng tương tác với ứng dụng Web, vì rằng các sự kiện thường là các kích hoạt cho những gì sẽ xuất hiện trên trang. Như tôi đã chỉ rõ trong phần giới thiệu, bạn không nên nghĩ rằng các sự kiện chỉ xảy ra với phần tử Form — trên thực tế, bất kỳ phần tử nào cũng có thể kích hoạt sự kiện, và bạn có thể tận dụng lợi thế này để xây dựng một điều khiển tùy chỉnh dễ dàng hơn và thêm vài tương tác có thể là duy nhất và không bị gắn với bản thân phần tử Form cụ thể.

Điều đó có nghĩa hầu hết các sự kiện được dựa trên các phần tử Form, và việc trình diễn mỗi phương thức này nhờ sử dụng chúng là điều dễ dàng nhất. Trước khi đi sâu vào các hàm sẵn có, bạn hãy lưu ý rằng mô-đun Events đi sau một khuôn mẫu nhất định cho từng hàm. Mỗi hàm sự kiện đều có hai dạng: dạng không có bất kỳ đối số nào, và dạng có chứa một hàm làm đối số. Sự khác biệt giữa hai dạng này rất quan trọng, và nó nhất quán cho từng hàm. Hàm không có tham số thực sự sẽ kích hoạt sự kiện đó. Nói cách khác, gọi hàm click() thực sự sẽ làm cho các nút được nhấn vào. Câu click(function) sẽ được gọi khi nút đó thực sự được nhấn, hoặc khi hàm click() được gọi. Lẫn lộn không? Có lẽ đây chỉ là sự mô tả, nhưng khi bạn xem một ví dụ, nó sẽ trở nên rõ ràng.

Liệt kê 1. Các phương thức sự kiện của jQuery
// make the "myButton" click.  This will cause the button to click and any actions
// tied to it will occur - for example, it could submit a form, or other
// jQuery actions could be tied to it.
$("#myButton").click();

// use jQuery to setup what will actually happen when the "myButton" is
// actually clicked.
$("#myButton").click(function(){
   $("#myDiv").toggle();
});

// A common pattern in jQuery when setting up actions on a page is to trigger the
// action to occur initially when the page is loaded.  This occurs frequently
// with AJAX setups, where the values come from the server. 
// In this example, the myDiv has its visibility toggled every button click.  When
// the page is loaded, we call click() immediately, which toggles the view
// as soon as the page views (not a practical example, but you should see the design)
$("#myButton").click(function(){
   $("#myDiv").toggle();
}).click();

Các sự kiện mà tôi liệt kê dưới đây tất cả theo thiết kế mà tôi mô tả ở trên và có hai hàm liên kết với chúng. Ở đây tôi chỉ liệt kê một cách ngắn gọn các hàm đầu tiên:

  • blur() - Được gọi bất cứ khi nào một phần tử Form bị mờ nét, giống như khi một trường văn bản rõ nét bị làm mờ
  • change() - Được gọi khi một phần tử Form bị mờ nét và giá trị của nó đã thay đổi kể từ khi nó được làm rõ nét. Internet Explorer và Firefox xử lý vấn đề này hơi khác nhau.
  • click() - Được gọi khi một phần tử trang (không nhất thiết phải là một phần tử Form) được nhấn vào
  • dblclick() - Được gọi khi một phần tử trang (không phải là một phần tử Form) được nhấn vào
  • error() - Được gọi khi có một lỗi bên trong trên phần tử, khác nhau giữa các trình duyệt, và có lẽ nhiều người không thấy điều này
  • focus() - Được gọi là khi một phần tử Form được làm rõ nét
  • keydown() - Được gọi bất cứ khi nào một phần tử trang có một phím nhấn được thực hiện trên nó/trong nó
  • keyup() - Được gọi bất cứ khi nào một phần tử trang có một phím nhấn được thực hiện trên nó/trong nó
  • keypress() - Được gọi khi một nhấn phím và nhả phím được thực hiện kế tiếp nhanh trên cùng một phần tử
  • select() - Được gọi khi một văn bản được chọn trong trường văn bản, và không phải khi mọi việc được lựa chọn trong một hộp kết hợp (đó là một sự kiện thay đổi)
  • submit() - Được gọi khi một phần tử Form được đệ trình

Có các hàm phụ không tuân theo mẫu tôi đã nêu ở trên và chỉ chứa một hàm đơn mà bạn có thể gọi. Tôi sẽ liệt kê các ngoại lệ ở đây, vì chúng không thường được sử dụng:

  • resize(fn) - Được gọi khi một đối tượng được thay đổi kích cỡ
  • scroll(fn) - Được gọi là khi một khung nội tuyến được cuộn
  • load(fn)/unload(fn) - Xảy ra khi đối tượng được tải lên/bị dỡ khỏi trang

Cuối cùng, một số sự kiện được gắn với chuột, như bạn mong đợi. Tôi đã kèm các sự kiện này trong phần thứ ba của chúng, vì chúng thường bị lạm dụng, và jQuery, do đã nhận thức được điều này, nên đã thay thế vài sự kiện bằng các hàm duy nhất. Chúng có mặt ở đây chỉ để ánh xạ trực tiếp đến các sự kiện DOM cơ bản, nhưng đối với đích thực hành, có các phương thức thay thế mà bạn có thể sử dụng thay vì sự kiện. Các phương thức mousedown(fn)mouseup(fn) được gọi khi chuột được nhấn hoặc được nhả ra trên một phần tử. Tuy nhiên, thường thì phương thức click() nên được gọi thay thế, vì nó cũng sẽ được trả lại như sự kiện, và nó phù hợp với hành vi mong đợi hơn và ít dễ gây lỗi. Hãy tưởng tượng những gì xảy ra khi người dùng nhấn chuột vào một nút của họ, và nhận ra đó là một sai lầm và di chuyển con chuột khỏi nút trước khi nhả chuột. Nếu họ nhả chuột trên một phần tử trang khác với phương thức mouseup(fn) đã xác định, thì hành vi nào sẽ diễn ra? Lý tưởng nhất là việc sử dụng hai hàm đó được giới hạn trong giao diện kéo và thả, nơi mà cú nhấp chuột sẽ không làm thay thế thích hợp.

Hai phương thức cuối cùng của mô-đun Sự kiện, mouseover(fn)mouseout(fn), là khá phổ biến trong hầu hết các trang web hiện tại. Chúng được sử dụng để hiển thị giúp di chuột, hộp nổi để hiển thị hình ảnh và thay đổi màu theo vị trí của con trỏ chuột. JQuery nhận thức rằng hai hàm đó sẽ được sử dụng khá thường xuyên và cũng nhận ra rằng hầu hết mọi người sẽ không sử dụng chúng một cách chính xác, dẫn đến vô số lỗi. Đây không phải là mọi người có chủ đích đưa lỗi vào mã của họ, mà là họ không có khả năng mã hóa cho các thành phần lồng nhau và phức tạp khác của trang. Vậy, jQuery đã thêm một phương thức vào mô-đun Sự kiện để thay thế hai hàm đó, đó là hàm hover(fn1, fn2).

Liệt kê 2. Phương thức di chuột của jQuery
// This demonstrates the hover() function as implemented by jQuery.  You define two
// functions:  what happens when the mouse moves over the specified element
// and what happens when the mouse moves off the element.
// In this example, each row in a table will get a red background when
// the mouse moves over it and a white background when the mouse leaves.
$("tr").hover(function(){
   $(this).css("background","#0000ff");
},
function(){
   $(this).css("background","#ffffff");
});

Các thuộc tính

Một phần của những gì làm cho một trang tương tác được là khả năng lấy thông tin nhất định từ một vùng của trang và chuyển nó đến một vị trí khác. Ví dụ này là việc cụ thể nhận thông tin từ một trường văn bản và đặt nó vào một bảng, hoặc nó có thể là một ví dụ rộng hơn như lấy thông tin từ hộp kết hợp, chuyển nó đến máy chủ, và đưa các phản hồi từ máy chủ vào các hộp kết hợp khác. Tại phần lõi của nó, tính tương tác là kết quả của việc chuyển giao thông tin trên trang.

Có nhiều cách khác nhau để lưu trữ thông tin trên một trang, và các cách đặc biệt khác để lưu trữ thông tin trong các phần tử riêng trên trang. Có lẽ bạn tưởng tượng phần tử <p> đơn giản sẽ không chứa thông tin nhiều như một trường văn bản (điều này có thể đúng hoặc không), và kết quả là có những hàm khác nhau để truy cập thông tin này. Tương tự như vậy, bạn có thể kết luận rằng đối với mỗi cách để có được thông tin từ một phần tử trang, bạn cũng có thể thiết lập thông tin về những phần tử đó. Thực tế, mỗi phần tử trang là một đối tượng dữ liệu, chứa các biến được đóng gói bằng phương thức getter/setter. Sự khác biệt giữa mô hình JavaBean này và những gì thực sự xảy ra trong jQuery là các tên của phương thức và giới hạn mà một số phần tử không phù hợp với một số hàm nhất định.

Trước khi đi sâu vào những phương thức này, chúng ta xem những thông tin nào có thể được lưu trữ trong các phần tử trang. Một số thẻ đơn giản như <p> chỉ có thể chứa CLASS hoặc ID làm thông tin. Một thẻ nào đó, chẳng hạn như <img>có thể chứa nhiều thông tin hơn, chẳng hạn "src", "alt", "width", và "height". Cuối cùng là các thẻ phức tạp như <input type="password"> có thể chứa những thông tin như "defaultValue", "maxLength", " readOnly ", hay "Accesskey".

Tính đa dạng của các biến tiềm năng đã buộc jQuery phải tạo hàm tổng quát để truy cập chúng. Hàm này là attr(name) và là cách tổng quát để truy cập thông tin từ bất kỳ phần tử trang nào. Ta hãy xem một số ví dụ để xem cách nó hoạt động như thế nào.

Liệt kê 3. Hàm jQuery attr()
<img src="/images/space.gif" id="spacer" class="a b c" alt="blank">

// Calls to the attr() function will return the following
$("#spacer").attr("src"); // will return "/images/space.gif"
$("#spacer").attr("alt"); // will return "blank"

// Similarly, you can access the ID in the same way
$(img).each(function(){
   $(this).attr("id"); // will return "spacer"
});

Hàm này trở nên rất hữu ích khi bạn đang cố thêm tương tác trên một trang và thực hiện nó một cách gọn. Thực tế, trước khi các hàm data() được thêm (xem liệt kê bên dưới), bạn thường phải đưa các thông tin bạn cần vào một trong những biến có sẵn. Ví dụ, nếu bạn đã có một trang với hai khung, khung đầu tiên hiển thị các nhãn và khung phía dưới hiển thị nội dung của mỗi nhãn, thì bạn có thể thiết lập một trang như sau:

Liệt kê 4. Hàm attr() hoạt động
<!-- This would appear in the top frame as a tab.  The CSS file would control how
     the tab appears, and the only HTML code needed would be this -->
<td>
   <div class="tab" id="/messages.jsp">Messages</div>
</td>

// This code would appear in the jQuery section.  Notice how we get the ID from the tab,
// and use that information to set the bottom frame, named 'content' with the content
// on the page "messages.jsp"

$(".tab").click( function() {
   window.parent.frames['content'].location = $(this).attr("id");
});

Ngoài việc nhận các giá trị thuộc tính trên mỗi phần tử, bạn cũng có thể thiết lập các giá trị. Điều này đã tác động đến việc thay đổi hình dạng hoặc các hành vi của phần tử về mặt lập trình.

Liệt kê 5. Thay đổi thuộc tính bằng hàm attr(str)
// will change the image source, and the image displayed on the page will change
$("img").attr("src", "myimage.jpg");

// will change all the links on the page to go to one specific page
$("a").attr("href", "mypage.html");

// will change the maxLength on all password fields to 10 characters
$(":password").attr("maxLength", "10");

Các phần tử Form trên một trang có hàm đặc biệt có thể được gọi trên các phần tử đó để có lấy giá trị gắn liền với chúng. Điều này đặc biệt tiện khi làm việc với các khuôn dạng và kiểm chứng, và bạn sẽ có khả năng sử dụng các hàm này khá thường xuyên khi tạo các trang Web tương tác với các phần tử Form.

Liệt kê 6. Các hàm val() của phần tử Form
// will get the text contained in the text field and check that it's not blank
$(":textfield").each(function(){
   // use the val() function to get the text inside the textfield
   if ($(this).val() == "")
       $(this).next().text("Error");
});

// on a new password page, this will compare the new one with the confirmation,
// to make sure they are equal
if ($("#newPassword").val() != $("#confirmPass").val())
   $("#newPassword").next().text("Error");

Ngoài ra có các hàm cho phép bạn lấy thông tin trong các thẻ nhất định. Tại sao điều này lại có ích? Vâng, bạn có thể nhận tất cả thông tin trong một thẻ <td> nhất định, và thay thế nó, hoặc bạn có thể biến tất cả các văn bản trong thẻ <p> thành chữ thường. Có hai cách riêng biệt để nhận được những thuộc tính này, và bạn không thể sử dụng hàm attr() như vậy. Giống như tất cả các hàm thuộc tính khác, chúng cũng có các phương thức thiết lập tương ứng. Đầu tiên là hàm html() trả về tất cả các innerHTML của một thẻ nhất định. Thứ hai là thẻ text() trả về tất cả các văn bản bên trong của một thẻ nhất định. Sự khác biệt là gì? Hàm html() sẽ trả về văn bản bao gồm các thẻ HTML, trong khi thẻ text() sẽ bỏ các thẻ và chỉ trả về văn bản bên trong. Ta hãy xem các ví dụ sau để xem cách chúng khác nhau như thế nào.

Liệt kê 7. Hàm html() so với hàm text()
// this will examine every <td> tag, and if the value is blank, it will insert
// a "-" into it, as a placeholder.
$("td").each(function(){
   // check the text of the table cell
   if ($(this).text() == "")
       $(this).text("-");
});

// this will convert every paragraph's text to lowercase
$("p").each(function(){
   var oldText = $(this).text();
   var newText = oldText.toLowerCase();
   $(this).text(newText);
});

<-- This shows the difference between text() and html() -->
<div id="sample"><b>This is the example</b></div>

$("#sample").html(); // will return "<b> This is the example</b>"
$("#sample").text(); // will return "This is an example"

Cuối cùng, phần vừa mới thêm vào thư viện jQuery cho các thuộc tính là chức năng data(). Chức năng phát triển bên ngoài dự án giao diện người dùng jQuery và gần đây đã được tích hợp vào dự án jQuery tổng thể. Về bản chất, các nhà phát triển dự án giao diện người dùng cảm thấy họ không muốn "tấn công" các thuộc tính có sẵn cho một vài phần tử trang và muốn có một cách để tạo các thuộc tính riêng của mình, càng nhiều càng tốt, mà trên đó họ có thể lưu thông tin. Trở lại ví dụ về các thẻ ở trên. Tôi "tấn công" liên kết bên trong ID của DIV, có thể không phải là phương thức lý tưởng. Tuy nhiên, do hạn chế của phiên bản trước của jQuery, đây là sự lựa chọn duy nhất. Với việc đưa vào các hàm data(), bạn có thể cung cấp giải pháp tao nhã hơn đối với vấn đề này. Hãy nghĩ rằng các hàm data() như một cách để truy cập vào sơ đồ trong, có trên mỗi phần tử trang. Sơ đồ đơn giản chỉ là một tập hợp của các cặp khóa-giá trị. Điều này cho phép các nhà phát triển tạo bất kỳ thuộc tính tùy chỉnh họ muốn cho một phần tử trang và gán giá trị cho thuộc tính đó. Về sau điều này có thể dẫn đến mã đơn giản hơn, và vì rằng dự án ngày càng phát triển hơn, nên dễ dàng bảo trì hơn. Hãy viết lại ví dụ trên bằng cách sử dụng hàm data() mới:

Liệt kê 8. Hàm data() mới
// create the div like we did above, but without any specific information.  In this
// way we can create a generic HTML layout and customize it in our jQuery code.

<td>
   <div class="tab"> </div>
</td>

// Now customize each tab in the jQuery code.

$(".tab").eq(0).text("Messages");
$(".tab").eq(0).data("link", "messages.jsp");
$(".tab").click(function(){
   window.parent.frames['content'].location = $(this).data("link");
});

// Taking this a step further, you can picture all this information coming from
// an external properties file via a Java array.  This would be the code on a JSP
// page.  

<%
  // array containing tab names
  String[] tabNames;
  // array containing tab links
  String[] links;

  for (int i=0; i<tabNames.length; i++) {
%>
  $(".tab").eq(<%=i%>.text("<%=tabNames[i]%>");
  $(".tab").eq(<%=i%>).data("link", "<%=links[i] %>);
<% } %>

$(".tab").click(function(){
   window.parent.frames['content'].location = $(this).data("link");
});

Thao tác CSS

Phần cuối cùng của bài học này là thao tác CSS động trên trang web mà không cần điều chỉnh các tờ mẫu hoặc tải lại trang. Điều này sẽ cho chúng ta khả năng thêm một số hiệu ứng cơ bản vào trang bằng cách thay đổi những thứ đơn giản như màu sắc, phông chữ vv... Phần CSS của jQuery thực sự là nguồn cảm hứng ban đầu cho toàn thư viện. Đích là để làm cho lập trình CSS trở nên dễ dàng hơn trên trang web và, như bạn thấy, dự án đã phát triển đáng kể từ lúc đó. Ý định ban đầu của dự án vẫn còn tồn tại, và jQuery cung cấp các phương thức để lập trình với CSS trở nên dễ dàng hơn nhiều. Tuy nhiên, tôi sẽ chỉ cho bạn thấy rằng hàm truyền thống mà jQuery cung cấp cho thao tác CSS không thực sự thích hợp với môi trường Web hiện nay, và tôi sẽ chỉ cho bạn hàm khác (cũng trong jQuery) mà bạn nên sử dụng thay thế.

Hai hàm cơ bản để thao tác CSS trên trang web cho phép bạn nhập một thuộc tính đơn như một chuỗi và sau đó nhập một giá trị như một chuỗi, hoặc bạn có thể truy cập vào một mảng của chuỗi/giá trị chuỗi cùng một lúc. Cả hai hàm cùng làm một việc và sẽ thay đổi dễ dàng CSS trên trang web.

Liệt kê 9. Các hàm css()
// change the background of every div to red
$("div").css("backgroundColor", "#ff0000");
// - or - 
$("div").css("backgroundColor", "red");
// - or - 
$("div").css({backgroundColor: "#ff0000"}); // notice the braces and lack of quotes

Bạn có thể thấy rằng các hàm này khá đơn giản, và bạn có thể chọn chúng ngay lập tức. Tuy nhiên, bạn cũng nên xem các vấn đề đi với các hàm đó khi xét xu hướng hiện nay trong thiết kế trang web. Các trang web bình thường có kiểu tách khỏi trang này và được đặt trong một tệp ngoài hoặc trong một phần của mã, trong tờ mẫu. Bạn có thể hoàn toàn không muốn đặt mã kiểu vào trong mã JavaScript nếu bạn có thể giúp làm việc này. Điều đó sẽ làm thay đổi tương lai đến nhìn về khó khăn tại trang Web.

May mắn thay, ta có các hàm thay thế cho phép làm việc tốt là tách biệt các thao tác bạn cần, trong khi vẫn để thao tác CSS dễ dàng và đơn giản. Các hàm này cho phép bạn thêm và bớt các lớp từ các phần tử trang. Bằng cách đặt kiểu dáng cho các lớp này tại các tờ mẫu bên ngoài, bạn có thể giữ sự tách biệt về kiểu, dữ liệu và các sự kiện, là điều nặng nề trong trang phức tạp. Ta hãy xem một vài ví dụ:

Liệt kê 10. Các thao tác CSS được ưa chuộng - addClass() và removeClass()
// will add the "input_error" class to any form elements that fail to validate
// you can picture the "input_error" class in the external CSS file defining
// a red border and red text

$(":textfield").each(function(){
   if ($(this).val() == "")
   {
       $(this).next().text("Error");
       // this will turn the text field's border/text red
       $(this).addClass("input_error");
   }
   // this tests if the text field has the class attached already
   else if ($(this).hasClass("input_error"))
   {
       $(this).next().text("");
       // this will remove the class, restoring a normal border/text
       $(this).removeClass("input_error");
   }
});

Như bạn thấy từ ví dụ trên, việc điều chỉnh CSS bằng tham chiếu đến lớp được định nghĩa tại tờ mẫu là cách tốt hơn để thao tác CSS trên trang web. Nó cho phép người tạo trang Web thay đổi cách xử lý thông báo lỗi trên toàn bộ trang web bằng cách thay đổi tờ mẫu, thay vì cố gắng tìm kiếm từng cá thể của mã này, như được yêu cầu gọi phương thức css() trước đó. Mặc dù các phương thức đó dễ sử dụng, và đơn giản, chúng không thực là giải pháp cho ứng dụng Web lớn và nên tránh sử dụng khi ta ưu tiên các phương thức addClass() và removeClass().

Kết hợp tất cả lại với nhau

Để kết hợp tất cả lại với nhau, ta hãy xem lại ví dụ. Đó là một ứng dụng web với tính tương tác nhằm tạo một RIA và cho người dùng những ấn tượng về làm việc với một ứng dụng máy tính để bàn cho thư điện tử của họ. Trong ví dụ này bạn sẽ sử dụng các mô-đun sự kiện, thuộc tính và CSS để định nghĩa cách ứng dụng thư điện tử trên Web mail xử lý các cú nhấn chuột đơn và nhấn chuột đúp. Bạn có thể xem các hành vi mong đợi từ ảnh chụp màn hình dưới đây. Khi một người dùng nhấp chuột đơn trên một dòng của bảng, hàng sẽ thay đổi màu sắc để làm nổi bật lựa chọn hiện tại của người dùng. Khi người dùng nhấp chuột đúp vào tin nhắn, nó sẽ cho phép người dùng đọc tin, và còn thay đổi màu nền của hàng nếu người dùng đang đọc một tin mới, chỉ ra rằng tin đó không còn là tin chưa đọc nữa.

Hình 1. Nhấn chuột đơn vào một hàng
Nhấn chuột đơn vào một hàng
Hình 2. Nhấn chuột đúp vào một hàng
Nhấn chuột đúp vào một hàng
Liệt kê 11. Kết hợp tất cả lại với nhau
// First we add the rows to the table.  Each row is a member of the "messageRow" class.
//  We also give an ID to each row, and this ID is the message number itself, which is 
// gotten from the Java data object. Keep in mind this sits in a for loop in a JSP file.

<%
   for (int i=0; i<messages.size(); i++)
   {
      MessageData message = messages.get(i);
%>
      <tr class="messageRow" id="<%=message.id %>">
      
// Now that the table has been laid out, we can define our jQuery code to capture single
// mouse clicks and double mouse clicks.

// Notice how we capture a single click on the table row with the click() function.  Next
// notice how we use addClass() and removeClass() instead of manipulating the CSS
// directly with a css() function.  This lets us change the stylesheet underneath
// the code without modifying our jQuery code.
$(".messageRow").click(function() {
     $(".messageRow").removeClass("message_selected");
     $(this).addClass("message_selected");
});

// Now we capture the double click on a table row.  Ignore the AJAX methods with the
// post() function, which we'll get to in the next article.
// We use the dblclick() function here to capture double clicks.
// Notice in the AJAX call, how we get the ID out of the table row that was double 
// clicked.
// We pass this ID to the server in order to get the information about the message back
// from the server.  We defined the message number in the JSP code, so that the ID
// contained the message number.
$(".messageRow").dblclick(function() {
     if ($(this).hasClass("mail_unread"))
     {
         $(this).removeClass("mail_unread");
     }
     $.post("<%=HtmlServlet.READ_MESSAGE%>.do", 
     {
            messageId: $(this).attr("id"),
            view: "<%=view %>"}, 
            function(data){
            // Do AJAX stuff here
            });
     });
});

Kết luận

Tầm quan trọng của thư viện JavaScript như jQuery sẽ tiếp tục phát triển vì các ứng dụng đang chuyển từ máy tính để bàn sang trình duyệt. Các ứng dụng này sẽ tiếp tục càng ngày càng phức tạp, khiến nền tảng vững chắc qua trình duyệt như jQuery trở thành điều cần thiết trong bất kỳ dự án ứng dụng Web nào. JQuery bản thân nó đã bắt đầu vượt xa các thư viện khác của JavaScript và đang trở thành thư viện được lựa chọn của nhiều nhà phát triển do tính dễ sử dụng và khả năng của để làm tất cả mọi thứ mà họ cần nó làm.

Trong bài thứ hai trong loạt bài này, bạn đã mở rộng kiến thức về jQuery của mình bằng cách xem các tương tác trên trang Web và thấy cách đạt được tương tác cơ bản trên máy khách (mà không cần nhận được thông tin từ máy chủ). Bạn đã bắt đầu bằng cách xem các mô-đun sự kiện, mà định nghĩa cách các phần tử trang tương tác với vô số các tương tác, bao gồm tương tác chuột, tương tác bàn phím và tương tác làm nổi bật. Bạn đã thấy rằng các sự kiện là trình điều khiển lớn cho tương tác trên các trang Web, và rằng chúng không nhất thiết phải được gắn liền với các phần tử Form để được sử dụng. Sau đó tôi chuyển sang thảo luận về các thuộc tính, và cách lấy phù hợp các thuộc tính từ các phần tử trang và đặt chúng trên đó. Bạn thấy rằng hàm attr() dùng chung có thể được sử dụng chung trên mọi phần tử, và rằng các phần tử Form có các hàm đặc biệt để lấy giá trị của chúng. Bạn cũng thấy một bổ sung mới vào jQuery, đó là hàm data(), nó phục vụ như là một loại HashMap trên tất cả các phần tử trang, cho phép người lập trình tạo bất kỳ thuộc tính nào mà họ có thể cần đến. Cuối cùng bạn xem xét cách thay đổi CSS của một phần tử trang mà không cần tải lại trang. Bạn đã thấy rằng khi hàm css() trở nên dễ dàng và đơn giản, thì nó có lẽ là mối quan tâm lớn của bạn và nhóm của bạn để thay thế các hàm này bằng các hàm addClass() và removeClass(), để giữ được kiểu dáng của trang được tách ra từ mã jQuery.

Phần cuối cùng của bài kết hợp ba mô-đun bạn đã học được với nhau và cho bạn biết cách ứng dụng thư tín Web mẫu xử lý tương tác với chuột, sự khác biệt giữa nhấp chuột đơn - bằng cách làm nổi bật một hàng được nhấn chuột, với nhấn chuột đúp, đánh dấu tin nhắn là "chưa đọc" nếu đúng và sau đó thực hiện cuộc gọi Ajax đến máy chủ cho các dữ liệu thông điệp cụ thể, chuyển số tin nhắn đến máy chủ trong tiến trình.

Trong phần tiếp theo của loạt bài viết, chúng ta sẽ xem xét sâu hơn chức năng Ajax trong jQuery và xem cách nó bỏ nhiều thứ phức tạp khi làm việc với Ajax, làm cho nó trở nên đơn giản như gọi hàm JavaScript, như điều mà bạn thường làm. Ngoài ra, chúng ta sẽ xem xét mô-đun Effects trong jQuery, nó hữu ích cho việc tạo các tương tác bổ sung và các tác động đến thị giác của người sử dụng — và nói một cách thẳng thắn, nó cũng rất tuyệt! Phần cuối cùng của bài tiếp theo sẽ là ứng dụng thư điện tử Web để trình diễn và dạy về jQuery, hy vọng sẽ thuyết phục được bạn rằng nên thêm thư viện này vào ứng dụng Web của riêng mình.


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=580303
ArticleTitle=Làm việc với jQuery, Phần 2: jQuery: Xây dựng các ứng dụng web của tương lai ngay bây giờ
publish-date=11202010