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 插件开发方法小结
Oct 23 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python3并发写文件与Python对比
2019/11/20 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
SQL面试题
2013/12/09 面试题
通信工程毕业生求职信
2013/11/16 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
新法人代表任命书
2014/06/06 职场文书
农村门前三包责任书
2014/07/25 职场文书
汽车转让协议书
2015/01/29 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
捐书仪式主持词
2015/07/04 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
基于Python实现股票收益率分析
2022/04/02 Python