[整理] jQuery插件开发

浏览数：23 / 时间：2015年06月09日

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");
});

[整理] jQuery插件开发,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

[整理] jQuery插件开发