<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>
<script type="text/javascript" src="jquery.js"></script>
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(){ ... }
Để 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 });
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"); });
Đố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; });
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");
<style type="text/css">a.test { font-weight: bold; } </style>
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; });
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");
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();
<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>
- add(),
- children(),
- eq(),
- filter(),
- find(),
- gt(),
- lt(),
- next(),
- not(),
- parent(),
- parents() and
- siblings().
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.
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);
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ố?”.Sai
Cách dùng sai (không hoạt động)
$.get('myhtmlpage.html', myCallBack(param1, param2));
Đúng
Cách dùng đúng
$.get('myhtmlpage.html', function(){ myCallBack(param1, param2); });
function() { /* hàm cần thực thi */ };
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.
Đọ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ừ
Theo Jquery Documention
Bài viết của Hutek trên hutek.info
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.