首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

编纂jQuery插件

2012-11-11 
编写jQuery插件编写插件的目的是给已有的一系列方法和函数做一个封装,方便重复使用。jQuery插件主要分为三

编写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插件之表格隔行变色》

热点排行