Thứ bảy, ngày 21 tháng 7 năm 2018

[Tìm hiểu jQuery căn bản] Bài 2. Giới thiệu về jQuery

Ngày đăng: 23/7/2011, 10:2:2PM | Lượt xem: 5,888
Hot!

Trước khi tìm hiểu jQuery, bạn cần có kiến thức về HTML, CSS và JavaScript. Những kiến thức đó sẽ bổ trợ cho bạn rất nhiều trong quá trình học tập và thực hành với jQuery. Bạn có thể tìm hiểu thêm về HTML, CSS và JavaScript trên mạng internet.

Kiến thức căn bản cần có

Trước khi tìm hiểu jQuery, bạn cần có kiến thức về HTML, CSS và JavaScript. Những kiến thức đó sẽ bổ trợ cho bạn rất nhiều trong quá trình học tập và thực hành với jQuery. Bạn có thể tìm hiểu thêm về HTML, CSS và JavaScript trên mạng internet.



Như vậy jQuery là gì?

Như ở bài 1 chúng ta đã biết jQuery là một thư viện JavaScript, tức là nó viết bằng mã JavaScript và được đóng gói thành 1 file *.js. jQuery luôn có khẩu hiệu "write less, do more" (viết ít, làm nhiều) để nói lên tính tối ưu trong cách code.

Thư viện jQuery chứa các tiện ích sau:

  • Chọn lựa và thao tác các thẻ HTML
  • Thao tác với CSS
  • Các hàm sự kiện trong HTML
  • Các hiệu ứng hoạt hình trong JavaScript
  • HTML DOM
  • AJAX và các tiện ích khác
     

Xây dựng ứng dụng jQuery đầu tiên

Thư viện jQuery được lưu trữ trong 1 file duy nhất chứa tất cả các thuộc tính và phương thức. Bạn có thể download thư viện này ở địa chỉ: http://docs.jquery.com/Downloading_jQuery. Lưu ý đọc kỹ thông tin sự tương thích trình duyệt với các phiên bản jQuery. Có 2 loại jQuery chính theo từng phiên bản là jQuery min (đã nén tối ưu) có dung lượng nhỏ và jQuery chưa nén (dung lượng lớn).

Để thêm thư viện jQuery, bạn cũng thêm giống như thêm 1 file JavaScript vào trang web như sau: 

<head>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>

 

Thêm thư viện jQuery tốt nhất nên đặt vào vị trí kẹp giữa 2 thẻ mở <head> và thẻ đóng </head>

Tiếp theo ứng dụng dùng phương thức hide() trong jQuery để dấu tất cả thẻ <p> trong tài liệu HTML với đoạn code:

Ví dụ

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Thử ví dụ »

Với ví dụ trên bài học này khoan giải thích cho các bạn chi tiết cặn kẽ về code, các bạn có thể đưa ra nhận xét của riêng mình khi mới học, tinh ý các bạn sẽ thấy đoạn code trên chia làm 3 phần tương ứng màu với hình vẽ sau:

 

 

Nếu bạn không muốn lưu trữ file jQuery trên máy hoặc hosting riêng, bạn có thể dùng thư viện jQuery thông qua đường dẫn thì Google hoặc Microsoft.

Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>

 Biên tập và chỉnh sửa: stty

Tham khảo từ: http://www.w3schools.com

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.