当前位置：首页 > jquery

jquery 扩展

2026-02-03 13:32:39jquery

jQuery 扩展方法

jQuery 提供了多种扩展方式，允许开发者自定义插件或方法以增强功能。以下是常见的扩展方式：

扩展 jQuery 对象方法

通过 $.fn 扩展 jQuery 对象方法，使得所有 jQuery 实例均可调用：

jquery 扩展

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

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

// 调用
$("p").myPlugin({ color: "blue" });

扩展工具方法

通过 $ 或 jQuery 直接扩展工具方法，供全局使用：

jquery 扩展

$.myUtility = function(str) {
    return str.toUpperCase();
};

// 调用
$.myUtility("hello"); // 返回 "HELLO"

使用 `$.extend` 合并对象

合并多个对象的属性到目标对象：

const defaults = { mode: "light", theme: "default" };
const userSettings = { theme: "dark" };

const settings = $.extend({}, defaults, userSettings);
// 结果: { mode: "light", theme: "dark" }

插件开发规范

命名唯一性：避免与其他插件冲突，使用前缀或命名空间。
链式调用：通过 return this 保持链式调用能力。
默认配置：提供可覆盖的默认选项。

$.fn.namespacePlugin = function(options) {
    const settings = $.extend({
        text: "Default Text"
    }, options);

    return this.each(function() {
        $(this).text(settings.text);
    });
};

扩展事件机制

自定义事件通过 $.event.special 实现：

$.event.special.myEvent = {
    setup: function() {
        $(this).on("click.myEvent", handler);
    },
    teardown: function() {
        $(this).off("click.myEvent");
    }
};

function handler(e) {
    console.log("Custom event triggered");
}

// 绑定事件
$("#element").on("myEvent", handler);