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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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实现的在线人员函数库
2008/04/09 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python if语句知识点用法总结
2018/06/10 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python中logging实例讲解
2019/01/17 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
质量月口号
2014/06/20 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
万能检讨书
2015/01/27 职场文书
保护动物的宣传语
2015/07/13 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
使用pytorch实现线性回归
2021/04/11 Python
浅谈Python响应式类库RxPy
2021/06/14 Python
Javascript 解构赋值详情
2021/11/17 Javascript