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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
angular4中关于表单的校验示例
Oct 16 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
深入解析php模板技术原理【一】
2008/01/10 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
Python正则表达式完全指南
2017/05/25 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python 表格打印代码实例解析
2019/10/12 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
企业文化理念标语
2014/06/10 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL