封装的插件符合规范,更具有推广价值,更能得到其他用户的喜爱,因此这节我们讲述插件的封装...
这节介绍jquery封装插件。 一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱。 
首先第一步,是定义一个独立域,代码如下所示。 
 
复制代码 代码如下:
(function($){ 
//自定义插件代码 
})(jQuery) //封装插件 
 
确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范。  
复制代码 代码如下:
(function($){ 
//自定义插件代码 
$.extend($.fn,{ //jquery对象扩展方法 
}) 
})(jQuery) //封装插件 
 
一般插件都会接受参数,用来控制插件的 行为,例如,对于设置颜色的插件,应该允许用户设置字体颜色,同时,应该考虑如果用户没有设置颜色,则应该保持默认色进行设置。  
复制代码 代码如下:
(function($){ 
//自定义插件代码 
$.extend($.fn,{ 
color : function(options){ 
var options = $.extend({bcolor :"white",fcolor:"black"},options); 
// 
} 
}) 
})(jQuery) //封装插件 
 
最后,完善插件  
复制代码 代码如下:
;(function($){ 
$.extend($.fn,{ 
color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options); 
//函数体 
return this.each(function(){ 
$(this).css("color",options.bcolor); 
$(this).css("background",options.fcolor); 
}); 
}//color==end 
}) 
})(jQuery); 
 
调用看看 
 
复制代码 代码如下:
$("h1").color({bcolor : "#ccc",fcolor:"#eee"}); 
$('a').color("#fff");