Giới thiệu jquery

08/05/2019

Bài sau »

jQuery là thư viện của JavaScript.
jQuery đơn giản hóa việc lập trình bằng JavaScript.
jQuery đơn giản để học.

Trước khi bạn học jquery, thì bạn phải có kiến thức cơ bản về :

Jquery là gì ?

Jquery thì nhẹ, "viết ít, làm nhiều" , là thư viện của javascript.

Mục đích của jquery là cho việc sử dụng javascript trên website trở nên dễ dàng hơn.

Jquery viết nhiều hàm phổ biến xử lý qua nhiều dòng code javascript thành 1 hàm (function) đơn giản mà bạn chỉ cần gọi sử dụng.

Các tính năng cơ bản của Jquery:

  • Thao tác xử lý HTML/DOM
  • Thao tác xử lý CSS
  • HTML events
  • Effects and animations
  • AJAX
  • Tiện ích khác (Utilities)

Tip: Jquery có nhiều plugin hỗ trợ tất cả các tính năng bạn cần cho website.

Jquery hiển thị kết quả giống nhau giữa tất cả các trình duyệt. Vì Đội ngũ code jquery có kiến thức sâu rộng về các vấn đề của các trình duyệt khác nhau và họ đã viết sẵn trong thư viện jquery.

Cài đặt

Cách 1: Vào trang jquery.com tải file về. Sau đó up lên thư mục code của bạn.

Cách 2: Dùng cách link CDN có sẵn như sau :

Google CDN

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

Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

Cú pháp

Cú pháp cơ bản của Jquery như sau:

$(selector).action()


Trong đó:

- $ : định nghĩa jQuery


- selector : Bộ chọn phần tử HTML


- action() : Hành động sẽ thực thi cho selector

Ví dụ:

$("p").hide() : Ẩn tất cả các thẻ p .

$(".demo").hide() : Ẩn tất cả các thẻ có class="demo"

$("#demo").hide() : Ẩn thẻ có id="demo"

Bạn có thấy cú pháp select giống với CSS ?
Đúng là như vậy, jQuery sử dụng cú pháp CSS để chọn các phần tử. Nếu bạn chưa biết CSS, thì hãy xem thêm học CSS từ A - Z

Document ready event

$(document).ready(function(){


// Code ở đây


});


Với đoạn code ở trên để đảm bảo rằng jQuery sẽ xử lý sau khi trang web đã load xong. Để tránh xảy ra 1 số lỗi như sau:

- Xử lý 1 thẻ HTML trong khi nó vẫn chưa được khởi tạo

- Lấy kích thước hình ảnh khi nó vẫn chưa load xong.

Cú pháp ngắn gọn hơn:

$(function(){


// Code ở đây


});


Hai cú pháp ở trên về ý nghĩa là giống nhau. Bạn có thể sử dụng tùy theo thói quen hoặc sở thích của mình.

Bài sau »
Back to top