Bài jQuery 3: Cú pháp của jQuery

0
346

Xin chào các bạn, trong bài học ngày hôm nay chúng ta sẽ cùng nhau tìm hiểu về cú pháp của jQuery.

Cú pháp jQuery chuẩn

Một câu lệnh jQuery thường bắt đầu bằng ký hiệu đô la($) và kết thúc bằng dấu chấm phẩy (;).

Trong jQuery, ký hiệu đô la($) như là một bí danh cho jQuery. Chúng ta hãy cùng xem đoạn code sau đây, nó mô tả câu lệnh cơ bản nhất của jQuery.

Ví dụ trên chỉ đơn giản hiển thị một thông báo “Hello World!” cho người dùng.

Giải thích code

Nếu bạn chưa từng làm quen với jQuery, bạn có thể nghĩ đoạn code đó là gì. OK, chúng ta hãy xem qua từng phần của đoạn code này để hiểu rõ hơn nhé:

  • Phần tử <script> – Vì jQuery chỉ là một thư viện của JavaScript, nên mã jQuery có thể được đặt bên trong phần tử <script>. Tuy nhiên, nếu bạn muốn đặt nó trong một file JavaScript bên ngoài, thì bạn chỉ cần xóa phần này.
  • $(document).ready(handler); – Câu lệnh này thường được hiểu như là sự kiện sẵn sàng. Trong đó trình xử lý về cơ bản là một hàm được truyền cho phương thức ready() để thực thi an toàn ngay khi tài liệu được xử lý, tức là khi hệ thống phân cấp DOM đã được xây dựng đầy đủ.
  • Phương thức jQuery ready() thường được sử dụng với một hàm ẩn danh. Vì vậy, ví dụ trên cũng có thể được viết bằng một cách viết tắt như thế này:

Hơn nữa, bên trong hàm xử lý sự kiện, bạn có thể viết các câu lệnh jQuery để thực hiện bất kỳ hành động nào theo cú pháp cơ bản như: $(selector).action();

Trong đó, $(selector) về cơ bản chọn các phần tử HTML từ cây DOM để có thể thao tác và action() sẽ áp dụng một số hành động trên các phần tử được chọn, chẳng hạn như thay đổi giá trị thuộc tính CSS hoặc đặt nội dung cho phần tử, v.v. Chúng ta hãy cùng xem xét một ví dụ khác đặt đoạn văn bản sau khi DOM sẵn sàng:

Trong câu lệnh jQuery của ví dụ trên (dòng số 10), p là jQuery selector, nó sẽ chọn tất cả các đoạn(tức là các phần tử <p> trong tài liệu), sau đó phương thức text() sẽ đặt nội dung văn bản của đoạn văn thành “Hello World ! ” .

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

Trong ví dụ trên, đoạn text chỉ được thay thế khi xảy ra sự kiện nhấp chuột trên nút “Replace Text”.

Kết luận

Như vậy bây giờ bạn đã có hiểu biết cơ bản về cách thức hoạt động của jQuery và cú pháp cơ bản của nó. Trong bài học tiếp theo, chúng ta sẽ tìm hiểu về Selectors của jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây