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随机展示头像代码
Dec 21 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
jquery插件validate验证的小例子
May 08 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
微信小程序实现自动定位功能
Oct 31 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python的launcher用法知识点总结
2020/08/07 Python
python不同版本的_new_不同点总结
2020/12/09 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
平面设计师工作职责范文
2013/12/03 职场文书
思想专业自荐信范文
2013/12/25 职场文书
公司运动会策划方案
2014/05/25 职场文书
初中家长评语和期望
2014/12/26 职场文书
心理学培训心得体会
2016/01/22 职场文书