Cú pháp của jQuery

Với jQuery, bạn có thể chọn thành phần HTML mình muốn thực hiện hành động trên chúng.


Cú pháp của jQuery

Cú pháp của jQuery bao gồm phần tử HTML được chọn và hành động lên (các) phần tử đó.

Cú pháp cơ bản là: $(selector).action()

  • Ký hiệu $ để định nghĩa/truy cập jQuery
  • Một (selector) là một hoặc nhiều phần tử HTML
  • Một jQuery action() là một hành động nào đó trên (các) phần tử

Ví dụ:

$(this).hide() – dùng để ẩn đi phần tử hiện tại. hides the current element

$(“p”).hide() – dùng để ẩn tất cả thành phần <p>

$(“.test”).hide() – dùng để ẩn các phần tử có class=”test”

$(“#test”).hide() – dùng để ẩn phần tử có id=”test”.

Bạn quen thuộc với bộ chọn trong CSS?

jQuery sử dụng cú pháp của CSS để lựa chọn các phần tử. Bạn sẽ học được nhiều hơn về cú pháp selector trong chương kế tiếp.


Tài liệu sẵn sàng cho các sự kiện

Bạn có thể để ý, các ví dụ của chúng tôi về jQuery đều được nhúng vào bên trong tài liệu đã sẵn sàng dùng:

$(document).ready(function(){

// câu lệnh jQuery

});

Điều này dùng để ngăn bất kỳ đoạn code jQuery nào được chạy trước khi toàn bộ tài liệu được tải đầy đủ (sẵn sàng để dùng).

Một thực hành tốt là đợi cho đến khi tài liệu được tải đầy đủ và sẵn sàng sử dụng. Nó cũng cho phép bạn sử dụng đoạn code JavaScript trước phần body của tài liệu, trong phần head.

Dưới đây là một số ví dụ về hành động sẽ bị thất bại nếu nó được chạy trước khi tài liệu được tải đầy đủ:

  • Khi bạn muốn ẩn một phần từ mà nó chưa được tạo ra
  • Khi bạn muốn lấy kích cỡ của ảnh mà nó chưa tải kịp

Mẹo: Nhóm jQuery cũng tạo các phương thức rút gọn cho tài liệu đã sẵn sàng:

$(function(){
    // Câu lệnh jQuery
});

Sử dụng cú pháp nào mà bạn muốn. Chúng tôi nghĩ cách viết tài liệu sẵn sàng cho sự kiện là dễ hiểu hơn khi đọc code.

Leave a Comment