Back To Home

Name: Jquery plugin là gì?

jQuery plugin là một đoạn code mở rộng jQuery, cho phép bạn tái sử dụng logic hoặc thêm tính năng cho nhiều phần tử DOM một cách dễ dàng.

👉 Nói đơn giản: Plugin jQuery giống như “thư viện con” bạn viết thêm để gọi bằng cú pháp $('selector').pluginName(options) thay vì viết đi viết lại nhiều lần.


🟢 Cấu trúc cơ bản của jQuery Plugin

 
(function ($) { $.fn.highlight = function (options) { // Giá trị mặc định var settings = $.extend({ color: "yellow" }, options); // Duyệt qua từng phần tử gọi plugin return this.each(function () { $(this).css("background-color", settings.color); }); }; }(jQuery));

👉 Cách dùng:

 
$("p").highlight({ color: "lightblue" });

Mọi thẻ <p> sẽ có background màu lightblue.


🟡 Ví dụ 1: Plugin đổi màu chữ

 
(function ($) { $.fn.textColor = function (color) { return this.css("color", color); }; }(jQuery)); // Gọi plugin $("h1").textColor("red");

➡️ Tất cả <h1> thành chữ đỏ.


🟡 Ví dụ 2: Plugin tạo hiệu ứng fade-in

 
(function ($) { $.fn.fadeInText = function (duration) { return this.each(function () { $(this).hide().fadeIn(duration || 1000); }); }; }(jQuery)); // Gọi plugin $(".message").fadeInText(2000);

➡️ Mọi .message sẽ mờ dần hiện ra trong 2 giây.


🟡 Ví dụ 3: Plugin carousel đơn giản

 
(function ($) { $.fn.simpleCarousel = function () { return this.each(function () { let $items = $(this).children(), index = 0; function show(i) { $items.hide().eq(i).show(); } show(index); setInterval(function () { index = (index + 1) % $items.length; show(index); }, 2000); }); }; }(jQuery)); // Gọi plugin $(".carousel").simpleCarousel();

➡️ Các item bên trong .carousel sẽ tự động chuyển qua lại.


✅ Ưu điểm plugin jQuery:

  • Dễ tái sử dụng.

  • Viết một lần, dùng nhiều chỗ.

  • Giúp code gọn gàng và có cấu trúc.

Donald Trump

Để trở thành người chiến thắng, bạn cần biết khi nào là đủ. Đôi khi trong cuộc sống, bạn phải từ bỏ cuộc chiến và chuyển sang mục tiêu mới mang lại hiệu quả hơn

Related Post