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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
JavaScript门面模式详解
Oct 19 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
写出高质量的PHP程序
2012/02/04 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Display SQL Server Version Information
2007/06/21 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
跟老齐学Python之用Python计算
2014/09/12 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
求职面试个人自我评价
2014/02/28 职场文书
2015年度保密工作总结
2015/04/24 职场文书
贷款收入证明格式
2015/06/24 职场文书
远程教育培训心得体会
2016/01/09 职场文书