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.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
js仿京东放大镜效果
Aug 09 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php 强制下载文件实现代码
2013/10/28 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
获取Javscript执行函数名称的方法
2006/12/22 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
Node.js实现数据推送
2016/04/14 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
理解Python垃圾回收机制
2016/02/12 Python
Python如何访问字符串中的值
2020/02/09 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
英国航空官网:British Airways
2016/09/11 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
思想品德自我评价
2014/02/04 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技