jQuery自定义插件

jQuery的插件用成千上万来形容都不显夸张，如果你还没有自己写过插件，并且有兴趣自己也写个jQuery插件的话，那这篇文章或许对你会有点帮助。

这篇文章主要是介绍如何来自定义一个插件，重点是介绍如何自定义，而不是介绍插件的内容，所以笔者简单的用jQuery写了一个选项卡的Demo:

查看Demo »

这里就不贴具体的代码和实现了，大家直接在demo页面查看源代码就可以看得到,或者在文章最后下载源代码查看。如果有什么问题欢迎加入QQ交流群32930014。

下面我们就把这个demo改为jQuery的插件形式来实现。

首先，建立一个js文件，这里就暂定为：customTabs.js，然后我们一步一步来建立一个jQuery插件。

jQuery插件的基础模板：

(function($){
	$.fn.warrenTabs=function(){
		
		//content
	}		
})(jQuery);

或许刚接触的朋友看不太懂是什么意思，先别急，我们先把插件做完，最后再来详细解释。

之后，把刚才demo里的实现方法直接放入上述的function内容块里：

(function($){
	$.fn.warrenTabs=function(){		
		$(this).find("input").click(function(){$(this).siblings("input").removeClass("active").end().addClass("active").siblings("div").css("display","none").eq($(this).index()).css("display","block");})	
	}	
	})(jQuery);

把之前demo里的jquery代码块贴出来对比一下：

$("#tabs").find("input").click(function(){ $(this).siblings("input").removeClass("active").end().addClass("active").siblings("div").css("display","none").eq($(this).index()).css("display","block");});

有没有发现两个代码块基本一样，仅仅有一点区别，就是之前demo里的对象是$("#tabs")，而放入插件中，我们改成了$(this)，对当前对象的引用。为什么这么改，看一下下面的引用方法就一目了然了：

$("#tabs").warrenTabs();

我们是对$("#tabs")调用的warrenTabs方法，所以$(this)其实就是和之前一样代表的$("#tabs")。

当然上述代码调用前要先引入customTabs.js。

到这里，我们的自定义插件也就完成了，预览一下：

查看Demo »

下面我们详细说一下上面的几个知识点：

1、()在js中的作用

在上述代码中，jquery插件的基础模板中有这样一个写法：

(function($){})(jQuery);

这看起来很怪的写法到底是什么意思呢？首先我们看下面一段代码：

alert((function(x,y){return x+y;})(2,3));// "5" 

这段代码的执行结果为5，alert中的内容其实就是：

(function(x,y){return x+y;})(2,3)

这里的function(x,y){return x+y;}大家肯定都看得懂，但是为什么外面加了一个(),然后后面有跟了一个(2,3)呢？到这里，我们需要解释一下()在js中的含义了,引用来自网络的一段解释：

“小括号能把我们的表达式组合分块，并且每一块，也就是每一对小括号，都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以，当我们用一对小括号把匿名函数括起来的时候，实际上小括号对返回的，就是一个匿名函数的Function对象。因此，小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表，就会实现普通函数的调用形式。”

或许上面的一大串文字看的头晕，我们再来举个例子：

var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc 
alert((abc).constructor==(function(x,y){return x+y;}).constructor); 

运行一下可以发现，alert的值为true,也就是说abc的constructor和匿名函数的constructor一样了。或者说，两个函数的实现是一样的。

所以我们可以这样调用：

alert((abc)(2,3));
alert(abc(2,3));

上面的调用方式等同于：

alert((function(x,y){return x+y;})(2,3));

可以发现，后面括号的值其实就是前面括号方法里需要传入的参数。到这里，差不多了解()的作用了，那我们再来看看jquery这里刚才写法：

(function($){})(jQuery);

这里其实也和刚才的例子一样，意思就是把jQuery这个对象传入到function中的$参数中，那在这个方法内部调用$其实就是调用的jQuery对象。

这种写法称作闭包，至于其概念笔者在这里不想涉及，毕竟概念是死的，理解会用才是硬道理。

2、$.fn

在上述jQuery插件代码中，还用到了$.fn，如以下代码片段：

$.fn.warrenTabs=function(){};

其实这里笔者也没有做深入研究，只知道jQuery给我们提供了$.fn这个方法供我们自定义插件，我们直接拿过来用就可以了，后面跟上自己插件的名字，然后定义一个方法赋给这个自定义的名字就完成了。

---

本文资料下载：点击下载 »

原创文章，转载请注明出处：http://www.wglong.com/main/artical!details?id=34