1. Căn bản
Để làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội dung như sau:
<html>
<head>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript”> // <font color=”#ff0000″>(*)</font> </script>
</head> <body>
<a href=”http://jquery.com/”>jQuery</a>
</body>
</html>
Bạn cần điều chỉnh lại src (nguồn) của file jquery.js. Thí dụ, nếu như file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ giống như sau:
<script type=”text/javascript” src=”jquery.js”></script>
Bạn có thể tải về file jquery.js ở [1]
1.1. Chạy code khi tài liệu sẵn sàng
Theo cách viết javascript thông thường, coder đặt code muốn brower xử lý tương tự như sau:
window.onload = function(){ // Your code here}
Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
$(document).ready(function(){ // <font color=”#ff0000″>(**)</font>});
Chú ý: Từ nay, tôi gọi vùng (**) ở đoạn code trên là vùng js chính.
Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này. Bây giờ, bạn hãy đặt đoạn code trên vào phần (*) trong file html hiện thời của bạn.
Thêm thuộc tính onclick
Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời để hiển thị một liên kết
<a href=”http://pcworld.com.vn”>Hello world</a>
Đoạn code js sau vào phần (**) để thêm thuộc tính onclick cho các thẻ “a”
$(”a”).click(function(){ alert(”Hello! How are you ?”);});
Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo “Cảm ơn đã ghé thăm!”. Bạn có thể thêm thuộc tính onclick này cho bất kỳ thẻ nào trong trang web của mình.
Thủ thuật
Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ không chuyển sang trang web toila.net
$(”a”).click(function(){ alert(”Thank for your visit!”); return false;});
1.2. Thêm class
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class vào một (nhiều) đối tượng DOM.
Thêm đoạn code sau vào phần header của trang web (định dạng cách trình bày cho class ‘test’ của các thẻ HTML có tên ‘a’)
<style type=”text/css”>a.test { font-weight: bold; }</style>
Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ ‘a’ sẽ được trình bày bằng định nghĩa ở đoạn code trên
$(”a”).addClass(”test”);
Bạn cũng có thể xóa class ra khỏi một DOM
1.3. Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem
$(”a”).click(function(){ $(this).hide(”slow”); return false;});
2. Cách gọi dây chuyền
Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình hướng đối tượng với jQuery:
$(”p”).addClass(”test”).show().html(”foo”);
Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời. Khi tương đối thành thạo jQuery, bạn có thể sẽ thấy quen thuộc đoạn code sau:
$(”a”).filter(”.clickme”).click(function() { alert(”click!”);}).end().filter(”.hideme”).click(function() { $(this).hide();});
Bạn có thể dùng trang tham khảo [2] API để biết các API mà jQuery hỗ trợ.
3. Callbacks, Functions và đối tượng ‘this’
Callback là một hàm được thực thi sau khi một hàm cha của nó được thực thi xong. Cách khai báo callback trong jQuery có phần khác với cách truyền thống.
3.1 Khai báo callback không có tham số
$.get(’myhtmlpage.html’, myCallBack);
Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ không phải là một chuỗi (không đặt giữa cặp nháy đơn)
3.2 Khai báo callback với tham số
Cách khai báo sai
$.get(’myhtmlpage.html’, myCallBack(param1, param2));
Cách khai báo đúng
$.get(’myhtmlpage.html’, function(){ myCallBack(param1, param2);})
;
[1] http://docs.jquery.com/Downloading_jQuery
[2] http://docs.jquery.com/JQuery_API
