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代码
Sep 07 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
原生js实现吸顶效果
Mar 13 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
layui多图上传实现删除功能的例子
Sep 23 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写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
四种会话跟踪技术
2015/05/20 面试题
软件项目开发计划书
2014/05/01 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
雷人标语集锦
2014/06/19 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
离职证明范本
2015/06/12 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸