插件开发教程--(一)

前言：

在我们学习开发插件前，必须先搞懂，以下这些插件的基础知识，直奔主题了。

1.jQuery插件分为3类

（1） 封装对象方法的插件（对象级别的开发）

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

（2）封装全局函数的插件（类级别开发）

指可以把独立的函数添加到jQuery命名空间之下。

添加一个全局函数，我们只需要如下定义：

jQuery.foo=function(){

alert('this is a test');

}

也可以添加多个全局函数：

<span style="white-space:pre">		</span>jQuery.foo=function(){
alert('this is a test');
}
jQuery.bar=function(){
alert('this function takes a parameter');
}

调用时和一个函数一样：jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

     （3）选择器插件

2.编写JQuery插件需要注意的地方

（1）插件的推荐命名方法：jquery.[插件名].js

（2）所有的对象方法都应该附加到jQuery.fn对象上面，而所有的全局函数都应当附加到jQuery对象本身上。

（3）在插件内部，this指向的是当前选择器获取的jQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。

（4）可以通过this.each来遍历所有的元素。

（5）所有的方法或函数插件，都应当以分好结尾，否则压缩的时候可能会出现问题。为了更加保险写，可以在插件头部添加一个分好（；），以免他们的不规范代码给插件带来影响。

（6）插件应该返回一个jQuery对象，以便保证插件的可链式操作。

（7）避免在插件内部使用$作为jQuery
对象的别名，而应使用完整的jQuery来标示。这样可以避免冲突。

3.jQuery插件的机制

jQuery提供了2个用于扩展jQuery功能的方法。即：
（1）jQurty.fn.extend()；

（2）jQuery.extend()；

jQuery.extend()在插件中有一个很重要的功能是扩展已经有的object的对象。

比如：

var newSrc=$.extend(dest,src1,src2,src3...)

他的含义是将src1,src2,src3...合并到dest中，返回值为合并后的dest。

示例：

var
result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 
得到的结果是： 
result={name:"Jerry",age:21,sex:"Boy"};

4.编写插件的基本语法

<span style="font-size:12px;">	$.fn.myPlugin = function() {

//具体代码
}
$("元素"）.myPlugin(); //调用编写的插件，类似于jquery一样。</span>

通过上面的代码，不难发现，插件的写法基本上就是往$.fn上面添加一个方法,插件的名字是我们自己命名的，然后我们的插件代码在这个方法里面展开.

将页面上所有连接颜色转成红色，可以这样写：

<span style="font-size:12px;">	     $.fn.myPlugin=function(){
this.css('color','red');
//在这里面，this指的是用jQuery选中的元素
//比如：$('a'),则 this=$('a')
}</span>

在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。

比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用调用jQuery的其他方法而
       不需要再用美元符号包装一下。

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

理解这个this至关重要！！

未完，待续-----