Tìm hiểu cú pháp jQuery

Học JQuery 02/10/2015 07:00 551
Xìn chào các bạn. Trong bài viết này chúng ta sẽ đi tìm hiểu cú pháp jQuery là gì. Chúng được sử dụng như thế nào để 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.

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.

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.