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 相关文章推荐
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
js 自动播放的实例代码
Nov 19 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
详解JavaScript 高阶函数
Sep 14 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
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
js实现搜索栏效果
2018/11/16 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
浅谈用VSCode写python的正确姿势
2017/12/16 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python 从attribute到property详解
2020/03/05 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Django封装交互接口代码
2020/07/12 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
医学生自荐信范文
2013/12/03 职场文书
学习雷锋标语
2014/06/25 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
云冈石窟导游词
2015/02/04 职场文书
统招统分证明
2015/06/23 职场文书
呐喊读书笔记
2015/06/30 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
七年级上册生物的课件
2019/08/07 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
javascript的var与let,const之间的区别详解
2022/02/18 Javascript