Tìm hiểu cú pháp jQuery
1. Cú pháp jQuery Cú pháp jQuery dùng để chọn một hay nhiều nhóm hoặc các phần tử HTML và thực hiện một hay nhiều chuỗi “các hành động” với các phần tử này. Cú pháp cơ bản là: $(selector).action(); Hoặc JQuery(selector).action() Trong đó: Ký hiệu $/JQuery dùng ...
1. Cú pháp jQuery
Cú pháp jQuery dùng để chọn một hay nhiều nhóm hoặc các phần tử HTML và thực hiện một hay nhiều chuỗi “các hành động” với các phần tử này.
Cú pháp cơ bản là:
$(selector).action();
Hoặc
JQuery(selector).action()
Trong đó:
- Ký hiệu $/JQuery dùng để định nghĩa/truy cập jQuery
- (selector) để truy vấn/tìm các phần tử/Bộ chọn HTML
- Phương thức jQuery action()/ hàm để thực hiện hành động nào đó trên các phần tử.
P/s: Để áp dụng một chuỗi các action nên một đối tượng bạn sẽ có cú pháp như sau.
$(selector).action1().action2().action3()....
Các ví dụ:
- $(“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”.
- $(“a[rel=nofollow]”).hide() – ẩn phần tử có <a /> có thuộc tính rel=”nofollow”.
2. Làm thế nào để bắt đầu với JQuery
Khi lựa chọn JQuery thì bạn phải chấp nhận rằng JQuery chỉ thực hiện được một khối lệnh bất kỳ khi DOM đã được tải hoàn tất.
Trong JQuery cung cấp cho chúng ta hai cách được dùng để chạy khối lệnh JQuery javascript.
$(document).ready(function(){
// các phương thức jQuery thực hiện ở đây.
});
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.
Lưu ý: Kể từ phiên bản JQuery 1.8 thì trong một page chỉ nên tồn tại tối thiểu một khối lệnh như trên mà thôi.
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 chưa đượ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ích thước của 1 hình ảnh mà chưa tải về.
jQuery cũng có một 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.
3. Kết luận.
Bài viết giúp các bạn hiểu và nắm được các 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.
