jQuery扩展方法详解:jQuery.extend与jQuery.fn.extend用法

作者:开源拾贝

时间:2026-10-26

浏览:209

本文详细解析jQuery的两种扩展方式:jQuery.extend用于添加静态工具方法,jQuery.fn.extend用于为jQuery对象实例添加方法。通过具体代码示例展示如何定义和调用自定义扩展方法,包括直接扩展和立即执行函数封装两种写法,帮助开发者掌握jQuery插件开发基础。

文章目录

jQuery扩展方法概述

一、方式列表:


1. jQuery.extend(Object); // jQuery 本身的扩展方法


2. jQuery.fn.extend(Object); // jQuery 所选对象扩展方法


jQuery.extend静态扩展方法

二、调用示例:


1. jQuery 本身的扩展方法实例如下:


代码如下:

 
jQuery.extend({
Meg: function (message) {
alert(message);
}, 
MegToo: function (messageToo) {
alert(messageToo);
} 
}); 

页面调用:jQuery.Meg("Hi,Stone");


其中Meg和MegToo为我的jQuery自定义扩展方法,多个扩展方法之间用英文逗号隔开。


jQuery.fn.extend对象扩展方法

2. jQuery 所选对象扩展方法有两种书写方式。


a)jQuery 所选对象扩展方法实例一如下:


代码如下:

 
jQuery.fn.extend({
ShowHtml: function (showhtml) {
jQuery(this).html(showhtml);
} 
}); 

页面调用:jQuery("#htmlDiv").ShowHtml("Stone,Hi!");


其中ShowHtml为我的jQuery所选对象的扩展方法,多个扩展方法之间用英文逗号隔开。


b)jQuery 所选对象扩展方法实例二代码如下:


代码如下:

 
(function (jq) {
jq.fn.ShowHtmlToo = function (showhtml) {
jQuery(this).html(showhtml);
}; 
})(jQuery)

调用相同与方式一:jQuery("#htmlDiv").ShowHtmlToo("Stone,Hi!");


【Stone 制作整理】

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章