Jquery 插件学习实例1 插件制作说明与tableUI优化


Posted in Javascript onApril 02, 2010

一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
1.1、jQuery.fn.extend(object):
可以参靠jquery参考手册的连个例子:

$.fn.extend({ 
check: function() { 
return this.each(function() { this.checked = true; }); 
}, 
uncheck: function() { 
return this.each(function() { this.checked = false; }); 
} 
});

使用:
$("input[type=checkbox]").check(); 
$("input[type=radio]").uncheck();

1.2、jQueryjQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
jQuery 代码:
$.extend({ 
min: function(a, b) { return a < b ? a : b; }, 
max: function(a, b) { return a > b ? a : b; } 
});

使用:
$.min(2,3); // => 2 
$.max(4,5); // => 5

二、tableUI具体的插件示例代码如下:
/* 
* tableUI 0.2 
* 就不写版权了吧,呵呵 
* Date: 4/1/2010 
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示 
* 0.2版结合25个小贴士对“政委”的那个做了些优化,学习之用,还请指正。 
*/ 
(function($) { 
$.fn.tableUI = function(options) { 
//默认参数 
var defaults = { 
evenRowClass: "evenRow", 
oddRowClass: "oddRow", 
activeRowClass: "activeRow" 
}; 
//用传入参数覆盖了默认值 
options = $.extend(defaults, options); 
//表对象 
var thisTable = $(this); 
//添加奇偶行颜色 
thisTable.find("tr:even").addClass(options.evenRowClass); 
thisTable.find("tr:odd").addClass(options.oddRowClass); 
//绑定鼠标移动事件,不必对每行都绑定事件。 
thisTable.live("mouseover", function(e) { 
//获取鼠标所指目标对象父级tr 
$(e.target).parent().addClass(options.activeRowClass); 
//阻止事件冒泡 
return false; 
}).live("mouseout", function(e) { 
$(e.target).parent().removeClass(options.activeRowClass); 
return false; 
}); 
}; 
})(jQuery);

Jquery 插件学习实例1 插件制作说明与tableUI优化
Javascript 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
js实现返回顶部效果
Mar 10 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 #Javascript
初试jQuery EasyUI 使用介绍
Apr 01 #Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 #Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
You might like
php中文验证码实现方法
2015/06/18 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
多个python文件调用logging模块报错误
2020/02/12 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
收银员岗位职责
2014/02/07 职场文书
决心书范文
2014/03/11 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
个人总结与自我评价
2015/02/14 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Python基础详解之邮件处理
2021/04/28 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server