jquery 插件学习(五)


Posted in Javascript onAugust 06, 2012

这节封装插件了,进展怎么样呢?

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

首先第一步,是定义一个独立域,代码如下所示。

(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");
Javascript 相关文章推荐
javascript小数四舍五入多种方法实现
Dec 23 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
js实现div色块碰撞
Jan 16 Javascript
jquery 插件学习(四)
Aug 06 #Javascript
jquery 插件学习(三)
Aug 06 #Javascript
jquery 插件学习(二)
Aug 06 #Javascript
jquery 插件学习(一)
Aug 06 #Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 #Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 #Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php获取远程文件内容的函数
2015/11/02 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
python显示生日是星期几的方法
2015/05/27 Python
Python读写unicode文件的方法
2015/07/10 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python爬取代理ip的示例
2020/12/18 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
《故乡》教学反思
2014/04/10 职场文书
四年级作文之植物
2019/09/20 职场文书
详解OpenCV曝光融合
2022/04/29 Python