博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[整理] jQuery插件开发
阅读量:4647 次
发布时间:2019-06-09

本文共 2378 字,大约阅读时间需要 7 分钟。

1、类级别的插件开发

类级别的插件开发,可似为给jQuery类添加方法,调用方式:$.你的方法(),如:$.ajax() 函数。

 

1.1、给jQuery类添加方法

$.alertMsg = function(msg){	alert("alertMsg : " + msg);	};// 调用// $.alertMsg("hello");

 

1.2、给jQuery类添加带命名空间的方法

$.myPlugin = {	alertMsg : function(msg){		alert("myPlugin.alertMsg : " + msg);		},	};// 调用// $.myPlugin.alertMsg("hello");

 

1.3、使用 jQuery.extend 给jQuery类添加方法

$.extend({	alertMsg2 : function(msg){		alert("alertMsg2 : " + msg);		},	// 调用	// $.alertMsg2("hello");		myPlugin2 : {		alertMsg : function(msg){			alert("myPlugin2.alertMsg : " + msg);			},		},	// 调用	// $.myPlugin2.myPlugin2("hello");});

 

2、对象级别的插件开发

对象级别的插件开发,可似为给jQuery对象添加方法,调用方式:$(对象).你的方法(),如:$("body").css() 函数。

 

2.1、给jQuery对象添加方法

$.fn.alertText = function(msg){	alert("alertText : " + this.text() + " , " + msg);};// 调用// $(elem).alertText("hello");

 

2.2、给jQuery对象添加带名命空间的方法

$.fn.myPlugin = {	alertText : function(msg){		// this 为 myPlugin 对象,要获取事件源,使用event.target		alert("myPlugin.alertText : " + $(event.target).text() + " , " + msg);	},};// 调用// $(elem).myPlugin.alertText("hello");$.fn.myPlugin2 = function(method){	var methods = {		init : function(){			alert("myPlugin2.init");		},			alertText : function(msg){			alert("myPlugin2.alertText : " + this.text() + " , " + msg);			},	};		if(methods[method]){		return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));		}else{		return methods.init();		} };// 调用// $(elem).myPlugin2(); // $(elem).myPlugin2("init");// $(elem).myPlugin2("alertText", "hello");

 

2.3、 使用 jQuery.fn.extend 给jQuery对象添加方法

$.fn.extend({	alertText2 : function(msg){		alert("alertText2 : " + this.text() + " , " + msg);	},	// 调用	// $(elem).alertText2("hello");		myPlugin3 : {		alertText : function(msg){			// this 为 myPlugin 对象,要获取事件源,使用event.target			alert("myPlugin3.alertText : " + $(event.target).text() + " , " + msg);		},	},	// 调用	// $(elem).myPlugin3.alertText("hello");		myPlugin4 : function(method){		var methods = {			init : function(){				alert("myPlugin4.init");			},				alertText : function(msg){				alert("myPlugin4.alertText : " + this.text() + " , " + msg);				},		};				if(methods[method]){			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));			}else{			return methods.init();			}	}	// 调用	// $(elem).myPlugin4(); // $(elem).myPlugin4("init");	// $(elem).myPlugin4("alertText", "hello");});

 

转载于:https://www.cnblogs.com/withme/p/3813584.html

你可能感兴趣的文章
My simplified pickit2 clone
查看>>
Redis 入门知识
查看>>
夏天过去了, 姥爷推荐几套来自smashingmagzine的超棒秋天主题壁纸
查看>>
转--Android如何在java代码中设置margin
查看>>
反射的所有api
查看>>
css 定位及遮罩层小技巧
查看>>
项目中非常有用并且常见的ES6语法
查看>>
[2017.02.23] Java8 函数式编程
查看>>
Knowledge Point 20180305 数据在计算机中的表示
查看>>
谈谈对web标准的理解
查看>>
58前端内推笔试2017(含答案)
查看>>
sprintf 和strcpy 的差别
查看>>
MPEG4与.mp4
查看>>
实验5
查看>>
git 下载 安装
查看>>
录制终端信息并回放
查看>>
JS中window.event事件使用详解
查看>>
ES6深入学习记录(一)class方法相关
查看>>
《BI项目笔记》用Excel2013连接和浏览OLAP多维数据集
查看>>
C语言对mysql数据库的操作
查看>>