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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
微信小程序上传图片实例
May 28 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
layui递归实现动态左侧菜单
2019/07/26 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python的help函数如何使用
2020/06/11 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
写自荐信要注意什么
2013/12/26 职场文书
工程质量月活动方案
2014/02/19 职场文书
分公司经理任命书
2014/06/05 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
大学生实训报告总结
2014/11/05 职场文书
检举信的写法
2019/04/10 职场文书