提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery插件学习（五）

jQuery学习插件
2023-06-13 09:14:35 时间
这节封装插件了，进展怎么样呢？

一般对外发布的插件都应该进行封装，封装的插件还应该符合规范，只有这样写的插件才具有推广价值，并得到其他用户的喜爱。

首先第一步，是定义一个独立域，代码如下所示。
复制代码代码如下:

(function($){
//自定义插件代码
})(jQuery)//封装插件

确定创建插件类型，选择创建方式，例如，创建一个设置元素字体颜色的插件，则应该创建jquery对象方法，考虑到jquery提供了插件扩展方法extend()，调用该方法会更为规范。
复制代码代码如下:

(function($){
//自定义插件代码
$.extend($.fn,{//jquery对象扩展方法

})
})(jQuery)//封装插件

一般插件都会接受参数，用来控制插件的行为，例如，对于设置颜色的插件，应该允许用户设置字体颜色，同时，应该考虑如果用户没有设置颜色，则应该保持默认色进行设置。
复制代码代码如下:
(function($){
//自定义插件代码
$.extend($.fn,{
color:function(options){
varoptions=$.extend({bcolor:"white",fcolor:"black"},options);
//
}
})
})(jQuery)//封装插件

最后完善插件
复制代码代码如下:
;(function($){
$.extend($.fn,{
color:function(options){varoptions=$.extend({bcolor:"white",fcolor:"black"},options);
//函数体
returnthis.each(function(){
$(this).css("color",options.bcolor);
$(this).css("background",options.fcolor);
});
}//color==end
})
})(jQuery);

调用看看
复制代码代码如下:
$("h1").color({bcolor:"#ccc",fcolor:"#eee"});
$("a").color("#fff");

相关文章