jQuery Hoạt Động Như Thế Nào


jQuery Hoạt Động Như Thế Nào

Giới thiệu cơ bản về jQuery và các khái niệm để bạn có thể sử dụng.
Similar Tutorials: jQuery Core, Selectors, CSS, Traversing, Manipulation, Events, Effects

CONTENTS

[edit]

CƠ BẢN

Đây là bài hướng dẫn cơ bản, nhằm giúp bạn có những kiến thức căn bản để sử dụng jQuery. Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một tài liệu HTML với nội dung như sau:
<html>
  <head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>
Sửa thuộc tính src trong thẻ script để trỏ tới jquery.js Ví dụ, nếu jquery.js ở cùng thư mục với tệp HTML, bạn có thể dùng:
<script type="text/javascript" src="jquery.js"></script>
Bạn có thể tải bản jQuery mới nhất tại trang Downloading jQuery.
[edit]

Chạy mã lúc Document Ready (trang đã sẵn sàng)

Có thể thấy rằng hầu hết các lập trình viên Javascript kết thúc mã thực thi bằng cách thêm các dòng mã vào script, tương tự như sau:
window.onload = function(){ ... }
Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Không còn gì phải bàn, tuy nhiên, mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng window.onload là để chắc chắn rằng HTML 'document' phải được tải xuống hết, sau đó mới chạy mã kia.
Để giải quyết, jQuery có câu lệnh đơn giản, được biết như ready event:
$(document).ready(function(){
   // Mã của bạn
 });
Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý bạn muốn. Hãy lấy đoạn mã mẫu ở trên và cho vào tài liệu HTML của bạn. Các ví dụ còn lại của jQuery sẽ được đặt bên trong phần callback của hàm này, chúng sẽ được thực thi khi tài liệu sẵn sàng.
[edit]

Chuyện gì xảy ra với sự kiện Click

Đầu tiên, chúng ta sẽ thử thực hiện động tác click với clicked. Bên trong ready function (từ ví dụ ở trên), thêm mã như sau:
$("a").click(function(){
   alert("Cảm ơn đã ghé thăm!");
 });
$("a").click(function(){ alert("Example about JQuery"); }); Lưu tệp HTML và tải lại trang thử nghiệm trên trình duyệt (Ctrl+F5). Bấm vào link nào đó trên trang và trình duyệt sẽ hiện ra một thông báo pop-up.
Đối với sự kiện click và hầu hết các sự kiện khác events, bạn có thể can thiệp vào hành động mặc định - ở đây, sau đây là link dẫn tới jquery.com - bằng cách trả về giá trị false từ điều khiển sự kiện:
$("a").click(function(){
   alert("Cảm ơn đã ghé thăm!");
   return false;
 });
Nếu không dùng các đoạn mã trên, nếu bạn nhấn link tới jquery.com trong trang, thì trình duyệt sẽ duyệt tới. Nhưng ở đây, trình duyệt sẽ hiện thông báo và không chuyển đi đâu cả.
[edit]

Thêm một Class (lớp với CSS)

Đây là tác vụ dùng để thêm vào (hoặc bỏ đi) các class từ phần tử nào đó, ví dụ:
$("a").addClass("test");
Nếu bạn đặt đoạn mã trên vào phần script trong header của trang HTML, thì mã tự động sinh ra sẽ là:
<style type="text/css">a.test { font-weight: bold; }
 </style>
và sau đó addClass được gọi - tất cả những phần từ A sẽ được làm đậm. Để bỏ class, bạn có thể sử dụng removeClass

[edit]

Các hiệu ứng khác

Trong jQuery, có cung cấp các thành phần effects, để làm cho website của bạn thật sự nổi bật. Để chạy thử, hãy thay đoạn mã như sau:
$("a").click(function(){
   $(this).hide("slow");
   return false;
 });
Bây giờ, nếu bạn nhấn vào liên kết có trong trang, bạn sẽ thấy nó biến mất một cách từ từ.
[edit]

KHẢ NĂNG LIÊN KẾT THÀNH CHUỖI (MỘT PHÉP THUẬT JQUERY)

jQuery cung cấp cho bạn một cách viết mã đơn giản và ngắn gọn. Nó tương tự như cách thức lập trình hướng đối tượng (object-oriented programming), nói đúng hơn đây là cách viết thẳng một hàng.
Tóm lại: Mỗi phương thức trong jQuery trả về câu truy vấn đối tượng của chính nó, nó cho phép bạn 'xích' chúng lại với nhau, ví dụ:
$("a").addClass("test").show().html("foo");
Câu lệnh này chứa những phương thức cá thể (addClass, show, và html) trả về đối tượng jQuery, nó cho phép bạn có thể tiếp dụng sử dụng phương thức để đặt cho phần tử hiện tại.
Bạn có thể dùng xa hơn nữa, bằng cách thêm hoặc bỏ phần tử từ vùng chọn, thay đổi các phần tử này và sau đó trả giá trị lại cho vùng chọn trước, ví dụ:
$("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();
Bạn tạo thêm đoạn mã HTML như sau:
<a href="http://google.com/" class="clickme">I give a message when you leave</a>
 <a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
 <a href="http://microsoft.com/">I'm a normal link</a>
Các phương thức thay đổi vùng chọn của jQuery, có thể hoàn lại với end(), nó cho biết sự kết thúc của vùng lựa chọn đó và bắt đầu áp dụng lựa chọn mới:
  • add(),
  • children(),
  • eq(),
  • filter(),
  • find(),
  • gt(),
  • lt(),
  • next(),
  • not(),
  • parent(),
  • parents() and
  • siblings().
Đọc thêm Traversing API documentation để biết thêm chi tiết về các phương thức này.
[edit]

HÀM HỒI QUY, HÀM, VÀ 'THIS'

Hàm hồi quy là một hàm được truyền như là một thông số cho một hàm khác (hàm gọi/hàm bao ngoài) và sẽ được thực thi sau khi hàm gọi hoàn tất. Điều đáng lưu ý về hàm hồi quy là tất cả những hàm xuất hiện sau "hàm gọi" có thể thực thi trước hàm hồi quy.
Một điều quan trọng khác cần lưu ý là làm thế nào dùng đúng hàm hồi quy. Đây là điều mà tôi thường hay quên cú pháp câu lệnh.
[edit]

Dùng hàm hồi quy không thông số

Đối với một hàm hồi quy không thông số, bạn có thể gọi theo cách sau:
$.get('myhtmlpage.html', myCallBack);
Lưu ý thông số thứ hai chỉ đơn giản là tên hàm (không truyền như một giá trị chuỗi ký tự và không có dấu ngoặc đơn). Các hàm trong Javascript được xem là những 'khách hàng hạng sang' và vì vậy có thể truyền như một biến số và sẽ được thực thi sau đó.
[edit]

Dùng hàm hồi quy có thông số

Bạn sẽ thắc mắc "Bạn sẽ phải gọi hàm hồi quy như thế nào nếu có thông số?".
[edit]

Sai

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

Đúng

Cách dùng đúng
$.get('myhtmlpage.html', function(){
   myCallBack(param1, param2);
 });
Lý do, bằng cách truyền một hàm vô danh (đoạn mã với...
function() { 
 /* hàm cần thực thi */
 };
...sẽ tự động gọi hàm cần thực thi với những thông số cần thiết), bạn đã hoàn tất việc gọi hàm hồi quy.
Cách dùng này đúng vì bạn truyền hàm vô danh như thông số thứ hai cho hàm $.get() mà không phải thực thi hàm đó trước khi truyền.
[edit]

ĐỌC THÊM

Những người đã và đang dùng jQuery cùng nhau soạn thảo một số tài liệu hướng dẫn hữu ích để hướng dẫn những người mới dùng jQuery lần đầu tiên như bạn hiểu và học cách ứng dụng thư viện này. Nếu chúng tôi không giải thích rõ ràng những tính năng và chức năng của thư viện jQuery... xin bạn vui lòng thông báo cho chúng tôi biết.
Đến đây, bạn có thể bắt đầu tham khảo tất cả Tài liệu dễ hiểu và bao quát về jQuery. Nếu bạn có câu hỏi hay thắc mắc, xin vui lòng gửi tin mail đến chuyên mục thư từ.

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Công ty chứng khoán đón đầu cơ hội (dau tu cong nghe)

Thứ Năm, 07/08/2008, 17:58 Công ty chứng khoán đón đầu cơ hội TTCK đang trong giai đoạn khó khăn, song nhiều CTCK vẫn mạnh tay chi hàng triệu USD đầu tư cho những sản phẩm mới tiện ích cho NĐT với quan niệm: khi suy thoái lùi bước, thị trường tăng trưởng trở lại sẽ thu hút một lượng lớn NĐT mới tham gia, lúc đó có nhanh tay đầu tư thì cơ hội cũng sẽ vụt qua. "Lửa thử vàng", CTCK được quản trị và đầu tư tốt sẽ thực sự "bứt tốp" sau giai đoạn này. Điều đáng nói là trong cuộc chạy đua đầu tư công nghệ, cơ quan quản lý cần có định hướng để những khoản đầu tư của DN không rơi vào tình cảnh lãng phí và manh mún. CTCK Doanh nghiệp nhỏ và vừa Việt Nam (SMES) đã hoàn tất các bước thử nghiệm để giới thiệu đến NĐT hệ thống phần mềm giao dịch chứng khoán S-Suit. S-Suit tích hợp 3 phần mềm giao dịch chứng khoán chuyên biệt: S-Bos, S-Pro và S-Web. Các phần mềm này trợ giúp hiệu quả cho nhân viên SMES và NĐT trong việc thực hiện giao dịch chứng khoán. NĐT có thể mở tài khoản trự...
Đọc thêm

The Redback

The Redback The Economist 2 tuần trước có một loạt bài nhân chuyến thăm Mỹ của chủ tịch Hồ Cẩm Đào, trong đó có một bài về tương lai của đồng RMB với tiêu đề " The rise of the redback ". Khác với đồng USD luôn có mầu xanh ở mặt sau (nên có tên lóng là greenback), đồng yuan TQ có nhiều màu khác nhau và "redback" là ám chỉ đồng có mệnh giá cao nhất 100 yuan. [Nếu cũng lấy chuẩn của đồng tiền có mệnh giá lớn nhất thì VNĐ sẽ được gọi là "greenback" :-)] Câu hỏi mà The Economist đặt ra là đến khi nào đồng redback sẽ qua mặt đồng greenback trong vai trò đồng tiền thanh toán quốc tế. Một câu hỏi tương tự đã từng được đặt ra cho đồng yên Nhật trước đây, và gần đây hơn là đồng euro. Mặc dù đồng USD đang chiếm thế thượng phong trên thị trường tài chính quốc tế, cả JPY lẫn EUR đều có sự hiện diện nhất định dù không lớn như share của 2 nền kinh tế này, không như CHY cho đến thời điểm này vẫn gần như một con số không dù TQ đã vượt Nhật về GDP. Lý do của sự vắng mặt n...
Đọc thêm