Cài đặt và sử dụng giản đơn jQuery trong ứng dụng Web
Có 3 cách để cài đặt jQuery:
- Cài đặt jQuery lên một thư mục ở ổ đĩa cứng máy tính
- Cài đặt jQuery vào database
- Cài đặt jQuery từ một địa chỉ trên mạng internet, ví dụ Google's CDN.
Trong tài liệu này, người viết chỉ giới thiệu cách thứ nhất là cài đặt jQuery vào một thư mục ở ổ đĩa cứng máy tính.

2.1 Cài đặt jQuery

  • Tạo một dự án web ví dụ là jqueryproject và thư mục js nằm trong thư mục jqueryproject
  • Tải jQuery library từ địa chỉ http://jquery.com/, ví dụ http://code.jquery.com/jquery-1.4.2.js
  • Copy tệp jquery-1.4.2.js đã được download vào thư mục jqueryproject/js

  • Khai báo tệp jQuery ở phần <head> của trang web sẽ sử dụng thư viện jQuery như sau:
<head>
<title>jQuery Test Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<style type="text/css">

</style>
</head>

2.2 Sử dụng giản đơn jQuery trong ứng dụng Web

Với thư mục jqueryproject được tạo ở mục 2.1, tạo một tệp html có tên là index.html nằm trong thư mục jqueryproject có cấu trúc như sau:

Nội dung của tệp index.html là:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Test Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue").fadeOut("slow");
});
});
</script>

<style type="text/css">
.blue { color: blue; }
</style>
</head>
<body>
<h1>Test.</h1>
</body>
</html>

Theo ví dụ trên, sau khi cài đặt jQuery thì trang index.html phải thực hiện 2 việc:
  • Copy đoạn mã sau vào phần <head> của trang html:
<script type="text/javascript">
$(document).ready(function(){

});
</script>
  • Bên trong đoạn mã trên, viết các câu lệnh jQuery như ở ví dụ trên