jquery插件学习五
发布时间：2015-10-05 编辑：jiaochengji.com
封装的插件符合规范，更具有推广价值，更能得到其他用户的喜爱，因此这节我们讲述插件的封装...
这节介绍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");
您可能感兴趣的文章：
jQuery的学习步骤
jquery插件学习五
jquery 插件学习（五）
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
jquery图片自动切换插件和实例
最新28个很棒的jQuery 教程
12款经典的白富美型—jquery图片轮播插件—前端开发必备
jquery 插件学习（一）
jquery幻灯片效果的插件一例
零基础Python学习路线图，Python初学者必须要了解，让你少走弯路
上一篇：jquery插件学习四
下一篇：jQuery EasyDrag实现DIV拖动
[关闭]