PDF:

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
Michael Abernethy
Giám đốc phát triển sản phẩm
EMC
20 11 2010
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.
Xem thêm bài trong loạt bài này
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ã.
© Copyright IBM Corporation 2010
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ờ
Nhẫn hiệu đăng ký
Trang 1 của 15
developerWorks®
ibm.com/developerWorks/vn/
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.
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ờ
Trang 2 của 15
ibm.com/developerWorks/vn/
developerWorks®
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
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ờ
Trang 3 của 15
developerWorks®
ibm.com/developerWorks/vn/
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) và 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) và 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
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ờ
Trang 4 của 15
ibm.com/developerWorks/vn/
developerWorks®
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.
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ờ
Trang 5 của 15
developerWorks®
ibm.com/developerWorks/vn/
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.
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ờ
Trang 6 của 15
ibm.com/developerWorks/vn/
developerWorks®
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.
<%
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ờ
Trang 7 của 15
developerWorks®
// array
String[]
// array
String[]
ibm.com/developerWorks/vn/
containing tab names
tabNames;
containing tab links
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ụ:
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ờ
Trang 8 của 15
ibm.com/developerWorks/vn/
developerWorks®
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.
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ờ
Trang 9 của 15
developerWorks®
ibm.com/developerWorks/vn/
Hình 1. 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
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.
// 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() {
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ờ
Next
Trang 10 của 15
ibm.com/developerWorks/vn/
developerWorks®
$(".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
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ờ
Trang 11 của 15
developerWorks®
ibm.com/developerWorks/vn/
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.
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ờ
Trang 12 của 15
ibm.com/developerWorks/vn/
developerWorks®
Các tải về
Mô tả
Tên
Kích thước
Zip file containing the sample application
jquery.zip
68KB
War file containing the sample application
jquery.war
68KB
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ờ
Trang 13 của 15
developerWorks®
ibm.com/developerWorks/vn/
Tài nguyên
• Tải xuống jQuery phiên bản 1.2.6 lược giản, đây là phiên bản ổn định mới nhất tại thời điểm
của bài viết này, và thả nó và trong mã của riêng bạn.
• Tìm hiểu trang API đầy đủ của jQuery để xem tất cả các hàm có sẵn trong thư viện.
• Bạn lo lắng về khả năng tương thích của jQuery qua trình duyệt? Hãy xem danh sách các hỗ
trợ qua trình duyệt tại đây.
• Xem các hiệu ứng cao cấp thực sự tuyệt mà bạn có thể tạo bằng jQuery.
• Tải về một nền tảng toàn diện và đầy đủ về CSS, JavaScript, và về bất kỳ ngôn ngữ web nào
khác tại trang W3Schools.
• Đọc tổng quan chung về jQuery trong bài giới thiệu "Đơn giản hóa sự phát triển Ajax với
jQuery", (Jesse Skinner, developerWorks, tháng 4/2007).
• Bài viết "Xem xét toàn bộ Ajax, Phần 2: Tân trang các trang web hiện có với jQuery, Ajax, các
mẹo công cụ và ứng dụng lightbox" (Brian Dillard, developerWorks, tháng 5/2008) là một bài
nghiên cứu một số các trình cắm thêm sẵn có cho jQuery và nói về cách chúng mở rộng tính
hữu dụng của thư viện.
• Mở rộng kỹ năng phát triển Web của bạn với các bài báo và các hướng dẫn chuyên về công
nghệ Web tại vùng phát triển web của trang developerWorks.
• Hãy tham gia vào blog của trang developerWorks và tham gia vào cộng đồng
developerWorks.
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ờ
Trang 14 của 15
ibm.com/developerWorks/vn/
developerWorks®
Đôi nét về tác giả
Michael Abernethy
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.
© Copyright IBM Corporation 2010
(www.ibm.com/legal/copytrade.shtml)
Nhẫn hiệu đăng ký
(www.ibm.com/developerworks/vn/ibm/trademarks/)
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ờ
Trang 15 của 15