Giới thiệu về JQuery (JS Framework)
jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng Lang.Net của Microsoft hồi đầu tháng 8, tổ chức ở Redmond, Washington. John Resig, người tạo ra jQuery, nói rằng công nghệ này có bản 1.0 vào 26/8. jQuery là kiểu thư viện JavaScript mới cần thiết cho phép các nhà phát triển làm việc "khiêm tốn" với JavaScript.
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:
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript"> // phan (**) </script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Bạn có thể tải về file jquery.js ở đây
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:
Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
//phan (*)
alert("Chào mừng bạn đến với diễn đàn Web007");
});
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://robovt.com">Diễn Đàn WEB007</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 "Hello! How are you ?". 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 trong đoạn href
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')
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("web007");
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:
alert("click!");
}).end().filter(".hideme").click(function() {
$(this).hide();
});
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('web007.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('web007.html', myCallBack(param1, param2));
Cách khai báo đúng:
$.get('myhtmlpage.html', function(){ myCallBack(param1, param2);})
Lê Khắc Thành Đạt @ 13:42 29/06/2011
Số lượt xem: 543
- AJAX là gì ? Ví dụ đầu tiên về Ajax (29/06/11)
- [JavaScript] Xây dựng 1 Rich Text Editor (29/06/11)
Các ý kiến mới nhất