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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
js动态生成表格(节点操作)
Jan 12 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
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
微信小程序使用Socket的实例
2017/09/19 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python del()函数用法
2013/03/24 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python 读写中文json的实例详解
2017/10/29 Python
简单实现python收发邮件功能
2018/01/05 Python
如何基于Python实现自动扫雷
2020/01/06 Python
基于python监控程序是否关闭
2020/01/14 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
求职信模板标准格式范文
2014/02/23 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
颁奖典礼主持词
2014/03/25 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
女方离婚起诉书
2015/05/18 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python