jQuery 庫(kù)是專為加快 JavaScript 開(kāi)發(fā)速度而設(shè)計(jì)的。通過(guò)簡(jiǎn)化編寫 JavaScript 的方式，減少代碼量。使用
創(chuàng)新互聯(lián)專注于雙臺(tái)子網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供雙臺(tái)子營(yíng)銷型網(wǎng)站建設(shè)，雙臺(tái)子網(wǎng)站制作、雙臺(tái)子網(wǎng)頁(yè)設(shè)計(jì)、雙臺(tái)子網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造雙臺(tái)子網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供雙臺(tái)子網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
jQuery 庫(kù)時(shí)，您可能會(huì)發(fā)現(xiàn)您經(jīng)常為一些常用函數(shù)重寫相同的代碼。如果這樣的話，這可能就是您需要編寫自定義 jQuery 插件的一個(gè)原因。
jQuery 插件允許您使用自定義代碼擴(kuò)展 jQuery 庫(kù)；您可以對(duì)一些重復(fù)性函數(shù)使用插件。例如，很多插件可供幻燈片、下拉菜單和折疊菜單所用。如果您搜索 jQuery 插件，就會(huì)發(fā)現(xiàn)有大量可用于自己項(xiàng)目的示例（看看它們是如何構(gòu)建的）。
準(zhǔn)備工作
對(duì)JavaScript、jQuery 和CSS有一個(gè)基本了解。（用到的源代碼及示例在本文最下方）
開(kāi)始
jQuery 是一個(gè)可擴(kuò)展 JavaScript 語(yǔ)言的庫(kù)。當(dāng)您創(chuàng)建一個(gè) jQuery 插件時(shí)，本質(zhì)上是在擴(kuò)展這個(gè) jQuery
庫(kù)。要真正了解插件如何擴(kuò)展 jQuery 庫(kù)需要對(duì) JavaScript prototype 屬性有一個(gè)基本了解。盡管不直接使用，但是
JavaScript prototype 屬性可通過(guò) jQuery 屬性 fn 在后臺(tái)使用，這是原生 JavaScript prototype
屬性的一個(gè) jQuery 別名。
要使用 fn 屬性創(chuàng)建一個(gè)新 jQuery 插件，只需要為 fn 屬性分配一個(gè)插件名，并將其指向一個(gè)充當(dāng)構(gòu)造函數(shù)的新函數(shù)，類似于純
JavaScript。Code 1顯示了如何定義一個(gè)名為 accordion 的新 jQuery 插件，其方法是通過(guò)使用 jQuery 對(duì)象和
fn 屬性，并將其分配給一個(gè)新的構(gòu)造函數(shù)。
Code 1：定義一個(gè)名為 accordion 的新 jQuery 插件
jQuery.fn.accordion = function() {
// 在這里添加插件代碼
};
Code 1 展示了創(chuàng)建 jQuery 插件的一種方法；該示例沒(méi)有什么功能性錯(cuò)誤。但是，創(chuàng)建一個(gè) jQuery
插件所推薦的方法是，先創(chuàng)建一個(gè)允許使用美元符號(hào) ($) 的包裝器函數(shù)。在默認(rèn)情況下，美元符號(hào)可能與其他 JavaScript
框架發(fā)生沖突，如果將插件包裝在一個(gè)函數(shù)中，就不會(huì)出現(xiàn)沖突。Code 2 中的示例代碼顯示如何將一個(gè)包裝器函數(shù)應(yīng)用到一個(gè) jQuery
插件定義中。
(function($) {
$.fn.accordion = function() {
// 在這里添加插件代碼
};
})(jQuery);
在Code 2 中，jQuery 關(guān)鍵字被應(yīng)用到包裝器函數(shù)中，這允許您在插件中使用美元符號(hào)，就像使用 fn
屬性時(shí)那樣。包裝器函數(shù)就緒后，就可以在整個(gè)插件的任何地方使用美元符號(hào)代替 jQuery
關(guān)鍵字，不會(huì)干擾其他第三方插件。該選項(xiàng)提供了一種方法使我們可以在開(kāi)發(fā)整個(gè)插件中編寫較少的代碼，并且有助于您的插件代碼保持整潔，易于維護(hù)。
維護(hù)鏈接性
jQuery 的一個(gè)優(yōu)勢(shì)是允許您使用任何類型的選擇器。但是，必須記住，您的插件可以處理幾種不同的元素類型。使用 this
關(guān)鍵字允許您的插件應(yīng)用于相關(guān)函數(shù)，通過(guò)循環(huán)實(shí)現(xiàn)每個(gè)元素的訪問(wèn)，而不考慮元素類型。如果在 each 循環(huán)前使用 return
關(guān)鍵字，就可以使用您的插件維護(hù)鏈接性。清單 3 顯示了分配給一個(gè)函數(shù)處理程序且與 return 關(guān)鍵字相結(jié)合的 each 循環(huán)。
code 3. 在 each 循環(huán)之前使用 return 關(guān)鍵字
(function($) {
$.fn.accordion = function() {
return this.each(function() {
// 使用 return
});
};
})(jQuery);
有了Code 3 的代碼后，示例 accordion 插件可用在一個(gè)方法調(diào)用鏈中。有了鏈接性（另一個(gè)強(qiáng)大的 jQuery
特性），您的插件就可用在一個(gè)方法調(diào)用鏈中。例如，下面的代碼顯示了如何淡出 HTML 元素，并在單一的方法調(diào)用鏈中將其從文檔對(duì)象模型 (DOM)
中刪除。
$("#my-div").fadeOut().remove();
構(gòu)造一個(gè) accordion
一個(gè)典型的層疊設(shè)計(jì)包括標(biāo)題欄和相關(guān)內(nèi)容區(qū)域。定義列表是一個(gè)可供 accordions 使用的很好的 HTML 結(jié)構(gòu)；dt 元素供標(biāo)題所用，而dd 元素供內(nèi)容區(qū)域所用。清單 4 中的 HTML 結(jié)構(gòu)是一個(gè)定義列表，含有四個(gè)標(biāo)題以及相應(yīng)的內(nèi)容區(qū)域。
Code 4. 單一方法調(diào)用鏈
dl class="accordion" id="my-accordion"
dt第1部分/dt
dd內(nèi)容一/dd
dt第2部分/dt
dd內(nèi)容二/dd
dt第3部分/dt
dd內(nèi)容三/dd
dt第4部分/dt
dd內(nèi)容四/dd
/dl
Code 4 中定義的列表也有一個(gè)分配給它的名為 accordion 的 CSS 類。沒(méi)有應(yīng)用任何 CSS，這個(gè) accordion 結(jié)構(gòu)看起來(lái)類似于圖 1 中的基礎(chǔ)設(shè)計(jì)
為了美觀，我們?cè)俳oCode 4中的Html美化一下，并命名為“jquery.accordion.css”
Code 5. CSS部分
.accordion {
width: 500px;
border: 1px solid #ccc;
border-bottom: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.accordion dt,
.accordion dd {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.accordion dt {
background: #eaeaea;
cursor: pointer;
padding: 8px 4px;
font-size: 13px;
font-weight: bold;
}
.accordion dd {
padding: 12px 8px;
}
效果如下圖：
自定義插件
要制作一個(gè)功能性 accordion，必須將自定義代碼應(yīng)用到您上一小節(jié)創(chuàng)建 jQuery 插件的函數(shù)。accordion
插件從遍歷所有已定義的 accordion 開(kāi)始。要定義一個(gè) accordion，在 HTML 文檔或外部嵌入式 JavaScript
文件中使用下列 jQuery。
$('dl#my-accordion').accordion();
對(duì)于每個(gè) Accordion，您可以使用 jQuery 的 children 方法訪問(wèn)相關(guān)定義的標(biāo)題，返回一個(gè)數(shù)組或 dt 元素。應(yīng)用一個(gè)
click 事件到 dt 元素，然后一個(gè)名為 reset 方法應(yīng)用到每個(gè) dt。accordion 首次加載時(shí)，該 reset 方法會(huì)折疊所有
dd 元素。單擊 dt 元素或者標(biāo)題欄時(shí)，click 事件會(huì)觸發(fā)一個(gè)名為 onClick 的自定義方法。自定義 onClick 方法用于查找
accordion 中的所有 dt 元素。它調(diào)用一個(gè)自定義 hide 方法，該方法通過(guò)使用 next 方法找到緊挨著 dt 元素的 dd
元素，隱藏每個(gè)相關(guān)的 dd 元素，通過(guò)使用 next 方法找到緊挨著 dt 元素的 dd 元素，然后向上滑動(dòng)激活它。
所有 dd 元素被隱藏后，使用 slideDown 方法，就可以看見(jiàn)與單擊過(guò)的 dt 元素相關(guān)的 dd 元素，并創(chuàng)建一個(gè)放大和收縮動(dòng)畫，如清單 8
所示。onClick 方法的最后一行代碼是 return false，確保任何被點(diǎn)擊的主題欄沒(méi)有顯現(xiàn)出其一般行為。例如，如果您使用一個(gè)
anchor 元素作為標(biāo)題欄，您可能想要執(zhí)行 return false，這樣就不會(huì)將用戶定向到另一個(gè)頁(yè)面或現(xiàn)有頁(yè)面的一部分。
Code 6. 自定義用于創(chuàng)建一個(gè) jQuery 插件的 accordion 函數(shù)
(function($) {
$.fn.accordion = function(options) {
return this.each(function() {
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
});
function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
}
function hide() {
$(this).next().slideUp('fast');
}
function reset() {
$(this).next().hide();
}
}
})(jQuery);
如果該 accordion 插件與一個(gè) HTML 定義列表結(jié)構(gòu)相關(guān)聯(lián)時(shí)，比如您之前創(chuàng)建的那個(gè) accordion 函數(shù)將被應(yīng)用。有了
accordion 函數(shù)，單擊一個(gè)標(biāo)題欄或 dt 元素時(shí)，會(huì)打開(kāi)其內(nèi)容區(qū)域，而其他內(nèi)容區(qū)域則關(guān)閉。換句話說(shuō)，一次只能打開(kāi)一個(gè)內(nèi)容區(qū)域。
設(shè)定插件的默認(rèn)值（Defaults）和設(shè)置項(xiàng)（options）
jQuery 插件可以包括 defaults 和 options。Options 本質(zhì)上就是傳遞給插件的參數(shù)。可以使用 options
發(fā)送一個(gè)參數(shù)作為 object literal，這是一個(gè)標(biāo)準(zhǔn) jQuery 實(shí)踐，而不需要傳遞多個(gè)參數(shù)。如果您的插件支持 options，使用
defaults 對(duì)象設(shè)置默認(rèn)的 options 將是一個(gè)最佳方式。和 options 一樣，defaults 是一個(gè) object
literal，應(yīng)該包括您想要傳遞到插件中的屬性。
例如，如果您支持一個(gè)可用于在首次加載時(shí)打開(kāi) accordion 第一個(gè)內(nèi)容區(qū)域的屬性，那么在您的插件中應(yīng)該包括一個(gè) open
屬性的默認(rèn)值。在您的插件中使用 defaults 確定默認(rèn)函數(shù)，使用 options 覆蓋默認(rèn)值。如果插件接收 options，可以使用
$.extend 方法執(zhí)行覆蓋。jQuery 的 $.extend 方法合并兩個(gè)或多個(gè)對(duì)象。Code 7 中的示例顯示在一個(gè)自定義 jQuery
插件中使用 $.extend 方法合并用戶定義選項(xiàng)和默認(rèn)選項(xiàng)的一般實(shí)現(xiàn)。
Code 7. 向一個(gè)自定義的 accordion jQuery 插件添加 options 和 defaults
(function($) {
$.fn.accordion = function(options) {
var settings = $.extend({}, {open: false}, options);
return this.each(function() {
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
if(settings.open) $(this).children('dt:first-child').next().show();
});
function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
}
function hide() {
$(this).next().slideUp('fast');
}
function reset() {
$(this).next().hide();
}
}
})(jQuery);
$.extend 方法參數(shù)是一個(gè)目標(biāo)對(duì)象和 2 個(gè)或多個(gè)合并對(duì)象。在本示例中，目標(biāo)對(duì)象是一個(gè)空 object
literal，充當(dāng)合并對(duì)象容器。目標(biāo)將成為一個(gè)包含合并對(duì)象值的單一對(duì)象（在該案例中是 settings 變量）。第 2
個(gè)參數(shù)是一個(gè)包含默認(rèn)插件屬性的 object literal。第 3 個(gè)參數(shù)是用戶定義的 options 參數(shù)。要在一個(gè) HTML 元素上使用
accordion 插件傳遞 options，需要知道除了之前您作為 object literal 傳遞的屬性外還有哪些屬性，如下所示。
$('dl#my-accordion').accordion({open:true});
在Code 7 示例中，傳遞到插件的 options 通過(guò) $.extend 方法覆蓋 defaults。如果沒(méi)有傳遞 options，則使用默認(rèn)值。對(duì)于示例插件，可使用 open 屬性確定加載時(shí)是否打開(kāi)第一個(gè)內(nèi)容區(qū)域。
可重用性
您可以在任何 HTML 文檔中重用示例 accordion 插件，可以在單個(gè) HTML 文檔中多次使用。您也可以包括多個(gè)
accordion 結(jié)構(gòu)，就像已創(chuàng)建的那個(gè) accordion，使用剛創(chuàng)建的新 accordion 插件通過(guò) jQuery 將每個(gè)單獨(dú)定義為
accordion。要向一個(gè) HTML 文檔添加多個(gè) accordion，只需要添加盡可能多的 accordion 結(jié)構(gòu)。Code 8
中的代碼包括兩個(gè) accordion 結(jié)構(gòu)，由一個(gè)段落隔開(kāi)。
Code 8. 在同一個(gè) HTML 文檔中使用多個(gè) accordion
dl class="accordion" id="my-accordion"
dt第1部分/dt
dd內(nèi)容一/dd
dt第2部分/dt
dd內(nèi)容二/dd
dt第3部分/dt
dd內(nèi)容三/dd
dt第4部分/dt
dd內(nèi)容四/dd
/dl
dl class="accordion" id="my-accordion"
dt第5部分/dt
dd內(nèi)容五d
dt第6部分/dt
dd內(nèi)容六dd
dt第7部分/dt
dd內(nèi)容七/dd
/dl
Code 8 中的兩個(gè) accordion 結(jié)構(gòu)幾乎一樣，除了內(nèi)容不一樣外，更重要的是 ID 值也不一樣。第一個(gè)結(jié)構(gòu)包含一個(gè)
my-accordion ID 值。第 2 個(gè)結(jié)構(gòu)包含一個(gè) my-accordion2 ID 值?，F(xiàn)在可以單獨(dú)定向這些結(jié)構(gòu)。例如，下列
jQuery 腳本使用已創(chuàng)建的新插件將每個(gè) accordion 結(jié)構(gòu)定義為一個(gè) accordion。
$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});
兩個(gè) accordion 結(jié)構(gòu)定義完成后，第一個(gè)面板默認(rèn)設(shè)置為打開(kāi)下圖 顯示一個(gè)用在同一個(gè) HTML 文檔的多個(gè) accordion 插件的示例。
jQuery插件 要使用它的話 通常插件中都有demo或者api可以查閱\x0d\x0a通常jQuery插件為了減小體積 會(huì)發(fā)布兩個(gè)版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一個(gè)可用的demo(沒(méi)有demo就自己寫一個(gè)),然后用webkit內(nèi)核或firefox進(jìn)行斷點(diǎn)查看,這主要是為了找插件入口點(diǎn),當(dāng)然 你也可以直接查看js代碼 這需要一定的底子\x0d\x0a最后 就是慢慢查看他的代碼的實(shí)現(xiàn)功能了,先得看懂他是怎么實(shí)現(xiàn)的,然后你才會(huì)知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也寫的不少 像 模擬alert/confirm/prompt 錯(cuò)誤信息提示框 模擬彈出窗體 無(wú)縫marquee滾動(dòng) 分頁(yè)控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架寫法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\(yùn)x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的兩種寫法的調(diào)用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()進(jìn)行調(diào)用的\x0d\x0a\x0d\x0a還有一種寫法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a這種寫法是的調(diào)用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二種寫法是js的面向?qū)ο缶幊?得自己慢慢的理解哈
編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開(kāi)發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫jQuery插件
類型
jQuery的插件主要分為3種類型
1、封裝對(duì)象方法
這種插件是將對(duì)象方法封裝起來(lái)，用于對(duì)通過(guò)選擇器獲取的jQuery對(duì)象進(jìn)行操作，是最常見(jiàn)的一種插件。此類插件可以發(fā)揮出jQuery選擇器的強(qiáng)大優(yōu)勢(shì)，有相當(dāng)一部分的jQuery的方法，都是在jQuery腳本庫(kù)內(nèi)部通過(guò)這種形式“插”在內(nèi)核上的，例如：parent()方法、appendTo()方法等。這些方法在現(xiàn)在來(lái)看都是jQuery本身自帶的方法了。平時(shí)，我們是可以直接拿來(lái)就用的，只需引入jQuery庫(kù)就行
2、封裝全局函數(shù)
可以將獨(dú)立的函數(shù)加到j(luò)Query命名空間下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的
3、選擇器插件
雖然jQuery的選擇器十分強(qiáng)大，但是在少數(shù)情況下，還是會(huì)需要用到選擇器插件來(lái)擴(kuò)充一些自己喜歡的選擇器
要點(diǎn)
1、jQuery插件的文件名推薦命名為jQuery.[插件名].js，以免和其他JS庫(kù)插件混淆
2、所有的對(duì)象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上
3、在插件內(nèi)部的this指向的是當(dāng)前通過(guò)選擇器獲取的jQuery對(duì)象，而不像一般方法那樣，如click，內(nèi)部的this指向的是DOM元素
4、可以通過(guò)this.each來(lái)遍歷所有的元素
5、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾。否則壓縮的時(shí)候可能出現(xiàn)問(wèn)題。為了穩(wěn)妥些，甚至可以在插件頭部先加上一個(gè)分號(hào)，以免他人不規(guī)范的代碼影響自身的插件代碼
6、插件應(yīng)該返回一個(gè)jQuery對(duì)象，以保證插件的可鏈?zhǔn)讲僮?/p>
7、避免在插件內(nèi)部使用$作為jQuery對(duì)象的別名，而應(yīng)使用完整的jQuery來(lái)表示，避免沖突。當(dāng)然，也可以利用閉包來(lái)回避這種問(wèn)題，使插件內(nèi)部繼續(xù)使用$作為jQuery的別名
閉包
利用閉包的特性，即可以避免內(nèi)部臨時(shí)變量影響全局空間，又可以在插件內(nèi)容繼續(xù)使用$作為jQuery的別名。常見(jiàn)的jQuery插件都是以下這種形式的:
(function(){
/*這里放置代碼*/
})();
首先定義一個(gè)匿名函數(shù)function(){/*這里放置代碼*/}，然后用括號(hào)括起來(lái)，變成(function(){/*這里放置代碼*/})這種形式，最后通過(guò)()這個(gè)運(yùn)算符來(lái)執(zhí)行?？梢詡鬟f參數(shù)進(jìn)行，以供內(nèi)部函數(shù)使用
//為了更好的兼容性，開(kāi)始前有個(gè)分號(hào)
;(function($){??? //此處將$作為匿名函數(shù)的形參
/*這里放置代碼，可以使用$作為jQuery的縮寫別名*/
})(jQuery);????? //這里就將jQuery作為實(shí)參傳遞給匿名函數(shù)了
上面的代碼是一種常見(jiàn)的jQuery插件的結(jié)構(gòu)
插件機(jī)制
jQuery提供了兩個(gè)用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封裝對(duì)象方法的插件，jQuery.extend()方法用于拓展封裝全局函數(shù)的插件和選擇器插件。這兩個(gè)方法都接受一個(gè)參數(shù)，類型為Object。Object對(duì)象的"名/值對(duì)"分別代表"函數(shù)或方法名/函數(shù)主體"
【jQuery.fn.extend()】
jQuery.fn.extend()方法用于將一個(gè)對(duì)象的內(nèi)容合并到j(luò)Query的原型，以提供新的jQuery實(shí)例方法
labelinput type="checkbox" name="foo" Foo/label
labelinput type="checkbox" name="bar" Bar/label
button id="btn1"全選/button
button id="btn2"全不選/button
script
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$('#btn1').click(function(){
$( "input[type='checkbox']" ).check();
});
$('#btn2').click(function(){
$( "input[type='checkbox']" ).uncheck();
});
/script
【jQuery.extend()】
jQuery.extend()方法用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，然后返回被擴(kuò)展的對(duì)象
jQuery.extend( target [, object1 ] [, objectN ] )
例如，合并settings對(duì)象和options對(duì)象，修改并返回settings對(duì)象
var settings = {validate:false,limit:5,name:"foo"};
var options = {validate:true,name:"bar"};
var newOptions = jQuery.extend(settings,options);
console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}
jQuery.extend()方法經(jīng)常被用于設(shè)置插件方法的一系列默認(rèn)參數(shù)
function foo(options){
options=jQuery.extend({
name:"bar",
length:5,
dataType:"xml"
},options);
如果用戶調(diào)用foo()方法的時(shí)候，在傳遞的參數(shù)options對(duì)象設(shè)置了相應(yīng)的值，那么就使用設(shè)置的值，否則使用默認(rèn)值
通過(guò)使用jQuery.extend()方法，可以很方便地用傳入的參數(shù)來(lái)覆蓋默認(rèn)值。此時(shí)，對(duì)方法的調(diào)用依舊保持一致，只不過(guò)要傳入的是一個(gè)映射而不是一個(gè)參數(shù)列表。這種機(jī)制比傳統(tǒng)的每個(gè)參數(shù)都去檢測(cè)的方式不僅靈活而且更加簡(jiǎn)潔。此外使用命名參數(shù)意味著再添加新選項(xiàng)也不會(huì)影響過(guò)去編寫的代碼，從而使開(kāi)發(fā)者使用起來(lái)更加直觀明了
jquery 插件就是一些人用jquery寫的一些工具，常見(jiàn)的是jquery UI和jquery easyui,我們?cè)谡{(diào)用時(shí)只需要用很少的代碼就能實(shí)現(xiàn)很好的效果。
如easyui的datagrid、combobox、tree等可以實(shí)現(xiàn)表格、下拉框、樹(shù)等形狀及需要的操作。
附：easyui官網(wǎng)
可以在網(wǎng)站里面下載demo、觀看一些特效、下載插件js等。
jQuery插件開(kāi)發(fā)全解析 jQuery插件的開(kāi)發(fā)包括兩種：
一種是類級(jí)別的插件開(kāi)發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery 的全局函數(shù)就是屬于jQuery命名空間的函數(shù)。
另一種是對(duì)象級(jí)別的插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法。
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1.?jQuery.extend()?方法有一個(gè)重載。
?jQuery.extend(object)?,一個(gè)參數(shù)的用于擴(kuò)展jQuery類本身，也就是用來(lái)在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的?ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點(diǎn)像?“類名.方法名”?靜態(tài)方法的調(diào)用方式。下面我們也來(lái)寫個(gè)jQuery.extend(object)的例子：
//擴(kuò)展jQuery對(duì)象本身
jQuery.extend(｛
"minValue":?function?(a,?b)?｛
///《summary
///?比較兩個(gè)值，返回最小值
///《/summary
return?a?《?b???a?:?b;
},
"maxValue":?function?(a,?b)?｛
///《summary
///?比較兩個(gè)值，返回最大值
///《/summary
return?a??b???a?:?b;
}
});
//調(diào)用
var?i?=?100;?j?=?101;
var?min_v?=?$.minValue(i,?j);?//?min_v?等于?100
var?max_v?=?$.maxValue(i,?j);?//?max_v?等于?101
重載版本：jQuery.extend([deep],?target,?object1,?[objectN])
用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。
如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。
如果第一個(gè)參數(shù)設(shè)置為true，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對(duì)象。否則的話，副本會(huì)與原對(duì)象共享結(jié)構(gòu)。
未定義的屬性將不會(huì)被復(fù)制，然而從對(duì)象的原型繼承的屬性將會(huì)被復(fù)制。
參數(shù)
deep:???????可選。如果設(shè)為true，則遞歸合并。
target:?????待修改對(duì)象。
object1:???待合并到第一個(gè)對(duì)象的對(duì)象。
objectN:???可選。待合并到第一個(gè)對(duì)象的對(duì)象。
示例1：
合并?settings?和?options，修改并返回?settings。
var?settings?=?｛?validate:?false,?limit:?5,?name:?"foo"?};
var?options?=?｛?validate:?true,?name:?"bar"?};
jQuery.extend(settings,?options);
結(jié)果：
settings?==?｛?validate:?true,?limit:?5,?name:?"bar"?}
示例2：
合并?defaults?和?options,?不修改?defaults。
var?empty?=?｛};
var?defaults?=?｛?validate:?false,?limit:?5,?name:?"foo"?};
var?options?=?｛?validate:?true,?name:?"bar"?};
var?settings?=?jQuery.extend(empty,?defaults,?options);
結(jié)果：
settings?==?｛?validate:?true,?limit:?5,?name:?"bar"?}
empty?==?｛?validate:?true,?limit:?5,?name:?"bar"?}
這個(gè)重載的方法，我們一般用來(lái)在編寫插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)。
jQuery.fn.extend(object)擴(kuò)展?jQuery?元素集來(lái)提供新的方法（通常用來(lái)制作插件）。
首先我們來(lái)看fn?是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn?=?jQuery.prototype?=?｛
init:?function(?selector,?context?)?｛.....};
};
原來(lái)?jQuery.fn?=?jQuery.prototype，也就是jQuery對(duì)象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對(duì)象的原型方法。我?們知道擴(kuò)展原型上的方法，就相當(dāng)于為對(duì)象添加”成員方法“，類的”成員方法“要類的對(duì)象才能調(diào)用，所以使用?jQuery.fn.extend(object)擴(kuò)展的方法，?jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一?定要區(qū)分開(kāi)來(lái)。
jQuery 如何寫插件 -
jQuery插件的開(kāi)發(fā)包括兩種：
一種是類級(jí)別的插件開(kāi)發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，另一種是對(duì)象級(jí)別的插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法。下面就兩種函數(shù)的開(kāi)發(fā)做詳細(xì)的說(shuō)明。
1、類級(jí)別的插件開(kāi)發(fā)
類級(jí)別的插件開(kāi)發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開(kāi)發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：
1.1
添加一個(gè)新的全局函數(shù)
添加一個(gè)全局函數(shù)，我們只需如下定義：
jQuery.foo =
function() {
alert('This is a test. This is only a
test.');
};
1.2
增加多個(gè)全局函數(shù)
添加多個(gè)全局函數(shù)，可采用如下定義：
Java代碼 收藏代碼
jQuery.foo = function() {
alert('This is a test. This is
only a test.');
};
jQuery.bar =
function(param) {
alert('This function takes a
parameter, which is "' + param + '".');
};
調(diào)用時(shí)和一個(gè)函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3
使用jQuery.extend(object);
jQuery.extend({
foo:
function() {
alert('This is a test. This is
only a test.');
},
bar: function(param)
{
alert('This function takes a
parameter, which is "' + param +'".');
}
});
1.4
使用命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他jQuery插件沖突，因此我們習(xí)慣將一些方法封裝到另一個(gè)自定義的命名空間。
jQuery.myPlugin =
{
foo:function()
{
alert('This is a test. This is only a
test.');
},
bar:function(param)
{
alert('This function takes a parameter, which is "' + param +
'".');
}
};
采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時(shí)采用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');
通過(guò)這個(gè)技巧（使用獨(dú)立的插件名），我們可以避免命名空間內(nèi)函數(shù)的沖突。
2、對(duì)象級(jí)別的插件開(kāi)發(fā)
對(duì)象級(jí)別的插件開(kāi)發(fā)需要如下的兩種形式：、
形式1：
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes
here.
}
})
})(jQuery);
形式2：
(function($)
{
$.fn.pluginName = function()
{
// Our plugin implementation code goes here.
};
})(jQuery);
上面定義了一個(gè)jQuery函數(shù),形參是$，函數(shù)定義完成之后,把jQuery這個(gè)實(shí)參傳遞進(jìn)去.立即調(diào)用執(zhí)行。這樣的好處是,我們?cè)趯慾Query插件時(shí),也可以使用$這個(gè)別名,而不會(huì)與prototype引起沖突.
2.1
在JQuery名稱空間下申明一個(gè)名字
這是一個(gè)單一插件的腳本。如果你的腳本中包含多個(gè)插件，或者互逆的插件（例如：
$.fn.doSomething() 和
$.fn.undoSomething()），那么你需要聲明多個(gè)函數(shù)名字。但是，通常當(dāng)我們編寫一個(gè)插件時(shí)，力求僅使用一個(gè)名字來(lái)包含它的所有內(nèi)容。我們的示例插件命名為“highlight“
$.fn.hilight
= function() {
// Our plugin implementation
code goes
here.
};
我們的插件通過(guò)這樣被調(diào)用：
$('#myDiv').hilight();
但是如果我們需要分解我們的實(shí)現(xiàn)代碼為多個(gè)函數(shù)該怎么辦？有很多原因：設(shè)計(jì)上的需要；這樣做更容易或更易讀的實(shí)現(xiàn)；而且這樣更符合面向?qū)ο?。這真是一個(gè)麻煩事，把功能實(shí)現(xiàn)分解成多個(gè)函數(shù)而不增加多余的命名空間。出于認(rèn)識(shí)到和利用函數(shù)是javascript中最基本的類對(duì)象，我們可以這樣做。就像其他對(duì)象一樣，函數(shù)可以被指定為屬性。因此我們已經(jīng)聲明“hilight”為jQuery的屬性對(duì)象，任何其他的屬性或者函數(shù)我們需要暴露出來(lái)的，都可以在"hilight"
函數(shù)中被聲明屬性。稍后繼續(xù)。
2.2
接受options參數(shù)以控制插件的行為
讓我們?yōu)槲覀兊牟寮砑庸δ苤付ㄇ熬吧捅尘吧墓δ?。我們也許會(huì)讓選項(xiàng)像一個(gè)options對(duì)象傳遞給插件函數(shù)。例如：
// plugin definition
$.fn.hilight =
function(options) {
var defaults = {
foreground:
'red',
background:
'yellow'
};
//
Extend our default options with those provided.
var
opts = $.extend(defaults, options);
// Our
plugin implementation code goes here.
};
我們的插件可以這樣被調(diào)用：
$('#myDiv').hilight({
foreground: 'blue'
});
2.3
暴露插件的默認(rèn)設(shè)置
我們應(yīng)該對(duì)上面代碼的一種改進(jìn)是暴露插件的默認(rèn)設(shè)置。這對(duì)于讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來(lái)我們開(kāi)始利用函數(shù)對(duì)象。
//
plugin definition
$.fn.hilight =
function(options) {
// Extend our default options with those
provided.
// Note that the first arg to extend is an
empty object -
// this is to keep from overriding our
"defaults" object.
var opts = $.extend({},
$.fn.hilight.defaults, options);
// Our
plugin implementation code goes here.
};
// plugin
defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
現(xiàn)在使用者可以包含像這樣的一行在他們的腳本里：
//這個(gè)只需要調(diào)用一次，且不一定要在ready塊中調(diào)用
$.fn.hilight.defaults.foreground
=
'blue';
接下來(lái)我們可以像這樣使用插件的方法，結(jié)果它設(shè)置藍(lán)色的前景色：
$('#myDiv').hilight();
如你所見(jiàn)，我們?cè)试S使用者寫一行代碼在插件的默認(rèn)前景色。而且使用者仍然在需要的時(shí)候可以有選擇的覆蓋這些新的默認(rèn)值：
//
覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
//
使用一個(gè)新的缺省設(shè)置調(diào)用插件
$('.hilightDiv').hilight();
// ...
//
通過(guò)傳遞配置參數(shù)給插件方法來(lái)覆蓋缺省設(shè)置
$('#green').hilight({
foreground:
'green'
});
重慶分公司
重慶分公司
