Cú pháp của jQuery, cách sử dụng jQuery, cách nhúng mã jQuery, cách dùng jQuery cho trang web

Cú pháp của jQuery, cách sử dụng jQuery, cách nhúng mã jQuery, cách dùng jQuery cho trang web

Cú pháp của jQuery

Cách thức làm việc của jQuery là bạn sẽ dùng các bộ chọn (Selectors) để chọn ra các phần tử HTML mà mình muốn xử lý, sau đó dùng các hàm (được cung cấp bởi thư viện jQuery) để xử lý các phần tử HTML đó.

Cấu trúc cơ bản

Dưới đây là cấu trúc cơ bản của một chức năng jQuery

$(document).ready(function(){
    //Các phương thức jQuery nằm trong này
});

Hoặc cú pháp rút gọn

$(function(){
    //Các phương thức jQuery nằm trong này
});
Hai cú pháp trên bạn thích dùng cái nào cũng được. Tuy nhiên, khuyến khích sử dụng cú pháp đầy đủ
(Vì nó sẽ dễ nhìn hơn trong trường hợp các dòng lệnh của bạn quá lùm xùm)

Phương thức jQuery đơn giản

Phương thức được gọi là đơn giản khi bạn chỉ cần chọn ra một phần tử HTML rồi dùng một hành động xử lý nó.

Cú pháp

$(selector).action();
Ví dụ

Đoạn mã dưới đây tôi chọn các phần tử HTML có class là abc với hành động hide() để ẩn các phẩn từ đó.


$(".abc").hide();

Phương thức jQuery phức tạp

Phương thức được gọi là thức tạp khi bạn chọn một phần tử HTML rồi dùng hành động xử lý nó, trong hành động đó lại bao gồm các phương thức jQuery khác.

Cú pháp

$(selector).action(function(){
    // Các phương thức jQuery khác nằm trong này
});
Ví dụ

Đoạn mã dưới đây tôi chọn phần tử HTML là nút button với hành động là click() thì nó sẽ ẩn các phần tử HTML có class là abc rồi hiện thông báo là "Đã ẩn phần tử có class là abc".


$("input[type='button']").click(function(){
    $(".abc").hide();
    alert("Đã ẩn phần tử có class là abc");
});

Cách chèn mã jQuery vào trang web

Bài 01: Tổng quan về jQuery, tôi có hướng dẫn cách nhúng tập tin jQuery vào trang web. Lưu ý, đó chỉ là cái thư viện giúp bạn viết mã, nếu bạn muốn nhúng các mã vào trang web thì có hai cách tương tự như nhúng mã JavaScript.

Cách 1: Nhúng mã trực tiếp vào trang web

Đặt vào trang web thẻ <script>

<script>
    //Các mã jQuery trong này
</script>

Cách 2: Liên kết đến một tập tin .js

Bạn tạo một tập tin .js rồi đặt các đoạn mã vào đó (Trong tập tin .js không được dùng thẻ <script>). Rồi từ trang web liên kết đến tập tin .js bằng cú pháp

<script src="đường dẫn đến tập tin .js"></script>
Dù là cách 1 hay cách 2, bạn vẫn phải đặt các đoạn mã đó ở phía dưới tập tin thư viên của jQuery (Vì phải load thư viện trước thì các đoạn mã của bạn mới chạy được)

Cú pháp của jQuery

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi