自定义插件

jQuery 允许开发者基于其核心功能，自定义插件以封装特定功能，提高代码复用和项目维护性。

插件基本结构

自定义插件通常通过扩展 $.fn 对象实现：

(function ($) {
  $.fn.myPlugin = function (options) {
    // 默认参数
    var settings = $.extend({
      color: "red",
      fontSize: "14px"
    }, options);

    // 遍历匹配的元素
    return this.each(function () {
      $(this).css({
        color: settings.color,
        fontSize: settings.fontSize
      });
    });
  };
})(jQuery);

调用插件示例

$(function () {
  $("p").myPlugin({
    color: "blue",
    fontSize: "18px"
  });
});

该插件会将所有 <p> 元素的文字颜色改为蓝色，字体大小改为 18px。

插件优点

• 封装重复功能
• 支持链式调用
• 提供默认参数和用户自定义参数
• 提高代码模块化和复用性

示例代码

loading