Làm sao để chạy jQuery?
Bạn là người hoàn toàn chưa biết gì về jQuery, bạn đang tìm hiểu về jQuery, bạn muốn viết một ví dụ minh họa nào đó để chạy những dòng lệnh jQuery bạn vừa tìm hiểu được, … nhưng bạn không biết khai báo và gọi hàm làm sao để cho các lệnh jQuery của bạn chạy được. Dưới đây là các bước và ví dụ ...
Bạn là người hoàn toàn chưa biết gì về jQuery, bạn đang tìm hiểu về jQuery, bạn muốn viết một ví dụ minh họa nào đó để chạy những dòng lệnh jQuery bạn vừa tìm hiểu được, … nhưng bạn không biết khai báo và gọi hàm làm sao để cho các lệnh jQuery của bạn chạy được. Dưới đây là các bước và ví dụ minh họa.
- Bước 1: bạn mở chương trình Notepad++, bạn tạo tập tin html có tên là “MyJQuery.html” với nội dung sau
<!doctype html> <html> <head> </head> <body> <a href="http://gockinhnghiem.com">Goc Kinh Nghiem</a> </body> </html>
- Bước 2: trong thẻ <head> bạn khai báo sử dụng jquery bằng src theo 1 trong 2 cách như sau
Cách 1: src sẽ tự động trỏ thẳng đến thư viện online của jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
Cách 2: bạn vào trang jquery.com -> chọn nút “Download(jQuery);” ( lưu ý: là nút chứ không phải menu ở trên) -> một trang toàn là text được mở -> bạn copy toàn bộ nội dung của trang này -> lưu thành file mới có tên là “jquery.js”. Bạn đặt tập tin vừa mới tạo “jquery.js” vào cùng thư mục với file “MyJQuery.html”, rồi bạn khai báo như bên dưới.
<script type="text/javascript" src="jquery.js"></script>
Chú ý: nếu bạn không muốn đặt file “jquery.js” cùng thư mục với “MyJQuery.html” thì bạn sửa lại đường dẫn cho src
- Bước 3: bạn sẽ viết một hàm dùng jQuery xuất ra thông báo khi bạn nhấn vào “Goc Kinh Nghiem”, hàm được viết như sau:
$(document).ready(function(){
$("a").click(function(event){
alert("Welcome to "Goc Kinh Nghiem"!");
});
});
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Welcome to "Goc Kinh Nghiem"!");
});
});
</script>
</head>
<body>
<a href="http://gockinhnghiem.com">Goc Kinh Nghiem</a>
</body>
</html>
Chúc các bạn thành công! 
