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调用wcf并展示出数据的方法
Jul 07 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
ionic3 懒加载
Aug 16 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
使用js和canvas实现时钟效果
Sep 08 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php 购物车的例子
2009/05/04 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python常用函数详解
2016/09/13 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
参观考察邀请函范文
2014/01/29 职场文书
授权委托书样本
2014/04/03 职场文书
自主招生学校推荐信
2014/09/26 职场文书
初中物理教学反思
2016/02/19 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Python日志模块logging用法
2022/06/05 Python