编写jQuery插件

编写插件的目的是给已有的一系列方法和函数做一个封装，方便重复使用。

jQuery插件主要分为三种类型：

1、封装对象方法的插件

例如parent(),appendTo()和addClass()方法

2、封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。例如jQuery.noConflict()方法。

3、选择器插件

虽然jQuery的选择器已经很厉害，可是我们仍然可以构建自己的选择器。

 

编写jQuery插件要注意几个要点：

1、jQuery插件的文件名推荐命名为：jquery.[插件名].js

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

3、所有的jQuery插件都应该位于闭包中。利用闭包的特性，既可以避免内部的临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。

闭包的写法如下：

(function($) {

//这里是代码

})(jQuery);

 

jQuery提供了两个用于扩展jQuery功能的方法，分别为：jQuery.fn.extend()和jQuery.extend()。

jQuery.fn.extend()方法用于扩展对象方法的插件，而jQuery.extend()用于编写全局函数和选择器插件。这两个方法都接受一个参数，该参数的类型为：Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。

jQuery.extend()用法如下：

var settings = {validate:false,limit:5,name:'foo'};

var options = {validate:true,name:'bar'};

var newoptions = jQuery.extend(settings,options);

此时，变量newoptions的值为：

newoptions = {validate:true,limit:5,name:'bar'}

 

下面我们开始创建jQuery插件：

还记得css有个color属性吧，如果在jQuery中使用它，只能通过$().css('color','#F00')来设置。jQuery不能直接使用$().color()来定义相关的颜色，我们下面就定义一个这样的插件。

首先，根据命名规范，我们为这个插件命名为：jquery.color.js

然后我们开始写入代码，注意所有的代码都是写在闭包之中的：

(function($) {

$.fn.extend({

color:function(value) { //这种结构类似于：{validate:false,limit:5,name:'foo'}，只不过这里定义的是方法，所以用了函数作为值

if(value==undefined) {

return this.css('color'); //如果没有传入参数，即value的值为空的情况下，这个方法就是取得相关元素的颜色值，而不是赋值

} else {

return this.css('color',value); //有参数传入，即value的值不为空的情况下，这个方法就是为相关的元素

}

}

});

})(jQuery);

这就是一个简单的jQuery插件的写法，使用方法就跟其它的jQuery方法没什么区别了，例如，你想给页面中P段落内所有的文字都设置成红色，就可以像下面这样写：

$(function() {

$('P').color('#F00');

})

 

怎么样，简单吧！

我这里还有几个创建jQuery插件的例子，只是我现在自己还没有研究会，当然不好意思跟大家说了，这两天我研究出来后就会继续写续集，现在先放上这么多，希望对大家有所帮助！

 

请看本博客中的《jQuery插件之表格隔行变色》