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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
详解Puppeteer 入门教程
May 09 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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/07/02 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
通信工程毕业生求职信
2013/11/16 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
客户经理岗位职责
2013/12/08 职场文书
元旦晚会活动总结
2014/07/09 职场文书
时尚女魔头观后感
2015/06/04 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python