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