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

所属分类: 网络编程 / JavaScript 阅读数: 1841
收藏 0 赞 0 分享
一. 先对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);

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多