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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
angular动态表单制作
Feb 23 Javascript
Vue render深入开发讲解
Apr 13 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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正则走开
2008/03/15 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php curl常用的5个经典例子
2017/01/20 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
React diff算法的实现示例
2018/04/20 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python logging日志模块的详解
2017/10/29 Python
python实现雨滴下落到地面效果
2018/06/21 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
QML使用Python的函数过程解析
2019/09/26 Python
python3实现简单飞机大战
2020/11/29 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
高二政治教学反思
2014/02/01 职场文书
技术比武方案
2014/05/19 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
材料员岗位职责范本
2015/04/11 职场文书
初中政教处工作总结
2015/08/12 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers