Khám phá về jQuery và cách sử dụng nó với ví dụ chi tiết

Đọc tiếp bài viết dưới đây của Mytour để hiểu rõ về cú pháp cơ bản của jQuery. Ngoài ra, bạn cũng có thể tham khảo thêm những bài học khác về jQuery trên Mytour để hiểu sâu hơn về jQuery là gì.

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

1. Khám phá jQuery là gì?

jQuery là một thư viện viết bằng JavaScript, giúp phát triển chức năng trên trang web trở nên dễ dàng, nhanh chóng và đa tính năng hơn. Thay vì phải viết mã JavaScript từ đầu, bạn có thể sử dụng jQuery để tạo và quản lý các yếu tố trên trang web một cách hiệu quả. jQuery cung cấp nhiều module khác nhau, bao gồm:

2. 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ỉ đơn giản là biệt danh của thư viện.

Hãy xem xét đoạn mã ví dụ sau đây, thể hiện câu lệnh cơ bản nhất của jQuery.

Mẫu: trong ví dụ sau đây minh họa câu lệnh cơ bản nhất trong 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 Mytour!'

Giải thích đoạn mã trong ví dụ

Trong ví dụ này:

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

- $(document).ready(handler); là sự kiện đã sẵn sàng. Trong đó, handler là hàm truyền vào cho phương thức ready() để thực thi ngay khi tài liệu sẵn sàng, tức là khi cấu trúc 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ư sau:

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

Trong hàm xử lý sự kiện, ta có thể thêm các câu lệnh jQuery để thực hiện hành động tùy ý, như $(selector).action();

Ở đây, $(selector) chọn các phần tử HTML từ cây DOM để thao tác và action() áp dụng một số hành động lên các phần tử đã chọ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:

Kết quả trả về sẽ có dạng như sau:

Trong đoạn mã jQuery ở ví dụ trên (dòng số 10), chúng ta sử dụng selector jQuery là p để chọn tất cả các đoạn văn bản, nghĩa là các phần tử p trong tài liệu. Sau đó, phương thức text () được áp dụng để đặt nội dung của đoạn văn bản thành 'Xin chào Mytour'.

Đoạn văn bản trong ví dụ sẽ tự động thay đổi khi tài liệu đã sẵn sàng. Tham khảo ví dụ dưới đây để hiểu đ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:

Kết quả trả về sẽ có dạng như sau:

Trong ví dụ này, đoạn văn bản chỉ thay đổi khi người dùng click chọn nút 'Thay thế văn bản'.

Chú ý: Để mã jQuery hoạt động khi tài liệu đã sẵn sàng, chúng ta nên đặt nó bên trong sự kiện đã sẵn sàng của tài liệu.

Mytour vừa giới thiệu bài học về cú pháp cơ bản của jQuery. Bài học tiếp theo sẽ hướng dẫn về Selector trong jQuery.

Nếu bạn có câu hỏi hoặc muốn thảo luận, hãy chia sẻ ý kiến của bạn trong phần bình luận dưới bài viết.