ThS. Trần Vĩnh Xuyên - http://khonggiankythuat.com

1. Giới thiệu

jQuery là một thư viện của javascript. Nó hỗ trợ cho cho người dùng lập trình javascript một cách đơn giản nhất và dễ dàng học tập và sử dụng chúng.

jQuery tận dụng thế mạnh của CSS Selector để cho phép chúng ta nhanh chóng và dễ dàng truy cập nhiều phần tử hoặc nhóm các phần tử trong DOM (Document Object Model).

2. Nhúng jquery vào trang web

2.1. Sử dụng CDN

2.1.1. Giới thiệu

Theo cách này, chúng ta chỉ cần chỉ đường dẫn đến file jquery mà được cung cấp trên internet để nhúng vào trang web và sử dụng.

2.1.2. Cú pháp

<script 
 src="https://ajax.googleapis.com/
      ajax/libs/jquery/3.6.0/
      jquery.min.js">
</script>

2.1.3. Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script 
   src="https://ajax.googleapis.com/
      ajax/libs/jquery/3.6.0/
      jquery.min.js">
  </script>
<body>

</body>
</html>

2.2. Sử dụng cục bộ

2.2.1. Giới thiệu

Theo cách này, chúng ta phải tải file jquery mà được cung cấp trên internet để nhúng vào trang web và sử dụng.

Các bước thực hiện:

- Bước 1: Tải jquery về.
- Bước 2: Nhúng file query vào trang web.

2.2.2. Tải jquery

Chúng ta có thể tại jquery tại địa chỉ

2.2.3. Nhúng jquery

Chúng ta có thể tải jquery tại địa chỉ (nhấn vào để tải ).

2.2.3. Nhúng file jquyery vào trang web

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.min.js">
  </script> 
<body>

</body>
</html>

3. Cú pháp sử dụng

Để áp đặt jquery vào đối tượng, cũng như sử dụng jquery vào trong trang web của chúng ta, chúng ta có thể sử dụng theo cú pháp đã được định nghĩa sẵn.

Cú pháp 1:

<script> 
 $(document).ready(function(){
  // mã lệnh jQuery
 });
</script>

Cú pháp 2:

<script> 
 $(function(){
  // mã lệnh jQuery
 });
</script>

Ví dụ 1:

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.min.js">
  </script> 
<body>
<h2>Minh họa Jquery</h2>

<p>Thầy Trần Vĩnh Xuyên.</p>
<p>xin trình bày cùng các em.</p>
<button>Ẩn</button>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script> 
</body>
</html>

Ví dụ 2:

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.min.js">
  </script> 
<body>
<h2>Minh họa Jquery</h2>

<p>Thầy Trần Vĩnh Xuyên.</p>
<p>xin trình bày cùng các em.</p>
<button >Hiện thông báo </button>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Thầy Xuyên chào các em.");
  });
});
</script> 
</body>
</html>

Trích dẫn: (http://khonggiankythuat.com)

Tkw - Tổng Quan Về Jquey