Jquery 插件学习实例1 插件制作说明与tableUI优化

2016-02-19 13:32 3 1 收藏

今天图老师小编要向大家分享个Jquery 插件学习实例1 插件制作说明与tableUI优化教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
1.1、jQuery.fn.extend(object):
可以参靠jquery参考手册的连个例子:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

使用:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

1.2、jQueryjQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
jQuery 代码:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$.extend({
min: function(a, b) { return a b ? a : b; },
max: function(a, b) { return a b ? a : b; }
});

使用:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$.min(2,3); // = 2
$.max(4,5); // = 5

二、tableUI具体的插件示例代码如下:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
/*
* 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);

来源:https://www.tulaoshi.com/n/20160219/1604578.html

延伸阅读
标签: Web开发
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码,就不难发现。 代码如下: jQuery.fn = jQuery.prototype = { init: function(...
标签: Web开发
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、even...
标签: Web开发
简单使用方法: 代码如下: html head titleJQuery-Cookie插件/title script type="text/javascript" src="jquery-1.4.js"/script script type="text/javascript" src="jquery.cookie.js"/script /head body a href="#"设置cookie1/abr a href="#"设置cookie2/abr a href="#"获取cookie/abr a href="#"删除cookie/abr /body /...
标签: Web开发
jQuery 最好的地方在于其方便的插件机制了,而且网上有很多人在贡献有用的插件,但是插件太多,不熟悉的朋友选择起来可能会比较费事。我觉得有必要开此一贴,收集大家一些常用的好插件,最好稍作点评,以供他人参考。 我先列几个我常用的,请大家踊跃补充。此帖旨在抛砖引玉。 ifixpng: 用于修正 IE 6.0 不支持透明 PNG 图片的,很方便,可以...
标签: Web开发
小序: 整理下自己项目中常用的几款jQuery插件, 发上来共享下, 另外作下说明, 由于自己大部分插件都是贡献在jQuery.com上的, 所以注释, demo 什么的基本上都是英文, 还请各位看官见谅. 正卷:   Facebook/Xiaonei 风格模态框 效果图: 简介: 使用 div, table 和 opacity 效果实现模态框效果... 导航: 详细介绍 | 在线演示 Tabpanel - ...

经验教程

848

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部