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 解析Json字符串的性能比较分析代码
Dec 16 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
浅谈React Event实现原理
Sep 20 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
JavaScript实现队列结构过程
Dec 06 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读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
javascript实现数字时钟效果
2021/02/06 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python中bytes和str类型的区别
2019/10/21 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
什么是反射
2012/03/17 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
最新大学生自我评价
2013/09/24 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
初中体育教学随笔
2015/08/15 职场文书
python 详解turtle画爱心代码
2022/02/15 Python