Cú pháp jQuery
Với jQuery, bạn chọn (truy vấn) các phần tử HTML và thực hiện các "hành động" trên chúng.
Cú pháp jQuery
Cú pháp jQuery được thiết kế riêng để chọn các phần tử HTML và thực hiện một số hành động trên (các) phần tử đó.
Cú pháp cơ bản là: $( selector ). hoạt động ()
- Dấu $ để xác định/truy cập jQuery
- A ( bộ chọn ) để "truy vấn (hoặc tìm)" các phần tử HTML
- Một hành động jQuery () được thực hiện trên (các) phần tử
Ví dụ:
$(this).hide() - ẩn phần tử hiện tại.
$("p").hide() - ẩn tất cả các phần tử <p>.
$(".test").hide() - ẩn tất cả các phần tử có class="test".
$("#test").hide() - ẩn phần tử có id="test".
Bạn có quen thuộc với bộ chọn CSS không?
jQuery sử dụng cú pháp CSS để chọn các phần tử. Bạn sẽ tìm hiểu thêm về cú pháp bộ chọn trong chương tiếp theo của hướng dẫn này.
Mẹo: Nếu bạn không biết CSS, bạn có thể đọc Hướng dẫn CSS của chúng tôi.
Sự kiện sẵn sàng tài liệu
Bạn có thể nhận thấy rằng tất cả các phương thức jQuery trong các ví dụ của chúng tôi đều nằm trong một sự kiện sẵn sàng cho tài liệu:
$(document).ready(function(){
// jQuery methods go here...
});
Điều này nhằm ngăn chặn bất kỳ mã jQuery nào chạy trước khi tài liệu được tải xong (sẵn sàng).
Cách tốt nhất là đợi tài liệu được tải đầy đủ và sẵn sàng trước khi làm việc với nó. Điều này cũng cho phép bạn đặt mã JavaScript trước phần thân tài liệu, trong phần đầu.
Dưới đây là một số ví dụ về các hành động có thể thất bại nếu các phương thức được chạy trước khi tài liệu được tải đầy đủ:
- Đang cố gắng ẩn một phần tử chưa được tạo
- Đang cố gắng lấy kích thước của hình ảnh chưa được tải
Mẹo: Nhóm jQuery cũng đã tạo một phương thức thậm chí còn ngắn hơn cho sự kiện sẵn sàng tài liệu:
$(function(){
// jQuery methods go here...
});
Sử dụng cú pháp bạn thích. Chúng tôi cho rằng sự kiện sẵn sàng tài liệu sẽ dễ hiểu hơn khi đọc mã.
