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 刷新全集常用代码
Nov 22 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 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结合飞信 免费天气预报短信
2009/05/07 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
JS回调函数深入理解
2019/10/16 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
一夜的工作教学反思
2014/02/08 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
钱学森电影观后感
2015/06/04 职场文书
湘江北去观后感
2015/06/15 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers