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 16 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
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 insert语法详解
2008/06/07 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
微信小程序入门教程
2016/11/18 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vue2配置scss的方法步骤
2019/06/06 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
解决Django no such table: django_session的问题
2020/04/07 Python
结束运行python的方法
2020/06/16 Python
python利用opencv保存、播放视频
2020/11/02 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
鉴史问廉观后感
2015/06/10 职场文书
关于运动会的广播稿
2015/08/19 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS