Cài đặt & sử dụng

Chúng ta có thể download phiên bản mới nhất tại: http://jquery.com/download/, sử dụng tag <script> kết nối file jquery nội dung như sau:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="jquery.js"></script>
<script>
//Code jquery viết ở đây...
</script>
</head>

<body>
//Code html viết ở đây...
</body>
</html>

Nếu không muốn download, chúng ta có thể kết nối file jQuery tới file html thông qua một số cách sau:

Kết nối trực tiếp từ trang web jQuery với phiên bản mới nhất: https://code.jquery.com/jquery-latest.js.

<script src="https://code.jquery.com/jquery-latest.js"></script>

Hướng dẫn sử dụng

Có 2 cách viết một nội dung jQuery:

Viết nội dung jQuery bên trong một $(document).ready(), điều này sẽ giúp cho đoạn script chạy sau khi các đoạn code trong file html đã được load xong, không bao gồm việc load các liên kết ngoài như image, iframe, file css, file script,...

$(document).ready(function(){
  //Nội dung jQuery viết ở đây...
});

Chúng ta có thể viết gọn lại như sau:

$(function(){
  //Nội dung jQuery viết ở đây...
});

Viết nội dung jQuery bên trong $(window).load(), điều này sẽ giúp cho đoạn script chạy khi toàn bộ trang web đã được load xong, bao gồm tất cả image, iframe, và cả các liên kết ngoài.

$(window).load(function(){
  //Nội dung jQuery viết ở đây...
});

Ví dụ đơn giản sử dụng jQuery

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $('p').css('color','#ff0000');
});
</script>
</head>

<body>
  <p>hocwebchuan</p>
</body>
</html>

Hiển thị trình duyệt:

hocwebchuan

$('.class')