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à: $ ( bộ chọn ). action ()
- Dấu $ để xác định / truy cập jQuery
- Một ( 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ử với class = "test".
$("#test").hide()- ẩn phần tử có id = "test".
Bạn có quen thuộc với các 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 của tài liệu:
$(document).ready(function(){
// jQuery methods go here...
});
Điều này là để ngăn không cho bất kỳ mã jQuery nào chạy trước khi tài liệu được tải xong (đã sẵn sàng).
Bạn nên đợ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 có mã JavaScript trước phần nội dung của 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ể không thành công nếu các phương thức được chạy trước khi tài liệu được tải đầy đủ:
- 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 một 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 nghĩ rằng sự kiện sẵn sàng tài liệu dễ hiểu hơn khi đọc mã.