Tìm hiểu về cơ chế hoạt động của jQuery
1. Cơ bản:
Bài thử nghiệm dưới đây được xây dựng để giúp các bạn mới bắt đầu sử
dụng jQuery. Nếu chưa có sẵn 1 trang chuyên để test thì hãy bắt đầu bằng cách
tạo trang HTML mới với mã nguồn như dưới đây:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>
Thay đổi thuộc tính src trong thẻ script để trỏ tới file jquery.js của bạn. Ví dụ, nếu
file jquery.js nằm cùng thư mục với file HTML thì chúng ta có thể sử dụng:
<script src="jquery.js"></script>
Phiên ban jQuery mới nhất được download tại đây.
2. Ghép code trên trang có sẵn:
Một trong những việc đầu tiên mà hầu hết các lập trình viên Javascript đều muốn
làm là ghép code tới chương trình, ứng dụng chính của họ. Chẳng hạn như sau:
window.onload = function(){ alert("welcome"); }
Bên trong đoạn code đó là những gì chúng ta muốn trình duyệt hoạt động khi
website được tải. Nhưng vấn đề xảy ra ở đây là đoạn mã Javascript sẽ không chạy
cho tới khi tất cả các file ảnh đã được tải hết về máy (có bao gồm các banner
quảng cáo). Lý do sử dụng window.onload là vì các văn bản HTML vẫn chưa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</body>
</html>
4. Xóa bỏ hoặc gán thêm class HTML:
Lưu ý rằng một số đoạn mã jQuery ví dụ dưới đây cần phải đặt bên trong event
ready để được thực thi khi website sẵn sàng trong trạng thái “làm việc”. Một trong
những tác vụ phổ biến là gán thêm hoặc xóa bớt class.
Trước tiên, hãy thử gán 1 số thông tin style vào trong thẻ <head> của trang web,
chẳng hạn như sau:
<style>
a.test { font-weight: bold; }
</style>
Tiếp theo, gán thêm addClass vào trong đoạn mã:
myCallBack(param1, param2)
và sau đó bỏ qua giá trị được trả về dưới dạng tham số thứ 2 tới $.get()
Tuy nhiên, vấn đề xảy ra với ví dụ trên là myCallBack(param1, param2) được
đánh giá trước khi được chuyển đi dưới dạng 1
function. Javascript và jQuery extension thường phải sử dụng các pointer
function trong những trường hợp như thế này, chẳng hạn như function
setTimeout
Ví dụ như dưới đây, 1 chức năng anonymous được khởi tạo (đơn giản chỉ là 1
khối statement) và được đăng ký dưới dạng function callback, lưu ý tới cách sử
dụng của 'function(){'. Hàm anonymous thực hiện đúng 1 chức năng duy nhất, đó
là gọi ra myCallBack với giá trị đi kèm của param1 param2.
Copyright: Tài liệu đại học ©