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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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压缩图片功能的介绍
2019/03/21 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python中的自省(反射)详解
2015/06/02 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
django settings.py 配置文件及介绍
2019/07/15 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python生成任意频率正弦波方式
2020/02/25 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
争先创优活动总结
2014/08/27 职场文书
小学生读书笔记范文
2015/06/30 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python