跟我一起学写jQuery插件开发方法(附完整实例及下载)


Posted in Javascript onApril 01, 2010

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好。而前端开发过程中,JavaScript技能又是必不可少的。所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧。这是我写的一个jQuery插件。”我想基本上你的人生大事就能很快解决。
先想好做个什么功能
这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些。不要想一口就吃个胖子,咱也吃不了。咱还是捡个瘦的下手吧。但是,这个功能也不能太无聊,如果无聊到几乎没用处,就算做好了也是扔到马桶里,不会持续更新,也便不会持续进步了。
我最终选择的是:美化表格,让表格的奇偶行颜色不同,然后鼠标移到某行上,某行可以高亮显示。功能简单又实用,不错,不错。呵呵~~
不急着写,先想想实现原理
还不急,先想想实现原理。必要的时候,先写出简单的实现的原型。
我的这个美化表格的例子,实现原理倒是简单,无非就是找到表格的奇偶行,然后添加不同的class,活动行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再去掉这个class即可。
一个通用的框架
在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。

(function($){ 
$.fn.yourName = function(options){ 
//各种属性、参数 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//插件实现代码 
}); 
}; 
})(jQuery);

有了这个,咱就可以往里面套东西了。
名号、参数和属性
好不容易开始闯荡江湖了,一定要有一个响亮的名号才行,这样走在江湖上,才能够?牛?煌?纭2恍牛?闾??思摇爸泄?婪雷椤保∷?裕?壅饫镆欢ㄒ?鸶鱿炝恋拿?牛?欢ㄒ?虻ァ⒚髁恕⒐蝗ㄍ?K?裕?龆?耍?徒凶觥?ableUI”了!
参数和属性也很简单,无非就是三个class的名称。就叫做:evenRowClass、oddRowClass和activeRowClass吧。
所以,上面的框架,咱就把上半身给填上了。
(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//实现代码 
}); 
}; 
})(jQuery);

这里重点说一下这一句:
var options = $.extend(defaults, options);

看上去很?诺囊痪洌?涫稻褪呛喜⒍喔龆韵笪?桓觥U饫锞褪牵?绻?阍诘饔玫氖焙蛐戳诵碌牟问??陀媚阈碌牟问??绻?挥行矗?陀媚?系牟问?O虢?徊搅私獾呐笥眩?梢圆慰?query的官方文档: http://api.jquery.com/jQuery.extend/

开始下半身吧
ok,上半身填补完了,咱就可以填补下半身吧。无非就是找到基数行和偶数行(感谢jQuery提供了类似tr:even这种写法,使其及其简单),然后添加上相应的class。然后再给所有的tr,绑定mouseover和mouseout事件即可。下半身代码如下:

(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var thisTable=$(this); 
//添加奇偶行颜色 
$(thisTable).find("tr:even").addClass(options.evenRowClass); 
$(thisTable).find("tr:odd").addClass(options.oddRowClass); 
//添加活动行颜色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery);

最重要的一步!
也许有些朋友觉得这样就算是完成了。但是切切相反,我们还有最重要的一步没有完成,那就是一定要在插件上方,写上插件的名称、版本号、完成日期、作者,作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。
/* 
* tableUI 0.1 
* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/ 
* Date: 2010-03-30 
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示 
*/ 
(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var thisTable=$(this); 
//添加奇偶行颜色 
$(thisTable).find("tr:even").addClass(options.evenRowClass); 
$(thisTable).find("tr:odd").addClass(options.oddRowClass); 
//添加活动行颜色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery);

演示地址

实例下载地址

Javascript 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #Javascript
基于jquery的tab切换 js原理
Apr 01 #Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 #Javascript
You might like
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
15种PHP Encoder的比较
2007/03/06 PHP
PHP开发负载均衡指南
2010/07/17 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python实现读取json文件到excel表
2017/11/18 Python
python爬虫基本知识
2018/03/05 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python turtle画图库&&画姓名实例
2020/01/19 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
软件测试面试题
2014/01/05 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
代办委托书怎样写
2014/04/08 职场文书
社区禁毒工作方案
2014/06/02 职场文书
科技工作者先进事迹
2014/08/16 职场文书
影视广告专业求职信
2014/09/02 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
python处理json数据文件
2022/04/11 Python