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