如何創(chuàng)建一個自定義jquery插件

jQuery 庫是專為加快 JavaScript 開發(fā)速度而設計的。通過簡化編寫 JavaScript 的方式，減少代碼量。使用

10年積累的成都做網(wǎng)站、成都網(wǎng)站建設、成都外貿網(wǎng)站建設經驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先制作網(wǎng)站后付款的網(wǎng)站建設流程，更有謝通門免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

jQuery 庫時，您可能會發(fā)現(xiàn)您經常為一些常用函數(shù)重寫相同的代碼。如果這樣的話，這可能就是您需要編寫自定義 jQuery 插件的一個原因。

jQuery 插件允許您使用自定義代碼擴展 jQuery 庫；您可以對一些重復性函數(shù)使用插件。例如，很多插件可供幻燈片、下拉菜單和折疊菜單所用。如果您搜索 jQuery 插件，就會發(fā)現(xiàn)有大量可用于自己項目的示例（看看它們是如何構建的）。

準備工作

對JavaScript、jQuery 和CSS有一個基本了解。（用到的源代碼及示例在本文最下方）

開始

jQuery 是一個可擴展 JavaScript 語言的庫。當您創(chuàng)建一個 jQuery 插件時，本質上是在擴展這個 jQuery

庫。要真正了解插件如何擴展 jQuery 庫需要對 JavaScript prototype 屬性有一個基本了解。盡管不直接使用，但是

JavaScript prototype 屬性可通過 jQuery 屬性 fn 在后臺使用，這是原生 JavaScript prototype

屬性的一個 jQuery 別名。

要使用 fn 屬性創(chuàng)建一個新 jQuery 插件，只需要為 fn 屬性分配一個插件名，并將其指向一個充當構造函數(shù)的新函數(shù)，類似于純

JavaScript。Code 1顯示了如何定義一個名為 accordion 的新 jQuery 插件，其方法是通過使用 jQuery 對象和

fn 屬性，并將其分配給一個新的構造函數(shù)。

Code 1：定義一個名為 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

// 在這里添加插件代碼

};

Code 1 展示了創(chuàng)建 jQuery 插件的一種方法；該示例沒有什么功能性錯誤。但是，創(chuàng)建一個 jQuery

插件所推薦的方法是，先創(chuàng)建一個允許使用美元符號 ($) 的包裝器函數(shù)。在默認情況下，美元符號可能與其他 JavaScript

框架發(fā)生沖突，如果將插件包裝在一個函數(shù)中，就不會出現(xiàn)沖突。Code 2 中的示例代碼顯示如何將一個包裝器函數(shù)應用到一個 jQuery

插件定義中。

(function($) {

$.fn.accordion = function() {

// 在這里添加插件代碼

};

})(jQuery);

在Code 2 中，jQuery 關鍵字被應用到包裝器函數(shù)中，這允許您在插件中使用美元符號，就像使用 fn

屬性時那樣。包裝器函數(shù)就緒后，就可以在整個插件的任何地方使用美元符號代替 jQuery

關鍵字，不會干擾其他第三方插件。該選項提供了一種方法使我們可以在開發(fā)整個插件中編寫較少的代碼，并且有助于您的插件代碼保持整潔，易于維護。

維護鏈接性

jQuery 的一個優(yōu)勢是允許您使用任何類型的選擇器。但是，必須記住，您的插件可以處理幾種不同的元素類型。使用 this

關鍵字允許您的插件應用于相關函數(shù)，通過循環(huán)實現(xiàn)每個元素的訪問，而不考慮元素類型。如果在 each 循環(huán)前使用 return

關鍵字，就可以使用您的插件維護鏈接性。清單 3 顯示了分配給一個函數(shù)處理程序且與 return 關鍵字相結合的 each 循環(huán)。

code 3. 在 each 循環(huán)之前使用 return 關鍵字

(function($) {

$.fn.accordion = function() {

return this.each(function() {

// 使用 return

});

};

})(jQuery);

有了Code 3 的代碼后，示例 accordion 插件可用在一個方法調用鏈中。有了鏈接性（另一個強大的 jQuery

特性），您的插件就可用在一個方法調用鏈中。例如，下面的代碼顯示了如何淡出 HTML 元素，并在單一的方法調用鏈中將其從文檔對象模型 (DOM)

中刪除。

$("#my-div").fadeOut().remove();

構造一個 accordion

一個典型的層疊設計包括標題欄和相關內容區(qū)域。定義列表是一個可供 accordions 使用的很好的 HTML 結構；dt 元素供標題所用，而dd 元素供內容區(qū)域所用。清單 4 中的 HTML 結構是一個定義列表，含有四個標題以及相應的內容區(qū)域。

Code 4. 單一方法調用鏈

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd內容一/dd

dt第2部分/dt

dd內容二/dd

dt第3部分/dt

dd內容三/dd

dt第4部分/dt

dd內容四/dd

/dl

Code 4 中定義的列表也有一個分配給它的名為 accordion 的 CSS 類。沒有應用任何 CSS，這個 accordion 結構看起來類似于圖 1 中的基礎設計

為了美觀，我們再給Code 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;

}

效果如下圖：

自定義插件

要制作一個功能性 accordion，必須將自定義代碼應用到您上一小節(jié)創(chuàng)建 jQuery 插件的函數(shù)。accordion

插件從遍歷所有已定義的 accordion 開始。要定義一個 accordion，在 HTML 文檔或外部嵌入式 JavaScript

文件中使用下列 jQuery。

$('dl#my-accordion').accordion();

對于每個 Accordion，您可以使用 jQuery 的 children 方法訪問相關定義的標題，返回一個數(shù)組或 dt 元素。應用一個

click 事件到 dt 元素，然后一個名為 reset 方法應用到每個 dt。accordion 首次加載時，該 reset 方法會折疊所有

dd 元素。單擊 dt 元素或者標題欄時，click 事件會觸發(fā)一個名為 onClick 的自定義方法。自定義 onClick 方法用于查找

accordion 中的所有 dt 元素。它調用一個自定義 hide 方法，該方法通過使用 next 方法找到緊挨著 dt 元素的 dd

元素，隱藏每個相關的 dd 元素，通過使用 next 方法找到緊挨著 dt 元素的 dd 元素，然后向上滑動激活它。

所有 dd 元素被隱藏后，使用 slideDown 方法，就可以看見與單擊過的 dt 元素相關的 dd 元素，并創(chuàng)建一個放大和收縮動畫，如清單 8

所示。onClick 方法的最后一行代碼是 return false，確保任何被點擊的主題欄沒有顯現(xiàn)出其一般行為。例如，如果您使用一個

anchor 元素作為標題欄，您可能想要執(zhí)行 return false，這樣就不會將用戶定向到另一個頁面或現(xiàn)有頁面的一部分。

Code 6. 自定義用于創(chuàng)建一個 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 插件與一個 HTML 定義列表結構相關聯(lián)時，比如您之前創(chuàng)建的那個 accordion 函數(shù)將被應用。有了

accordion 函數(shù)，單擊一個標題欄或 dt 元素時，會打開其內容區(qū)域，而其他內容區(qū)域則關閉。換句話說，一次只能打開一個內容區(qū)域。

設定插件的默認值（Defaults）和設置項（options）

jQuery 插件可以包括 defaults 和 options。Options 本質上就是傳遞給插件的參數(shù)。可以使用 options

發(fā)送一個參數(shù)作為 object literal，這是一個標準 jQuery 實踐，而不需要傳遞多個參數(shù)。如果您的插件支持 options，使用

defaults 對象設置默認的 options 將是一個最佳方式。和 options 一樣，defaults 是一個 object

literal，應該包括您想要傳遞到插件中的屬性。

例如，如果您支持一個可用于在首次加載時打開 accordion 第一個內容區(qū)域的屬性，那么在您的插件中應該包括一個 open

屬性的默認值。在您的插件中使用 defaults 確定默認函數(shù)，使用 options 覆蓋默認值。如果插件接收 options，可以使用

$.extend 方法執(zhí)行覆蓋。jQuery 的 $.extend 方法合并兩個或多個對象。Code 7 中的示例顯示在一個自定義 jQuery

插件中使用 $.extend 方法合并用戶定義選項和默認選項的一般實現(xiàn)。

Code 7. 向一個自定義的 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ù)是一個目標對象和 2 個或多個合并對象。在本示例中，目標對象是一個空 object

literal，充當合并對象容器。目標將成為一個包含合并對象值的單一對象（在該案例中是 settings 變量）。第 2

個參數(shù)是一個包含默認插件屬性的 object literal。第 3 個參數(shù)是用戶定義的 options 參數(shù)。要在一個 HTML 元素上使用

accordion 插件傳遞 options，需要知道除了之前您作為 object literal 傳遞的屬性外還有哪些屬性，如下所示。

$('dl#my-accordion').accordion({open:true});

在Code 7 示例中，傳遞到插件的 options 通過 $.extend 方法覆蓋 defaults。如果沒有傳遞 options，則使用默認值。對于示例插件，可使用 open 屬性確定加載時是否打開第一個內容區(qū)域。

可重用性

您可以在任何 HTML 文檔中重用示例 accordion 插件，可以在單個 HTML 文檔中多次使用。您也可以包括多個

accordion 結構，就像已創(chuàng)建的那個 accordion，使用剛創(chuàng)建的新 accordion 插件通過 jQuery 將每個單獨定義為

accordion。要向一個 HTML 文檔添加多個 accordion，只需要添加盡可能多的 accordion 結構。Code 8

中的代碼包括兩個 accordion 結構，由一個段落隔開。

Code 8. 在同一個 HTML 文檔中使用多個 accordion

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd內容一/dd

dt第2部分/dt

dd內容二/dd

dt第3部分/dt

dd內容三/dd

dt第4部分/dt

dd內容四/dd

/dl

dl class="accordion" id="my-accordion"

dt第5部分/dt

dd內容五d

dt第6部分/dt

dd內容六dd

dt第7部分/dt

dd內容七/dd

/dl

Code 8 中的兩個 accordion 結構幾乎一樣，除了內容不一樣外，更重要的是 ID 值也不一樣。第一個結構包含一個

my-accordion ID 值。第 2 個結構包含一個 my-accordion2 ID 值。現(xiàn)在可以單獨定向這些結構。例如，下列

jQuery 腳本使用已創(chuàng)建的新插件將每個 accordion 結構定義為一個 accordion。

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

兩個 accordion 結構定義完成后，第一個面板默認設置為打開下圖 顯示一個用在同一個 HTML 文檔的多個 accordion 插件的示例。

開發(fā)時怎么使用jquery插件

1.在JQuery命名空間內聲明一個特定的命名

$.fn.hilight = function() {

//在這里輸入你的插件執(zhí)行代碼};

我們可以這樣調用：

$('#myDiv').hilight();

2.接收參數(shù)來控制插件的行為；

來為我們的hilight插件添加指定前景和背景色的功能，我們需要在函數(shù)中允許一個object類型的選項設置。如下所展示的那樣：代碼

$.fn.hilight = function(options) {

var defaults = {

foreground: 'red',

background: 'yellow'};var opts = $.extend(defaults, options);};

現(xiàn)在，我們的插件可以這樣來調用：

$('#myDiv').hilight({

foreground:'blue'});

3.提供公有方法訪問插件的配置項值；

上面的代碼我們可以做一下改進，使得插件的默認值可以在插件之外被設置。這無疑是十分重要的，因為它使得插件用戶可以使用最少的代碼來修改插件配置，這其實是我們利用函數(shù)對象的開始。

jquery插件開發(fā)有幾種

//類級別插件開發(fā)，主要是在jQuery中定義全局方法：

//第一種寫法

jQuery.myFunc = function(str){

alert("直接在jquery中定義方法",str)

}

//調用方式 $.myFunc("hello!");

//第二種寫法

jQuery.extend({

myFunc:function(str){

alert("extend擴展$的方法",str)

}

})

//調用方式 $.myFunc("hello!");

//第三種寫法： 為了不污染全局，掛載一個對象作為命名空間，自定義的所有方法放在這里，保證jQuery全局安全。

jQuery.define={

myFunc:function(str){

alert("命名空間的寫法",str)

}

}

//調用方式：$.define.myFunc("hello");

//以上三種是級別插件開發(fā)方式，不常用，從調用方式看出，他們是全局執(zhí)行的，不需要綁定節(jié)點對象。

//對象級別插件開發(fā)：有規(guī)范模板

;(function($){

$.fn.plugin = function(options){

var defaults = {

//各種默認參數(shù)

}

var options = $.extend(defaults,options); //傳入的參數(shù)覆蓋默認參數(shù)

this.each(function(){

var _this = $(this); //緩存一下插件傳進來的節(jié)點對象。

//執(zhí)行內容

})

return $(this); //把節(jié)點對象返回去，為了支持鏈式調用。

}

})(jQuery);

//調用方式

$("selector").plugin({

//自定義參數(shù)，json格式

})

什么是jquery插件?有什么用?

jquery 插件就是一些人用jquery寫的一些工具，常見的是jquery UI和jquery easyui,我們在調用時只需要用很少的代碼就能實現(xiàn)很好的效果。

如easyui的datagrid、combobox、tree等可以實現(xiàn)表格、下拉框、樹等形狀及需要的操作。

附：easyui官網(wǎng)

可以在網(wǎng)站里面下載demo、觀看一些特效、下載插件js等。

jQuery插件開發(fā)全解析 jQuery插件的開發(fā)包括兩種：

一種是類級別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當于給jQuery類本身添加方法。jQuery 的全局函數(shù)就是屬于jQuery命名空間的函數(shù)。

另一種是對象級別的插件開發(fā)，即給jQuery對象添加方法。

jquery 簡介

JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需要定義id即可。

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發(fā)布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發(fā)。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網(wǎng)站中，有超過55%在使用jQuery。

jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery的語法設計可以使開發(fā)更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。

jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發(fā)的庫。

歷史

大概在 1992 年，一家稱作 Nombas 的公司開發(fā)了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式腳本語言。Cmm 背后的理念很簡單：一個足夠強大可以替代宏操作（macro）的腳本語言，同時保持與 C （和 C ++）足夠的相似性，以便開發(fā)人員能很快學會。這個腳本語言捆綁在一個叫做 CEnvi 的共享軟件中，它首次向開發(fā)人員展示了這種語言的威力。

Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）聽起來過于消極，同時字母 C “令人害怕”。

當 Netscape Navigator 嶄露頭角時，Nombas 開發(fā)了一個可以嵌入網(wǎng)頁中的 CEnvi 的版本。這些早期的試驗被稱為 Espresso Page（濃咖啡般的頁面），它們代表了第一個在萬維網(wǎng)上使用的客戶端語言。而 Nombas 絲毫沒有料到它的理念將會成為萬維網(wǎng)的一塊重要基石。

當網(wǎng)上沖浪越來越流行時，對于開發(fā)客戶端腳本的需求也逐漸增大。此時，大部分因特網(wǎng)用戶還僅僅通過 28.8 kbit/s 的調制解調器連接到網(wǎng)絡，即便這時網(wǎng)頁已經不斷地變得更大和更復雜。而更加加劇用戶痛苦的是，僅僅為了簡單的表單有效性驗證，就要與服務器進行多次地往返交互。設想一下，用戶填完一個表單，點擊提交按鈕，等待了 30 秒的處理后，看到的卻是一條告訴你忘記填寫一個必要的字段。

那時正處于技術革新最前沿的 Netscape，開始認真考慮開發(fā)一種客戶端腳本語言來解決簡單的處理問題。

當時工作于 Netscape 的 Brendan Eich，開始著手為即將在 1995 年發(fā)行的 Netscape Navigator 2.0 開發(fā)一個稱之為 LiveScript 的腳本語言，當時的目的是在瀏覽器和服務器（本來要叫它 LiveWire）端使用它。Netscape 與 Sun 及時完成 LiveScript 實現(xiàn)。

就在 Netscape Navigator 2.0 即將正式發(fā)布前，Netscape 將其更名為 JavaScript，目的是為了利用 Java 這個因特網(wǎng)時髦詞匯。Netscape 的賭注最終得到回報，JavaScript 從此變成了因特網(wǎng)的必備組件。

因為 JavaScript 1.0 如此成功，Netscape 在 Netscape Navigator 3.0 中發(fā)布了 1.1 版。恰巧那個時候，微軟決定進軍瀏覽器，發(fā)布了 IE 3.0 并搭載了一個 JavaScript 的克隆版，叫做 JScript（這樣命名是為了避免與 Netscape 潛在的許可糾紛）。微軟步入 Web 瀏覽器領域的這重要一步雖然令其聲名狼藉，但也成為 JavaScript 語言發(fā)展過程中的重要一步。

在微軟進入后，有 3 種不同的 JavaScript 版本同時存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。與 C 和其他編程語言不同的是，JavaScript 并沒有一個標準來統(tǒng)一其語法或特性，而這 3 種不同的版本恰恰突出了這個問題。隨著業(yè)界擔心的增加，這個語言的標準化顯然已經勢在必行。

2006年1月，jQuery的第一個版本面世，至今已經有10年多了（注：這個時間點是截止至出書時間）。雖然過了這么久，但它依然以其簡潔、靈活的編程風格讓人一見傾心。在本篇文章中，我們將講述jQuery的發(fā)展 歷史 ，讓讀者對jQuery有更多的了解。

在jQuery迅速發(fā)展的同時，一些大的廠商也看中了商機。2009年9月，微軟和諾基亞公司正式宣布支持開源的jQuery庫，另外，微軟公司還宣稱他們將把jQuery作為Visual Studio工具集的一部分。他將提供包括jQuery的智能提示、代碼片段、示例文檔編制等內容在內的功能。微軟和諾基亞公司將長期成為jQuery的用戶成員，其他成員還有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版發(fā)布，它使用了全新的選擇符引擎Sizzle，在各個瀏覽器下全面超越其他同類型JavaScript框架的查詢速度，程序庫的性能也因此有了極大提升。這一版本的第2個變化就是提供live()方法，使用live()方法可以為當前及將來增加的元素綁定事件，在1.3版之前，如果要為將來增加的元素綁定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。　2005年8月，John Resig提議改進Prototype的“Behaviour”庫，于是他在blog上發(fā)表了自己的想法，并用了3個例子做說明。

2010年2月，jQuery 1.4.2版發(fā)布，它新增了有關事件委托的兩個方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。這個方法比live()來的方便，而且也可以達到動態(tài)添加事件的作用。比如給表格的每個td綁定hover事件

特點

1.動態(tài)特效

2.AJAX

3.通過插件來擴展

4.方便的工具 - 例如瀏覽器版本判斷

5.漸進增強

6.鏈式調用

7.多瀏覽器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了對Internet Explorer6,7,8的支持）

歷史 版本

jQuery 1.0

（2006年8月）：該庫的第一個穩(wěn)定版本，已經具有了對CSS選擇符、事件處理和AJAX交互的穩(wěn)健支持。

jQuery 1.1

（2007年1月）：這一版大幅簡化了API。許多較少使用的方法被合并，減少了需要掌握和解釋的方法數(shù)量。

jQuery 1.1.3

（2007年7月）：這次小版本變化包含了對jQuery選擇符引擎執(zhí)行速度的顯著提升。從這個版本開始，jQuery的性能達到了Prototype、Mootools以及Dojo等同類JavaScript庫的水平。

jQuery 1.2

（2007年9月）：這一版去掉了對XPath選擇符的支持，原因是相對于CSS語法它已經變得多余了。這一版能夠支持對效果的更靈活定制，而且借助新增的命名空間事件，也使插件開發(fā)變得更容易。

jQuery UI（2007年9月）：這個新的插件套件是作為曾經流行但已過時的Interface插件的替代項目而發(fā)布的。jQuery UI中包含大量預定義好的部件（widget），以及一組用于構建高級元素（例如可拖放的界面元素）的工具。

jQuery 1.2.6

（2008年5月）：這一版主要是將Brandon Aaron開發(fā)的流行的Dimensions插件的功能移植到了核心庫中。

jQuery 1.3

（2009年1月）：這一版使用了全新的選擇符引擎Sizzle，庫的性能也因此有了極大提升。這一版正式支持事件委托特性。

jQuery 1.3.2

（2009年2月）：這次小版本升級進一步提升了庫的性能，例如改進了：visible/:hidden選擇符、.height()/.width()方法的底層處理機制。另外，也支持查詢的元素按文檔順序返回。

jQuery 1.4

（2010年1月14號）：對代碼庫進行了內部重寫組織，開始建立一些風格規(guī)范。老的core.js文件被分為attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的邏輯分離。

重要變化：

1. Ajax重寫

Ajax模塊完全進行了重寫。新增一個jXHR對象，為不同瀏覽器內置的XMLHttpRequest提供了一致的超集。對于XMLHttpRequest之外的傳輸機制，比如JSONP請求，jXHR對象也可以進行處理。（詳情可以參見：jQuery.ajax文檔）

此外，系統(tǒng)的可擴展性大大增強，可以附加各種數(shù)據(jù)處理器、過濾器和傳輸機制，為開發(fā)新的Ajax插件提供了方便。

2. 延遲對象

延遲對象（Deferred Object，jQuery.Deferred對象）是一個可鏈接的（chainable）實用工具對象，實現(xiàn)了Promise接口，可以在回調隊列中注冊多個回調、調用回調隊列并轉發(fā)任何同步/異步函數(shù)的成敗狀態(tài)。正如Using Deferreds in jQuery 1.5一文中說明的，其結果是在jQuery中能夠將依賴于某個任務（事件）結果的邏輯與任務本身解耦了。這一點在JavaScript中其實并不新鮮，Mochikit和Dojo等已經實現(xiàn)有些日子了。由于jQuery 1.5的Ajax模塊內置使用了延遲對象，因此通過jQuery編寫Ajax程序將自動獲得這一功能。

開發(fā)人員借此可以使用無法立即獲得的返回值（如異步Ajax請求的返回結果），而且第一次能夠附加多個事件處理器。

例如，使用了新的jQuery內部Ajax API就可以實現(xiàn)下面的代碼了：

// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete"); });

此外，使用jQuery.Deferred還可以開發(fā)自己的延遲對象。更多詳情參見：延遲對象文檔。

3. jQuery.sub()

jQuery 1.5提供了一種創(chuàng)建和修改jQuery副本的方式。可以用來添加不向外部公開的方法，或者對jQuery的某些方法進行重新定義以提供新功能，或者提供更好的封裝、避免名稱空間沖突。當然，也可以用來開發(fā)插件，但Resig強烈建議在開發(fā)插件之前，先考慮jQuery UI widget工廠。

值得注意的是，sub函數(shù)并不提供真正的隔離，所有方法、數(shù)據(jù)、調用仍然依靠jQuery本身來支持。

4. 遍歷性能提高

在新版本中.children(),.prev(),.next()幾個常用的遍歷函數(shù)性能有了顯著提高。

5. 內部開發(fā)系統(tǒng)

John Resig還特別提到了jQuery團隊內部開發(fā)系統(tǒng)的兩點改變：一是服務器端用Node.js替換了老的Java/Rhino系統(tǒng)，使得團隊可以專注于JavaScript環(huán)境的新變化；二是所用的代碼優(yōu)化程序從Google Closure切換到UglifyJS，新工具的壓縮效果非常令人滿意。

使用方法

jQuery可以下載使用，有兩個版本的 jQuery 可供下載

Production version - 用于實際的網(wǎng)站中，已被精簡和壓縮。

Development version - 用于測試和開發(fā)（未壓縮，是可讀的代碼）

jQuery 1.8.0版時壓縮前后的對比

插件機制

jQuery的官方插件是jQuery UI。開發(fā)者可以任意擴展jQuery的函數(shù)庫或者按照自己的需求開發(fā)UI組件。網(wǎng)上已經有數(shù)以萬計的jQuery插件，覆蓋各種各樣的需求。例如Ajax輔助、數(shù)據(jù)表格、動態(tài)列表、XML工具、拖曳、cookie處理、彈出層等等。jQuery 的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇,例如ComponentOne Studio for ASP NET Wijmo.

隨著jQuery插件在網(wǎng)站建設過程中的使用率不斷的增加，所以有必要跟進時代步伐開發(fā)出一些新的插件/代碼片段，以此來鞏固并提高前端用戶體驗，將用戶體驗提升到一個新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。

控件

jQuery Gantt控件是一個基于原生HTML5/jQuery，功能豐富的控件，該控件真正實現(xiàn)了跨平臺，在許多設備和瀏覽器中無縫的運行。

使用項目甘特圖中內置的調度，依賴等功能實現(xiàn)任務分層列表的可視化。

使用資源甘特圖實現(xiàn)一個資源利用視圖。

使用基于API的jQuery或者基于API的MVC可幫您輕松地安裝甘特圖并加快應用速度。

可與諸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。

jQuery插件開發(fā)：return this.each()是什么意思？

因為each返回的也是this對象，所以直接return

this.each可以執(zhí)行你的相關操作，還可以保持鏈式調用功能

文章標題：jquery插件開發(fā),jq 插件
標題URL：http://chinadenli.net/article6/dsihdog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、靜態(tài)網(wǎng)站、App設計、標簽優(yōu)化、域名注冊、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)