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 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 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实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php绘制一个扇形的方法
2015/01/24 PHP
laravel请求参数校验方法
2019/10/10 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript打字小游戏代码
2011/12/26 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python实现批量压缩图片
2018/01/25 Python
Python for循环生成列表的实例
2018/06/15 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python列表解析操作实例总结
2020/02/26 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
团支部推优材料
2014/05/21 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
董事长新年致辞
2015/07/29 职场文书
创业计划书之家政服务
2019/09/18 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL