Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 7-Bài 2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 22/2/2025, 12:5

Lượt xem: 683

Cú pháp JQuery

$(selector).action();

Trong đó

$: là ký hiệu bắt đầu sử dụng JQuery
selector: là bộ lựa chọn, tương tự như CSS, dùng để lựa chọn đúng phần từ (element) mong muốn trong tài liệu HTML. Ví dụ:
- $('p'): tìm tất cả các phần từ (element) <p></p> trong tài liệu HTML
- $('#txtHoTen'): tìm tất cả các phần từ (element) đang áp dụng id="txtHoTen" trong tài liệu HTML
- $('.tieude'): tìm tất cả các phần từ (element) đang áp dụng class="tieude" trong tài liệu HTML
- ...
action(): là các hàm yêu cầu đối tượng thực hiện hành động. Xem các hàm trên trang chủ JQuery https://api.jquery.com/

Triết lý hoạt động của JQUERY

Tìm đối tượng (element) nào đó dựa vào bộ lựa chọn (selector) => yêu cầu thực thi Hành động gì đó (Action).

Bài 1: Cách sử dụng Jquery trong HTML

Giao diện

Yêu cầu

Tạo 3 thẻ <p></p> với nội dung bất kỳ.
Các nút Button:
- Nút "Ẩn thẻ P": khi click vào sẽ ẩn giao diện thẻ P.
- Nút "Hiện thẻ P": khi click vào sẽ hiện giao diện thẻ P.

Hướng dẫn

Step 1: download file Jquery

Truy cập: https://jquery.com/
Download file, giải nén vào thư mục vendor/jquery/jquery.min.js

Step 2: tạo file HTML đơn giản

Tạo file jquery_bai1.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery</title>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->
  <h1>Học Jquery bài 1</h1>
  <p>Đoạn văn 1</p>
  <p>Đoạn văn 2</p>
  <p>Đoạn văn 3</p>

  <button id="anTheP">Ẩn thẻ P</button>
  <button id="hienTheP">Hiện thẻ P</button>
  <!-- Phần trình bày Giao diện HTML - END -->
</body>

</html>

Step 3: liên kết vào trong file HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery</title>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->
  <h1>Học Jquery bài 1</h1>
  <p>Đoạn văn 1</p>
  <p>Đoạn văn 2</p>
  <p>Đoạn văn 3</p>

  <button id="anTheP">Ẩn thẻ P</button>
  <button id="hienTheP">Hiện thẻ P</button>
  <!-- Phần trình bày Giao diện HTML - END -->



  <!-- Phần xử lý code JavaScript - START -->
  <!-- Nên viết tất cả các đoạn xủ lý JavaScript vào phần cuối trang, trước khi đóng thẻ <body> là cách viết tốt nhất -->
  <!-- Liên kết thư viện Jquery -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- Phần xử lý code JavaScript - END -->
</body>

</html>

Step 4: sử dụng cú pháp Jquery để đăng ký sự kiện

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery</title>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->
  <h1>Học Jquery bài 1</h1>
  <p>Đoạn văn 1</p>
  <p>Đoạn văn 2</p>
  <p>Đoạn văn 3</p>

  <button id="anTheP">Ẩn thẻ P</button>
  <button id="hienTheP">Hiện thẻ P</button>
  <!-- Phần trình bày Giao diện HTML - END -->



  <!-- Phần xử lý code JavaScript - START -->
  <!-- Nên viết tất cả các đoạn xủ lý JavaScript vào phần cuối trang, trước khi đóng thẻ <body> là cách viết tốt nhất -->
  <!-- Liên kết thư viện Jquery -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- Viết code Jquery -->
  <script>
    // Tìm đối tượng (element) nào đó => yêu cầu thực thi Hành động gì đó (Action)
    // Cú pháp Jquery
    // $(selector).action();

    // Tìm đối tượng có id="anTheP" để đăng ký sự kiện click bằng JQUERY
    $("#anTheP").click(function (e) {
      // Hiển thi hộp thoại
      //alert('Xin chào, bạn vừa click nút Ẩn thẻ P');

      $("p").hide(2000) //2000ms -> 2s
    })

    $("#hienTheP").click(function (e) {
      $("p").show(5000) //5000ms
    })
  </script>
  <!-- Phần xử lý code JavaScript - END -->
</body>

</html>

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập

Danh sách bình luận

Chưa có bình luận nào!

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo

Nền tảng các kiến thức học tập

Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.

Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!

Khám phá, trải nghiệm ngay

Chương 7-Bài 2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web

Cú pháp JQuery

$(selector).action();

Trong đó

Triết lý hoạt động của JQUERY

Bài 1: Cách sử dụng Jquery trong HTML

Giao diện

Yêu cầu

Hướng dẫn

Step 1: download file Jquery

Step 2: tạo file HTML đơn giản

Step 3: liên kết vào trong file HTML

Step 4: sử dụng cú pháp Jquery để đăng ký sự kiện

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

CÁC CHÍNH SÁCH

Chương 7-Bài 2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web

Cú pháp JQuery

$(selector).action();

Trong đó

Triết lý hoạt động của JQUERY

Bài 1: Cách sử dụng Jquery trong HTML

Giao diện

Yêu cầu

Hướng dẫn

Step 1: download file Jquery

Step 2: tạo file HTML đơn giản

Step 3: liên kết vào trong file HTML

Step 4: sử dụng cú pháp Jquery để đăng ký sự kiện

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập