[整理] jQuery插件开发

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插件开发

时间: 2024-11-02 11:26:47

[整理] jQuery插件开发的相关文章

掌握jQuery插件开发

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

jQuery插件开发(一):jQuery类方法

一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? jQuery类方法其实就是jquery全局函数,即jquery对象的方法,实际上就是位于jquery命名空间的内部函数.这些函数有一个特征就是不操作DOM元素,而是操作 Javascript非元素对象.直观的理解就是给jquery类添加类方法,可以理解为添加静态方法 2.给jQuery类添加方法. /

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

jQuery 插件开发

jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式.第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQ

JQuery插件开发精品教程,让你的jQuery提升一个台阶

本文转载自 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.

jQuery插件开发模式

http://www.cnblogs.com/gavin-num1/p/5655126.html jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程>的描述,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使

jQuery插件开发前准备

[前言] 关于jQuery的插件,网上一搜一大把,一开始在项目中使用别人写的插件的时候,真是佩服的五体投地,调用的时候简简单单的几句代码,就能实现很复杂的功能.那么如何开发自己的插件呢?其实并不难,从简单的开始,一步一步网上添加功能,最后咋们也能写出功能强大的插件. [jQuery插件开发模式] jQuery插件开发模式有三种: (1)通过$.extend()来扩展jQuery 多用于拓展工具方法,比如给一个数组封装一个方法,功能是将其中的重复元素删除:$.removeSameItem([1,1

jQuery插件开发---转载

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,

跟我一起学JQuery插件开发

http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇,jquery插件是怎么开发的,怎么写属于自己的插件? 昨天在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接. 现在我把上面网站的及结合自己的想法写这篇文章.希望能得到大牛们的支持和谅解...大鸟飞过...欢迎拍装. 资料来源: [1]How to w