Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說明與tableUI優(yōu)化
更新時(shí)間：2010年04月02日 00:00:27 作者：
Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說明與tableUI優(yōu)化，需要的朋友可以參考下。
一. 先對(duì)jQuery制作方式，jQuery為開發(fā)擴(kuò)展提拱了兩個(gè)方法，分別是：
jQuery.extend(object); 為擴(kuò)展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對(duì)象添加方法。
1.1、jQuery.fn.extend(object):
可以參靠jquery參考手冊(cè)的連個(gè)例子：
$.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)
擴(kuò)展jQuery對(duì)象本身。用來在jQuery命名空間上增加新函數(shù)。
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
* 就不寫版權(quán)了吧，呵呵
* Date: 4/1/2010
* 使用tableUI可以方便地將表格提示使用體驗(yàn)。先提供的功能有奇偶行顏色交替，鼠標(biāo)移上高亮顯示
* 0.2版結(jié)合25個(gè)小貼士對(duì)“政委”的那個(gè)做了些優(yōu)化，學(xué)習(xí)之用，還請(qǐng)指正。
*/
(function($) {
$.fn.tableUI = function(options) {
//默認(rèn)參數(shù)
var defaults = {
evenRowClass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
//用傳入?yún)?shù)覆蓋了默認(rèn)值
options = $.extend(defaults, options);
//表對(duì)象
var thisTable = $(this);
//添加奇偶行顏色
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//綁定鼠標(biāo)移動(dòng)事件，不必對(duì)每行都綁定事件。
thisTable.live("mouseover", function(e) {
//獲取鼠標(biāo)所指目標(biāo)對(duì)象父級(jí)tr
$(e.target).parent().addClass(options.activeRowClass);
//阻止事件冒泡
return false;
}).live("mouseout", function(e) {
$(e.target).parent().removeClass(options.activeRowClass);
return false;
});
};
})(jQuery);
jQuery.extend(object); 為擴(kuò)展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對(duì)象添加方法。
1.1、jQuery.fn.extend(object):
可以參靠jquery參考手冊(cè)的連個(gè)例子：
復(fù)制代碼 代碼如下:
$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
使用：
復(fù)制代碼 代碼如下:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
1.2、jQueryjQuery.extend(object)
擴(kuò)展jQuery對(duì)象本身。用來在jQuery命名空間上增加新函數(shù)。
jQuery 代碼:
復(fù)制代碼 代碼如下:
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
使用：
復(fù)制代碼 代碼如下:
$.min(2,3); // => 2
$.max(4,5); // => 5
二、tableUI具體的插件示例代碼如下：
復(fù)制代碼 代碼如下:
/*
* tableUI 0.2
* 就不寫版權(quán)了吧，呵呵
* Date: 4/1/2010
* 使用tableUI可以方便地將表格提示使用體驗(yàn)。先提供的功能有奇偶行顏色交替，鼠標(biāo)移上高亮顯示
* 0.2版結(jié)合25個(gè)小貼士對(duì)“政委”的那個(gè)做了些優(yōu)化，學(xué)習(xí)之用，還請(qǐng)指正。
*/
(function($) {
$.fn.tableUI = function(options) {
//默認(rèn)參數(shù)
var defaults = {
evenRowClass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
//用傳入?yún)?shù)覆蓋了默認(rèn)值
options = $.extend(defaults, options);
//表對(duì)象
var thisTable = $(this);
//添加奇偶行顏色
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//綁定鼠標(biāo)移動(dòng)事件，不必對(duì)每行都綁定事件。
thisTable.live("mouseover", function(e) {
//獲取鼠標(biāo)所指目標(biāo)對(duì)象父級(jí)tr
$(e.target).parent().addClass(options.activeRowClass);
//阻止事件冒泡
return false;
}).live("mouseout", function(e) {
$(e.target).parent().removeClass(options.activeRowClass);
return false;
});
};
})(jQuery);
相關(guān)文章
在第一講中，已經(jīng)對(duì)JQuery做了入門級(jí)的介紹，我相信看過的網(wǎng)友都應(yīng)該知道怎么開始寫一個(gè)簡(jiǎn)單的JQuery程序了。首先是需要引入一個(gè)JQuery包，其次是根據(jù)JQuery的語法寫代碼就可以了。2010-07-07
jquery利用ajax調(diào)用后臺(tái)方法實(shí)例
這篇文章介紹了jquery利用ajax調(diào)用后臺(tái)方法實(shí)例，有需要的朋友可以參考一下2013-08-08
Ajax在Web應(yīng)用中的作用越來越大，許多工具都包含了對(duì)這一功能的使用，以下是對(duì)這些常用工具中Ajax的典型實(shí)例.2016-06-06
jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果,通過jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動(dòng)態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果
這篇文章主要介紹了原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果，介紹到了jQuery實(shí)現(xiàn)淡入淡出輪播效果的基本原理，感興趣的小伙伴們可以參考一下2015-12-12
jquery實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能【適合新手】
這篇文章主要介紹了jquery實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能,涉及jQuery基于定時(shí)器的事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
用jQuery技術(shù)實(shí)現(xiàn)Tab頁(yè)界面之二
這個(gè)tab頁(yè)是把數(shù)據(jù)全部取回來再顯示，所以沒有數(shù)據(jù)緩存的特點(diǎn)。但是因?yàn)閿?shù)據(jù)全部是顯示的html代碼，所以對(duì)搜索引擎是友好的，也許對(duì)seo有好處。2009-09-09
這篇文章主要介紹了jQuery控制控件文本的長(zhǎng)度的操作方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07