Bài 2: Cấu trúc câu lệnh jQuery

2 2.410

Trong bài này, chúng ta sẽ tìm hiểu về cấu trúc câu lệnh jquery. Đồng thời, mình sẽ hướng dẫn các bạn cách thêm jquery vào file html và làm một hiệu ứng đơn giản bằng jQuery.

Video – Cấu trúc câu lệnh jQuery

Hướng dẫn chi tiết

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Thêm jquery vào file html

Có 2 cách để thêm jquery

+ Cách 1 tải jquery tại jquery.com. Sau đó, thêm thẻ script có src chỉ đường dẫn đến file jquery vừa tải. Thẻ script đặt trong phần thẻ head hoặc đặt bên dưới, trước khi đ1ong thẻ body cũng đc

+ Cách 2: dùng trực tuyến. Cách bạn thêm script với link CDN này vào file html nhé. Link để lấy code CDN

thẻ script có dạng như sau

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Nếu muốn cách bạn có thể thêm Bootstrap vào nhé. Cách thêm Bootstrap xem bài 1 của kháo Bootstrap.

Để tiện cho việc học, mình có tạo sẵn thư mục bài học. Trong đó bao gồm jquery, bootstrap, popper js, file html, file style.css để chỉnh css và file script.js để code js theo ý mình. Download thư mục bài học

Cấu trúc câu lệnh jQuery

+ Selector: lực chọn phần tử cần xử lý

+ Event: bắt sự kiện tương tác với phần tử selector

+ Animate: hiệu ứng khi có sự kiện tương tác.

Mình sẽ làm một hiệu ứng đơn giản làm click vào button thì thẻ h2 sẽ chạy vào giữa

Hiệu ứng jquery đầu tiên- Cấu trúc câu lệnh jQuery
Hiệu ứng jquery đầu tiên

Phần html

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/style.js"></script>
</head>
<body>
   <h1>Click vào</h1>
</body>

Phần code jquery

$(document).ready(function() {
   $('body').click(function() {
      $('h1').animate({marginLeft: 500,  opacity: 0},500);
   });
});

Các bạn chạy thử nhé.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Bạn cũng có thể thích
  1. Hieu nói

    Chào ad, Sao mình gõ ready mà nó không sổ ra $(document).ready(function() {} như ad v ạ, thank .

  2. […] Bài 2: Cấu trúc câu lệnh jQuery […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.