Cú pháp jQuery

Bằng jQuery, bạn có thể chọn (tìm kiếm, query) các yếu tố HTML và thực hiện các "thao tác" (actions) trên chúng.

Mô hình ngữ pháp jQuery

$(this).hide()
Giải thích hàm hide() của jQuery, ẩn yếu tố HTML hiện tại
$("#test").hide()
Giải thích hàm hide() của jQuery, ẩn yếu tố có id="test"
$("p").hide()
Giải thích hàm hide() của jQuery, ẩn tất cả các yếu tố <p>
$(".test").hide()
Giải thích hàm hide() của jQuery, ẩn tất cả các yếu tố có class="test"

Cú pháp jQuery

Ngữ pháp jQuery được thiết kế để chọn các yếu tố HTML và thực hiện các thao tác nào đó trên chúng.

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

  • Dấu đô la định nghĩa jQuery
  • Tựa chọn (selector) "tìm kiếm" và "tìm kiếm" các yếu tố HTML
  • Hàm action() của jQuery thực hiện các thao tác trên các yếu tố

Mô hình

$(this).hide() - Ẩn yếu tố hiện tại

$("p").hide() - Ẩn tất cả các đoạn văn

$(".test").hide() - Ẩn tất cả các yếu tố có class="test"

$("#test").hide() - Ẩn tất cả các yếu tố có id="test"

Lưu ý:Ngữ pháp jQuery là sự kết hợp của XPath và CSS selector. Trong các chương tiếp theo của hướng dẫn này, bạn sẽ học thêm về ngữ pháp của các selector.

Hàm document ready

Bạn có thể đã chú ý rằng tất cả các hàm jQuery trong ví dụ của chúng ta đều nằm trong hàm document ready:

$(document).ready(function(){
  // Các hàm jQuery sẽ được đặt ở đây
});

Đây là để ngăn chặn việc chạy mã jQuery trước khi tài liệu được tải hoàn toàn (sẵn sàng).

Nếu chạy hàm trước khi tài liệu được tải hoàn toàn, thao tác có thể thất bại. Dưới đây là hai ví dụ cụ thể:

  • Thử che giấu một yếu tố không tồn tại
  • Lấy kích thước của hình ảnh chưa được tải hoàn toàn