Cú pháp jQuery
Cú pháp jQuery dùng để chọn các phần tử HTML và thực hiện “các hành động” với các phần tử này.
Cú pháp cơ bản là:
$(selector).action()
Trong đó:
- Ký hiệu $ dùng để định nghĩa/truy cập jQuery
- (selector) để truy vấn/tìm các phần tử HTML
- Phương thức jQuery action() để thực hiện hành động nào đó trên các phần tử
Các ví dụ:
- $(this).hide() – ẩn phần tử hiện tại
- $(“p”).hide() – ẩn tất cả phần tử <p>.
- $(“.test”).hide() – ẩn tất cả các lớp có class=”test”.
- $(“#test”).hide() – ẩn phần tử có id=”test”.
Sự kiện đã sẵn sàng cho tài liệu (document ready event)
Trong các ví dụ, bạn có thể thấy tất cả các phương thức jQuery đều bên trong 1 sự kiện đã sẵn sàng cho tài liệu
$(document).ready(function(){ // các phương thức jQuery thực hiện ở đây --- dammio.com });
Sự kiện này để chặn bất kỳ mã jQuery nào chạy trước khi tài liệu (document) được hoàn tất tải về (trạng thái sẵn sàng). Bạn có thể đặt mã Javascrip trước thẻ <body>, cụ thể là ở trong phần tử head.
Sau đây là 1 số ví dụ thực thi mà có thể bị thất bại nếu các phương thức chạy trước khi tài liệu được tải đầy đủ.
- Cố gắng ẩn 1 phần tử mà chưa được tạo ra.
- Cố gắng lấy kíc thước của 1 hình ảnh mà chưa tải về.
Đội phát triển jQuery cũng tạo 1 phương thức sự kiện ngắn hơn cho sự kiện đã sẵn sàng cho tài liệu như sau.
$(function(){ // Các phương thức jQuery thực thi ở đây ... });
Bạn có thể chọn cách dùng sự kiện nào tùy ý, miễn là dễ hiểu khi đọc mã nguồn.
Kết luận: bài viết giúp các bạn hiểu cú pháp dùng trong jQuery. Mời các bạn theo dõi bài tiếp theo về jQuery để hiểu rõ cách dùng và sử dụng jQuery.
- APA:
Dammio. (2017). [JQuery] Phần 2: Cú pháp jQuery. https://www.dammio.com/2017/03/27/jquery-phan-2-cu-phap-jquery.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[JQuery] Phần 2: Cú pháp jQuery},
year = {2017},
url = {https://www.dammio.com/2017/03/27/jquery-phan-2-cu-phap-jquery},
urldate = {2025-02-08}
}