Cú pháp cơ bản của jQuery, có giải thích

Trong bài học trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về cách tạo trang web bằng jQuery, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về cú pháp jQuery cơ bản nhất nhé.

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu về cú pháp cơ bản của jQuery. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học jQuery khác đã có trên Taimienphi.vn để tìm hiểu về jQuery là gì nhé.

cu phap co ban cua jquery

Cú pháp cơ bản của jQuery

1. Cú pháp cơ bản của jQuery

Câu lệnh jQuery thường bắt đầu bằng ký hiệu ($) và kết thúc bằng dấu chấm phẩy (;).Trong jQuery, ký hiệu ($) chỉ bí danh của jQuery.

Let's consider the following example code which demonstrates the most basic statement of the jQuery.

Ví dụ: trong ví dụ dưới đây minh họa câu lệnh cơ bản nhất trong jQuery:

cu phap co ban cua jquery

Kết quả trả về sẽ hiển thị cảnh báo cho người dùng với nội dung Xin chào Taimienphi.vn!

2. Giải thích mã trong ví dụ trên

Trong ví dụ trên:

- Phần tử script: vì jQuery chỉ là một thư viện JavaScript vì vậy mã jQuery có thể được đặt bên trong phần tử script. Tuy nhiên nếu muốn đặt mã jQuery trong file JavaScript ở bên ngoài, bạn chỉ cần xóa phần này đi là xong.

- $(document).ready(handler); lệnh này được hiểu là sự kiện đã sẵn sàng. Trong đó handler là hàm được truyền cho phương thức ready() để thực thi an toàn ngay khi tài liệu sẵn sàng được sử lý, tức là khi hệ thống phân cấp DOM đã được xây dựng đầy đủ.

Phương thức ready () trong jQuery thường được sử dụng với hàm ẩn danh. Vì vậy trong ví dụ trên chúng ta có thể viết dưới dạng rút gọn như dưới đây:

cu phap co ban cua jquery 2

Mẹo: chúng ta có thể sử dụng cú pháp bất kỳ vì cả 2 cú pháp đều tương đương nhau. Tuy nhiên sử dụng sự kiện đã sẵn sàng khi đọc mã sẽ dễ dàng hơn.

Ngoài ra trong hàm xử lý sự kiện, chúng ta có thể viết thêm các câu lệnh jQuery để thực thi hành động bất kỳ, như $(selector).action();

Trong đó $(selector) chọn các phần tử HTML từ cây DOM để có thể thao tác và action() áp dụng một số hành động trên các phần tử dược chọn, chẳng hạn như thay đổi giá trị thuộc tính CSS hoặc thiết lập nội dung của phần tử, ... .

Ví dụ: ví dụ dưới đây minh họa cách thiết lập đoạn văn bản sau khi DOM đã sẵn sàng:

cu phap co ban cua jquery 3

Kết quả đầu ra trả về có dạng như dưới đây:

cu phap co ban cua jquery 4

Trong câu lệnh jQuery trong ví dụ trên (dòng số 10), p là selector jQuery được sử dụng để chọn tất cả các đoạn văn bản, tức là các phần tử p trong tài liệu, sau đó phương thức text () thiết lập nội dung của đoạn văn bản thành "Xin chao Taimienphi.vn".

Đoạn văn bản trong ví dụ trên được thay thế tự động khi tài liệu đã sẵn sàng. Tham khảo ví dụ dưới đây để xem điều gì sẽ xảy ra nếu chúng ta yêu cầu người dùng thực hiện một số hành động cụ thể trước khi thực thi mã jQuery để thay thế đoạn văn bản:

cu phap co ban cua jquery 5

Kết quả đầu ra trả về có dạng như dưới đây:

cu phap co ban cua jquery 6

Trong ví dụ trên đoạn văn bản chỉ được thay thế khi người dùng click chọn nút "Thay the van ban".

Lưu ý: Chúng ta nên đặt mã jQuery bên trong sự kiện đã sẵn sàng của tài liệu để mã được thực thi khi tài liệu đã sẵn sàng để làm việc.

Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về cú pháp cơ bản của jQuery. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Selector trong jQuery.

https://thuthuat.taimienphi.vn/cu-phap-co-ban-cua-jquery-51217n.aspx
Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Trần Khởi My     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Hiệu ứng động trong jQuery
Xóa các phần tử và thuộc tính trong jQuery
Hiệu ứng Slide trong jQuery
Tìm hiểu Chaining trong jQuery
Event (sự kiện) trong jQuery
Từ khoá liên quan:

Cú pháp cơ bản của jQuery

, jQuery, học jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá