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 相关文章推荐
js charAt的使用示例
Feb 18 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
vue 插槽简介及使用示例
Nov 19 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密码生成类实例
2014/09/24 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
自动更新作用
2006/10/08 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
JS常用算法实现代码
2016/11/14 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python动态加载包的方法小结
2016/04/18 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python实现k-means聚类算法
2018/02/23 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python实现大量图片重命名
2020/03/23 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
转学证明范本
2015/06/19 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Python读取和写入Excel数据
2022/04/20 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android