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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
学习Angularjs分页指令
Jul 01 Javascript
javaScript封装的各种写法
Aug 14 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 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
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
php命名空间学习详解
2014/02/27 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python中有几个关键字
2020/06/04 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
美术指导求职信
2014/03/17 职场文书
公司周年庆典致辞
2015/07/30 职场文书
安全教育的主题班会
2015/08/13 职场文书
原生JS实现分页
2022/04/19 Javascript