菜鸟教程
教程 jquery tutorial

自定义插件

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

插件基本结构

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

js 
(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);

调用插件示例

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

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

插件优点

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

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  (function ($) {
    $.fn.highlight = function (options) {
      var settings = $.extend(
        {
          backgroundColor: "yellow",
          color: "black",
        },
        options
      );

  return this.each(function () {
    $(this).css({
      backgroundColor: settings.backgroundColor,
      color: settings.color,
    });
  });
};



})(jQuery);


$(function () {
$("#btnApply").click(function () {
$("p").highlight({ backgroundColor: "#ffeb3b", color: "#333" });
});
});
</script>


<button id="btnApply">应用高亮效果</button>
<p>这是第一段文本。</p>
<p>这是第二段文本。</p>

相关内容