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

1

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 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

<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ệ

  1. […] 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ố.