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的Ajax时无响应数据的解决方法
May 25 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
js实现异步循环实现代码
Feb 16 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Nest.js散列与加密实例详解
Feb 24 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP在线生成二维码代码(google api)
2013/06/03 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python插入排序算法实例分析
2015/07/03 Python
Python实现telnet服务器的方法
2015/07/10 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书