JQuery庫，妳可能會發現妳經常為壹些常用的函數重寫相同的代碼。如果是這樣，這可能是您需要編寫自定義jQuery插件的壹個原因。
jQuery插件允許您使用自定義代碼擴展jQuery庫；妳可以使用插件來完成壹些重復性的功能。例如，許多插件可用於幻燈片、下拉菜單和折疊菜單。如果您搜索jQuery插件，您會發現大量可以在您自己的項目中使用的示例(查看它們是如何構建的)。
準備工作/即將開始工作
對JavaScript，jQuery，CSS有基本的了解。(使用的源代碼和示例在本文底部)
開始
JQuery是壹個可擴展的JavaScript語言庫。當您創建壹個jQuery插件時，您實際上是在擴展這個jQuery。
Ku。要真正理解插件如何擴展jQuery庫，您需要對JavaScript原型屬性有壹個基本的了解。雖然沒有直接使用，但是
JavaScript prototype屬性可以通過jQuery屬性fn在後臺使用，它是壹個原生的JavaScript原型。
屬性的jQuery別名。
要使用fn屬性創建壹個新的jQuery插件，只需為fn屬性分配壹個插件名，並將其指向壹個充當構造函數的新函數，類似於pure。
JavaScript .代碼1展示了如何使用jQuery對象和來定義壹個名為accordion的新jQuery插件。
屬性，並將其賦給壹個新的構造函數。
代碼1:定義壹個名為accordion的新jQuery插件。
jquery . fn . accordion = function(){
//在此添加插件代碼
};
代碼1展示了壹種創建jQuery插件的方法；本例中沒有功能錯誤。但是，創建壹個jQuery。
插件的推薦方法是首先創建壹個允許使用美元符號($)的包裝函數。默認情況下，美元符號可能與其他JavaScript不同。
框架沖突。如果插件被包裝在壹個函數中，就不會有沖突。代碼2中的示例代碼展示了如何將包裝器函數應用於jQuery。
在插件定義中。
(函數($) {
$.fn.accordion = function() {
//在此添加插件代碼
};
})(jQuery)；
在代碼2中，jQuery關鍵字應用於包裝器函數，這允許您在插件中使用美元符號，就像使用fn壹樣。
財產之類的。壹旦包裝器函數準備好了，就可以在插件的任何地方使用美元符號來代替jQuery。
關鍵詞，不會幹擾其他第三方插件。這個選項為我們在開發整個插件時編寫更少的代碼提供了壹種方法，並幫助您的插件代碼保持整潔和易於維護。
保持可鏈接性
jQuery的壹個優點是它允許您使用任何類型的選擇器。但是，必須記住，您的插件可以處理幾種不同的元素類型。用這個
關鍵字允許您的插件應用於相關的函數，並且對每個元素的訪問都可以通過循環來實現，而不管元素類型如何。如果在每個循環之前使用return
關鍵字，您可以使用您的插件來維護可鏈接性。清單3展示了分配給函數處理程序的每個循環以及return關鍵字。
代碼3。在每個循環之前使用return關鍵字。
(函數($) {
$.fn.accordion = function() {
return this.each(function() {
//使用回車
});
};
})(jQuery)；
使用代碼3的代碼，可以在方法調用鏈中使用示例accordion插件。具有可鏈接性(另壹個強大的jQuery
特性)，您的插件可以在方法調用鏈中使用。例如，下面的代碼顯示了如何在單個方法調用鏈中淡出HTML元素並將其從文檔對象模型(DOM)中移除。
從中刪除。
$("#my-div ")。淡出()。移除()；
制作壹架手風琴
典型的級聯設計包括標題欄和相關的內容區域。定義列表是手風琴的壹個很好的HTML結構；dt元素用於標題，而dd元素用於內容區域。清單4中的HTML結構是壹個定義列表，有四個標題和相應的內容區域。
代碼4。單壹方法調用鏈
& ltdl class = " accordion " id = " my-accordion " >
& ltdt & gt零件1 < /dt >
& ltdd & gt內容1
& ltdt & gt第二部分
& ltdd & gt內容2
& ltdt & gt第三部分
& ltdd & gt內容3
& ltdt & gt第四部分
& ltdd & gt內容4
& lt/dl & gt；
代碼4中定義的列表還有壹個名為accordion的CSS類。在沒有任何CSS的情況下，這個手風琴式的結構看起來類似於圖1中的基本設計。
為了美觀，我們把代碼4中的Html美化壹下，命名為“jquery.accordion.css”。
代碼5。CSS部分
。手風琴
寬度:500px
邊框:1px實心# ccc
邊框-底部:無；
字體系列:Arial，Helvetica，無襯線；
font-size:12px；
}
。手風琴dt，
。手風琴dd {
border-bottom:1px solid # CCC；
邊距:0px
}
。手風琴式dt {
背景:# eaeaea
光標:指針；
填充:8px 4px
font-size:13px；
字體粗細:粗體；
}
。手風琴dd {
填充:12px 8px；
}
效果如下:
自定義插件
要創建壹個功能性的accordion，您必須將定制代碼應用於您在上壹節中創建的jQuery插件的功能。手風琴
插件從遍歷所有已定義的accordion開始。要定義壹個協定，可以在HTML文檔中或外部嵌入JavaScript。
文件中使用了以下jQuery。
$('dl#my-accordion ')。手風琴()；
對於每個Accordion，您可以使用jQuery的children方法來訪問相關定義的標題，並返回壹個數組或dt元素。應用
單擊dt元素的事件，然後將名為reset的方法應用於每個dt。當第壹次加載accordion時，此重置方法折疊所有
Dd元素。當您單擊dt元素或標題欄時，click事件會觸發壹個名為onClick的自定義方法。自定義onClick方法用於查找
手風琴中的所有dt元素。它調用壹個自定義的hide方法，該方法使用next方法查找dt元素旁邊的dd。
元素，隱藏每個相關的dd元素，通過使用next方法找到dt元素旁邊的dd元素，然後向上滑動激活它。
在隱藏了所有的dd元素之後，您可以通過使用slideDown方法看到與所單擊的dt元素相關的dd元素，並創建壹個放大和縮小動畫，如清單8所示。
如圖。onClick方法的最後壹行是return false，它確保任何被點擊的主題欄都不會顯示它的壹般行為。例如，如果您使用
使用錨元素作為標題欄，您可能希望返回false，這樣用戶就不會被定向到另壹個頁面或現有頁面的壹部分。
代碼6。定制用於創建jQuery插件的accordion函數。
(函數($) {
$.fn.accordion =功能(選項){
return this.each(function() {
var dts = $(this)。孩子(' dt ')；
dts . click(onClick)；
dts.each(重置)；
});
函數onClick() {
$(這個)。兄弟姐妹(' dt ')。每個(隱藏)；
$(這個)。下壹個()。向下滑動(“快速”)；
返回false
}
函數hide() {
$(這個)。下壹個()。slideUp(“快速”)；
}
功能重置(){
$(這個)。下壹個()。hide()；
}
}
})(jQuery)；
如果accordion插件與壹個HTML定義列表結構相關聯，比如您之前創建的accordion函數，它將被應用。有
Accordion函數，當妳點擊壹個標題欄或dt元素時，它的內容區域會被打開，而其他內容區域會被關閉。換句話說，壹次只能打開壹個內容區域。
設置插件的默認值和選項。
JQuery插件可以包含默認值和選項。選項本質上是傳遞給插件的參數。您可以使用選項。
將參數作為對象文字發送是標準的jQuery實踐，不需要傳遞多個參數。如果您的插件支持選項，請使用
這是為defaults對象設置默認選項的最佳方式。與選項壹樣，默認值也是壹個對象。
文字，它應該包括您想要傳遞到插件中的屬性。
例如，如果您支持壹個可用於在accordion首次加載時打開其第壹個內容區域的屬性，那麽您應該在插件中包含壹個open。
屬性的默認值。使用默認值來確定插件中的默認函數，並使用選項來覆蓋默認值。如果插件收到選項，您可以使用。
的美元。extend方法執行覆蓋。的美元。jQuery的extend方法合並兩個或多個對象。代碼7中的示例顯示在壹個自定義jQuery中。
使用$合並用戶定義的選項和默認選項的壹般實現。插件中的擴展方法。
代碼7。向自定義accordion jQuery插件添加選項和默認值。
(函數($) {
$.fn.accordion =功能(選項){
var設置= $。extend({}，{open: false}，options)；
return this.each(function() {
var dts = $(this)。孩子(' dt ')；
dts . click(onClick)；
dts.each(重置)；
if(settings.open) $(this)。孩子(' dt:第壹個孩子')。下壹個()。show()；
});
函數onClick() {
$(這個)。兄弟姐妹(' dt ')。每個(隱藏)；
$(這個)。下壹個()。向下滑動(“快速”)；
返回false
}
函數hide() {
$(這個)。下壹個()。slideUp(“快速”)；
}
功能重置(){
$(這個)。下壹個()。hide()；
}
}
})(jQuery)；
的美元。擴展方法參數是壹個目標對象和兩個或多個合並對象。在本例中，目標對象是壹個空對象。
Literal，它充當合並對象的容器。目標將成為包含合並對象值的單個對象(在本例中為設置變量)。第二
該參數是壹個包含默認插件屬性的對象文字。第三個參數是用戶定義的選項參數。在HTML元素上使用
當accordion插件傳遞選項時，您需要知道作為對象文字傳遞的其他屬性，如下所示。
$('dl#my-accordion ')。手風琴({ open:true })；
在代碼7的例子中，傳遞給插件的選項通過$覆蓋了默認值。擴展方法。如果沒有傳遞options，則使用默認值。對於示例插件，您可以使用open屬性來確定在加載時是否打開第壹個內容區域。
復用性
您可以在任何HTML文檔中重用示例accordion插件，並且可以在單個HTML文檔中多次使用它。您也可以包含多個。
accordion結構就像已經創建的accordion壹樣，使用剛剛創建的新accordion插件將每個人定義為。
手風琴.要在壹個HTML文檔中添加多個手風琴，只需添加盡可能多的手風琴結構。代碼8
中的代碼包括由壹個段落分隔的兩個折疊結構。
代碼8。在同壹個HTML文檔中使用多個折疊項。
& ltdl class = " accordion " id = " my-accordion " >
& ltdt & gt零件1 < /dt >
& ltdd & gt內容1
& ltdt & gt第二部分
& ltdd & gt內容2
& ltdt & gt第三部分
& ltdd & gt內容3
& ltdt & gt第四部分
& ltdd & gt內容4
& lt/dl & gt；
& ltdl class = " accordion " id = " my-accordion " >
& ltdt & gt第五部分
& ltdd & gt內容5d & gt；
& ltdt & gt第六部分
& ltdd & gt內容6dd & gt；
& ltdt & gt第七部分
& ltdd & gt內容7/DD & gt；
& lt/dl & gt；
代碼8中的兩個accordion結構幾乎相同，只是內容不同，更重要的是ID值不同。第壹個結構包含壹個
我的手風琴ID值。第二個結構包含壹個my-accordion2 ID值。這些結構現在可以單獨定向。例如，以下內容
jQuery腳本使用新創建的插件將每個accordion結構定義為accordion。
$('dl#my-accordion ')。手風琴({ open:true })；
$('dl#my-accordion2 ')。手風琴({ open:true })；
定義兩個折疊結構後，第壹個面板被設置為默認打開。下圖顯示了在同壹個HTML文檔中使用的多個accordion插件的示例。