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获取事件对象代码
Aug 05 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
JSON相关知识汇总
Jul 03 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JavaScript门面模式详解
Oct 19 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
Python中实现switch功能实例解析
2018/01/11 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python中 * 的用法详解
2019/07/10 Python
Django框架反向解析操作详解
2019/11/28 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
领导班子三严三实心得体会
2014/10/13 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle