jQuery插件开发教程

     　　　　　　　　　　　　　　　　　　　　　　　　 ——让你的jQuery水平提升一个台阶 

要说jQuery 最成功的地方，我认为是它的可扩展性吸引了众多开发者为其开发插件，从而建立起了一个生态系统。这好比大公司们争相做平台一样，得平台者得天下。苹果、微软、谷歌等巨头，都有各自的平台及生态圈。

学会使用jQuery并不难，因为它简单易学，并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果想将能力提升一个台阶，编写一个属于自己的插件是个不错的选择。

本教程可能不是最精品的，但一定是最详细的。

jQuery插件开发模式

软件开发过程中是需要一定的设计模式来指导开发的，有了模式我们就能更好地组织我们的代码，并且从这些前辈们总结出来的模式中学到很多好的开发经验。

根据《jQuery高级编程》中的描述，jQuery插件开发方式主要有三种：

1、通过$.extend()来扩展jQuery

2、通过$.fn 向jQuery添加新的方法

3、通过$.widget()应用jQuery UI的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存、各种关于插件的常用方法等，非常贴心，这里不细说。

而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成在jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时，直接通过$符号调用（$.myfunction()），而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。

首先准备<script type="text/javascript" src="jquery.js"></script>在html中引用，可以在jQuery官网去下载最新版本，

新建plug.html文件和plug.js，并在html中引用；

如下：

plug

在plug.js中写js：

$.extend({ sayHello : function(name){ $('p').html('hello,'+(name?name: 'Dute')+'!'); console.log('hello,'+(name?name: 'Dute')+'!'); } });

然后在html中引用他，在body中加入如下这几行代码：

<script type="text/javascript"> $.sayHello(); $.sayHello('Lucy'); </script>

运行结果：

文本页面显示带参数的是因为覆盖了默认的。

上面代码中，通过$.extend()向jQuery添加了一个sayHello函数，然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。

但如你所见，这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。

看下面这个例子：

$.extend({ logg : function(message){ var now = new Date(), y=now.getFullYear(), m=now.getMonth()+1, d=now.getDate(), h=now.getHours(), mins=now.getMinutes(), s=now.getSeconds(), time=y + 'http://www.cnblogs.com/' + m + 'http://www.cnblogs.com/' + d + ' ' + h + ':' + mins + ':' + s; console.log(time+' by: '+message); $('p').html(time+' by: '+message); } });

调用方式：$.logg('EthanCoco');

运行结果：

但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。

你所见到或使用的插件也大多是通过此种方式开发。

 

先看一下它的基本格式：

$.fn.pluginName = function() {

    //your code goes here

}

基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

比如我们将页面上所有链接颜色转成红色，则可以这样写这个插件：

$.fn.myPlugin = function() {

    //在这里面,this指的是用jQuery选中的元素

    //example :$('a'),则this=$('a')

    this.css('color', 'red');

}

在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用

jQuery的其他方法而不需要再用美元符号来包装一下。

所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用 $('a').css()。

理解this在这个地方的含义很重要。这样你才知道为什么可以直接调用jQuery方法的同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用，下面会讲到。初学容易被this的值整晕，但理解了就不难了。

现在就可以去页面试试我们的代码了，在页面上放几个链接，调用插件后链接字体变成红色。

在body中添加如下代码:

<ul> <li> <a href="http://www.qq.com/">Tencent</a> </li> <li> <a href="http://souhu.com/">Souhu</a> </li> <li> <a href="http://taobao.com/">Taobao</a> </li> </ul> <p>I am label p, I am fine! I am not like label a!</p>

调用方式：

$(function(){ $('a').myPlugin(); });

运行结果：

 

 

下面进一步，在插件代码里处理每个具体的元素，而不是对一个集合进行处理，这样我们就可以针对每个元素进行相应操作。