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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
微信小程序网络封装(简单高效)
Aug 06 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
js实现表格单列按字母排序
Aug 12 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
浅析php学习的路线图
2013/07/10 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
js格式化时间小结
2014/11/03 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
React中的render何时执行过程
2018/04/13 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python并发和异步编程实例
2018/11/15 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
如何使用PHP session
2015/04/21 面试题
秋季运动会演讲稿
2014/09/16 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript