Buzz
Chaining trong jQuery cho phép bạn thực hiện nhiều phương thức jQuery trong một dòng lệnh. Để hiểu rõ hơn về Chaining, hãy theo dõi nội dung của bài học jQuery dưới đây từ Mytour.
Khám Phá Chaining trong jQuery
Tận Hưởng Phương thức Chaining trong jQuery
Như đã được đề cập trước đó, jQuery mang đến cho chúng ta tính năng mạnh mẽ được gọi là Chaining, cho phép thực hiện nhiều hành động khác nhau trên cùng một nhóm phần tử, hay nói cách khác, chạy nhiều phương thức khác nhau chỉ trong một dòng lệnh.
Điều này xảy ra vì hầu hết các phương thức jQuery trả về một đối tượng có thể tiếp tục sử dụng để gọi thêm phương thức khác.
Ví dụ: Dưới đây là minh họa cách sử dụng phương thức Chaining trong jQuery:
Kết quả xuất hiện như sau:
Trong ví dụ này, chúng ta thấy chuỗi của 3 phương thức animate(). Khi người dùng click nút kích hoạt, phần tử p sẽ mở rộng chiều rộng lên 100%. Khi giá trị của width thay đổi, font-size sẽ tạo hiệu ứng động, và sau khi hoàn tất, border cũng sẽ tạo hiệu ứng động.
Mẹo: Bạn không chỉ giúp tăng tính đơn giản khi đọc và viết mã mà còn cải thiện hiệu suất script, vì trình duyệt không cần tìm kiếm các phần tử giống nhau nhiều lần.
Nếu muốn, bạn cũng có thể chia nhỏ mã thành nhiều dòng để làm cho mã trở nên dễ đọc hơn.
Ví dụ: Chuỗi phương thức trong ví dụ trên có thể được viết như sau:
Kết quả xuất hiện như dưới đây:
Một số phương thức jQuery không trả về đối tượng jQuery. Cơ bản, các phương thức setter hoặc gán giá trị cho phần tử đã chọn sẽ trả về đối tượng jQuery, cho phép chúng ta liên tục gọi các phương thức jQuery.
Ngược lại, các phương thức getter trả về giá trị yêu cầu mà không cho phép gọi các phương thức jQuery trên giá trị được getter trả về.
Ví dụ điển hình là phương thức html(). Nếu không có tham số được gán cho phương thức, nội dung HTML của phần tử được chọn sẽ được trả về thay vì đối tượng jQuery, như minh họa trong ví dụ dưới đây:
Kết quả xuất hiện như sau:
Bài giảng này Mytour vừa giới thiệu về Chaining trong jQuery. Trong bài giảng tiếp theo, Mytour sẽ hướng dẫn bạn về hàm callback trong jQuery.
Bạn cũng có thể tham khảo một số bài giảng khác trên Mytour để tìm hiểu thêm về hiệu ứng Slide trong jQuery.
