当前位置：首页 > jquery

jquery扩展

2026-02-03 13:31:20jquery

jQuery 扩展方法

jQuery 扩展通常指通过 $.extend() 或 $.fn.extend() 为 jQuery 添加自定义功能。以下是两种常见的扩展方式：

jquery扩展

扩展 jQuery 工具方法

通过 $.extend() 添加静态方法，直接通过 $ 调用：

jquery扩展

$.extend({
  myMethod: function() {
    console.log("自定义工具方法");
  }
});

// 调用方式
$.myMethod(); // 输出 "自定义工具方法"

扩展 jQuery 实例方法

通过 $.fn.extend() 添加实例方法，可用于 jQuery 对象：

$.fn.extend({
  highlight: function(color) {
    return this.css("background-color", color || "yellow");
  }
});

// 调用方式
$("div").highlight("red"); // 设置选中元素的背景色

插件开发规范

命名空间
避免全局污染，建议将插件封装在独立命名空间：

(function($) {
  $.fn.myPlugin = function(options) {
    // 插件逻辑
  };
})(jQuery);

链式调用
通过 return this 保持链式调用特性：

$.fn.chainableMethod = function() {
  // 操作逻辑
  return this;
};

默认参数与配置
使用 $.extend 合并用户配置与默认值：

$.fn.customPlugin = function(options) {
  var settings = $.extend({
    color: "blue",
    size: 12
  }, options);
};

事件命名空间
避免事件冲突，添加插件名前缀：

$(".element").on("click.myPlugin", handler);

扩展工具函数示例

为 jQuery 添加格式化字符串功能：

$.extend({
  formatString: function(str, params) {
    return str.replace(/{(\w+)}/g, function(match, key) {
      return params[key] || match;
    });
  }
});

// 使用示例
var result = $.formatString("Hello, {name}!", { name: "World" });
console.log(result); // 输出 "Hello, World!"