本文章是由機器翻譯。

剪下緣

探索豐富型用戶端指令碼與 jQuery，Part 2

Dino Esposito

內容

jQuery 的事件模型
繫結事件處理常式
以程式設計方式觸發事件
特殊事件的相關方法
事件的協助程式
視覺化效果
自訂動畫
AJAX 功能
用戶端快取
設定加總

功能強大的 Web 應用程式將需要您，功能強大的用戶端功能。 傳統 Web 程式開發人員有依賴 JavaScript 來傳遞的電源。 不過，未經處理的 JavaScript 會有其中一些可以透過程式庫和物件導向解決的其限制。

有可用的的許多的 JavaScript 程式庫，但之後一段它們所有看起來相同。 如果您無法決定要開始，我會建議您在這裡啟動 — 與 jQuery。 我討論的最後一個月，jQuery 有一些好用的功能，包括選取、 篩選器、 換行的設定及主要的功能 — 鏈結的函式。 (請參閱 ＜ 探索豐富型用戶端指令碼與 jQuery，Part 1 .") 這個月，我將探討一些其他，包括事件模型、 視覺效果、 快取，和 AJAX 功能。

jQuery 的事件模型

更通常個，瀏覽器沒有自己的事件的表示。 Internet Explorer 一樣 Firefox 和 Safari，有其專屬的事件模型。 因此，達成跨瀏覽器相容性的事件都是沒有簡單的工作，不正確的程式庫的協助。 接著，幾乎任何的 JavaScript 程式庫必須提供一個抽象模型處理事件。 jQuery 程式庫，也不例外。

處理 API jQuery 事件分為兩個函式群組中。 有一些一般的事件方法，加入和移除處理常式，以及較長清單的 Helper 函式。 一般的方法提供基礎的工作，協助程式]，並協助程式進行 jQuery 程式設計，簡單而有效。

[圖 1 列出可用來繫結，並解除繫結事件處理常式包裝集合的相符項目的方法。

對了，它是值得注意的 jQuery vernacular 方法用來處理內容換行集的程式碼。 函式會從另一方面來說，是代碼，以執行作業，不是特別針對處理包裝集合的內容。

繫結事件處理常式

繫結方法會將指定的事件處理常式附加至包裝集合中的所有項目中。 繫結方法的完整的簽名碼是：

bind(eventName, eventData, eventHandler)

第一個引數是字串，並指示處理事件。 第二個引數，表示與事件傳入的任何輸入的資料。 最後，第三個引數都是 JavaScript 函式繫結。

因為 jQuery 會提供一個抽象的事件模型，很重要，來查看支援事件的清單。 完整清單，是 [圖 2 ] 中。

因為的瀏覽器的差異的程式庫所提供的抽象層級，清單是較不明顯比它似乎第一目了然的。 例如，變更，以及選取事件位址非常不同的案例中。 變更事件是指的輸入項目，包括文字方塊和下拉式清單的值變更。 選取的事件只要是指文字選取範圍，輸入或文字區域項目中。

細微的差異，也存在事件 Mouseover / mouseenter 和 mouseout / mouseleave 之組之間。 他們擁有幾乎相同的描述的而且不同只因為 Mouseover 和 mouseout 也引發當使用者將入和移出子項目時。 沒有子系的項目，這些事件是相等的。

有可能您註冊多個事件相同的 JavaScript 處理常式。 您可以使用空白的空格分隔事件名稱來進行的。 下列範例切換 CSS 樣式，當滑鼠進入或離開 DIV 標記，以指定的樣式：

$("div.sensitiveArea").bind("mouseenter mouseleave", 
   function(e) {
        $(this).toggleClass("hovered");
    }
);

繫結方法，第二個引數是選擇性，而且如果指定，則表示要傳遞至處理常式任何使用者定義資料。 [圖 3 ] 說明如何，您可以切換使用而泛型的 JavaScript 處理常式在文字方塊的 CSS 樣式。

[圖 3 切換文字方塊樣式

<script type="text/javascript">
  $(document).ready( 
     function() {
       $("#TextBox1").bind("focus", 
                           {cssStyle: "focusedTextBox"}, 
                           setCSS);
       $("#TextBox1").bind("blur", 
                           {cssStyle: "focusedTextBox"}, 
                           setCSS);
     }
  );

  function setCSS(e)
  {
     var name = "#" + e.target.name;
     $(name).toggleClass(e.data.cssStyle);
  }
</script>

請注意前面的程式碼是完全說明繫結函式的而且可能無法正常運作以切換樣式。 最好是使用： 重點，將特殊的樣式加入至的項目中，項目具有焦點時的虛擬類別。 最新版的瀏覽器將會支援它。 JavaScript 處理常式會是一個函式宣告，並接收的事件資料結構。 這個物件將具有您， **[圖 4]**中列出的成員。

值得注意的是，目標屬性傳回 DOM 參考物件，jQuery 不換行設定。 您必須想出的項目識別碼，叫用其識別碼或名稱的屬性。 處理常式會擷取您傳遞透過其資料的 expando 屬性的任何自訂資料。

兩個方法會完成事件資料物件的定義。 preventDefault 方法會停止執行通常需要在事件之後，預設動作，從瀏覽器。 例如上，如果您是在提交處理常式中呼叫 preventDefault，送出表單就會發生。 preventDefault 方法沒有反，昇的事件物件的堆疊，透過但是停止的。

相較之下，stopPropagation 方法會停止事件反昇，但不會防止動作。 如果您想要將停止事件傳用，並將防止預設動作，進行這個動作不會呼叫這些方法，； 只是從事件處理常式中傳回 False。

透過繫結方法，將附加任何處理常式可以使用 「 取消裝訂 」 方法會中斷。 方法採用兩個選擇性參數) 的名稱在事件和處理常式。 如果沒有指定所有的處理常式將會從包裝集合中的所有項目中移除。

以程式設計方式觸發事件

方法的觸發程序 (請參閱 [圖 1 ) 指示 jQuery 叫用任何指定的事件註冊的處理常式。 若要模擬使用者指定的按鈕上按一下，使用這個：

$("#Button1").trigger("click");

如果與的項目按一下 [事件註冊沒有 JavaScript 的處理常式，程式碼不會做任何動作。

在方法 triggerHandler 與觸發程序，有兩種不同。 先，方法) triggerHandler 也可防止在瀏覽器的預設動作。 第二個，方法也會影響只有一個項目一個項目不是整個換行的集合。 如果該包裝的集合會包含多個相符的項目，只有第一個就會有引發指定的事件處理常式。

如果使用 triggerHandler 方法來以程式設計方式觸發焦點事件的輸入的欄位上接下來您將會看到，任何已註冊的處理常式執行但不會發生移動至欄位的輸入的焦點的預設動作。

 $("#TextBox1").triggerHandler("focus");

[圖 5] 顯示哪些看起來像。

[圖 5 觸發焦點事件會以程式設計的方式

特殊事件的相關方法

jQuery 程式庫提供三種常用的事件的方法： 準備、 暫留、 切換。 在準備好的方法會接受函式，並當 DOM 準備好要周遊的管理程式碼執行：

$(document).ready(
  function() {
...
  }
);

程式庫會需要這個會取代在瀏覽器的視窗物件的 onload 事件的能力。 onload 事件發生太遲了，當所有影像也已都載入。 當頁面和程式庫已經被完全初始化時，另一方面，會引發在準備好的事件。

在暫留的函式，您會將您要當使用者輸入，並保留一組頁面項目時所執行程式的碼。 動態顯示函式會接受兩個處理常式。 當滑鼠停留該換行的集合，第二個執行中的一個項目當滑鼠離開項目的區域時，就會執行第一個。

最後，切換函式會執行的更聰明的工作。 它會接受兩個或多個處理常式，並以使用者按一下交替執行它們。 也就是說，第一個相符的項目上按一下 [執行第一個處理常式，第二個按一下 [執行的第二個處理常式，等等。 當到達，處理常式清單的底端時，所有後續的按一下執行回從清單中第一個函式。

事件的協助程式

若要強調其極端的可用性的概念，jQuery 程式庫會隨附的 Helper 方法，以簡化一般的事件處理常式的繫結清單。 helpers 有兩種形式： 使用和不函式參數。

helpers 接受參數收到的 JavaScript 函式引發事件時執行。 如果沒有參數指定，方法就會只觸發包裝集合中的任何項目上的指定的事件。 [圖 6 會顯示支援 helpers 的清單，並區分資料夾的方法和觸發程序的方法。

下列程式碼會登錄為指定的按鈕 Click 事件。 一旦文件已完全載入，並且準備好要以程式設計方式操作，就會發生，繫結，事件和處理常式之間。

$(document).ready( function() {
   $("#btnProcess").click(
       function(e) {
this.text("Please wait ... ");
       }
   );
});

某些事件，例如 [捲動]、 [調整大小和 [滑鼠事件意義才觸發明確的使用者動作。 這類事件沒有觸發程序) 方法，如 [圖 6 ] 所示。

視覺化效果

其中一個最負責 jQuery 程式庫的 「 普及的因素是內建引擎的視覺效果時。 在程式庫，您會找到有效建置自訂的動畫，加上少數的設備，快速地實作通用的效果，例如淡出及滑動的引擎。

預先定義的效果，可以分成它們處理 CSS 屬性根據三個群組： 可見性滑動，及淡出。 [圖 7 ] 列出原本就可用的所有效果。

[圖 7 ] 中的所有方法，都套用至任何相符的項目，包裝集合中。 可視性的方法在顯示的 CSS 屬性上顯示或隱藏使用不錯的內建動畫的項目。 例如，下列的程式碼，使用者按一下按鈕 unveils 的 HTML 面板：

$("btnShowOrders").click(
   function(e) {
      $("#panelOrders").show(2000);
   }
);

動畫會採用兩秒鐘才能完成。 您可以指定可視性方法的選擇性引數會包含的速度，動畫及完成時叫用回呼。 動畫的型別會是硬式編碼，而且漸進發現在左上角的內容。

滑動方法的運作符合項目的 CSS 高度屬性。 slideDown 方法增加在迴圈 (Loop) 中為項目的高度，顯示發生的漸進顯示項目。 在 slideUp 方法會執行反向，並隱藏項目的滑動它，從實際的高度為零。

淡出的方法，請依照模型類似於滑動方法。 它們會支援選擇性的速度和完成回呼和迴圈 CSS 不透明度屬性上的 [顯示 / 隱藏項目 (請參閱 [圖 8 )。

[圖 8 淡出

$("#btnShowOrders").click(
   function(e) 
   {
      // Hide the current panel.
      $("#panelOrders").fadeOut(1000);

      populateOrderPanel();

      // Show new content and when done 
      //apply some CSS styles
      // to denote the new content.
      $("#panelOrders").fadeIn(2000, 
         function() {
            $("#panelOrders").css(...);
         }
      );
   }
);

在上述範例中，示範如何淡出的現有 HTML 面板、 重新整理它隱藏時,，然後將它再次使用 fade-in 動畫顯示。 注意您可以指示使用毫秒為單位的明確的持續時間所需的速度或字串，表示其中一個預先定義的三個速度依靠： 緩慢、 一般，或快速。

自訂動畫

[圖 6 ] 中列出的所有視覺效果上 jQuery 動畫引擎的最上層實作。 這個引擎的核心都是動畫的函式：

function animate( prop, speed, easing, callback ) 
{ 
  …
}

函式，第一個引數會是屬性 / 值組的陣列，其中將屬性參考 CSS 屬性。 函式只會移動從其目前的值每個相符項目，為指定的值，CSS 屬性。

您可以指定其他的選擇性引數會包含的速度，動畫及完成回呼。 easing 引數會指出您要在轉換期間使用 easing 效果的名稱。 有兩個內建的值： 線性和展開。 可以使用一個外掛程式，加入其他 easing 的選項。

以下是範例呼叫動畫的方法：

$("#Element1").animate(
   { width: "70%",
     opacity: 0.4,
     borderWidth: "10px"
   }, 
   3000);

動畫結尾相符的項目將會具有指定的寬度、 透明度和框線寬度]。 動畫會在 3 秒內完成，並變更從其目前的值，向上或向下目標值的 CSS 屬性。

請注意必須使用 camelCase 指定 CSS 屬性，也就是第一個字元是小寫每個下列的文字，第一個字元是大寫。 例如，動態化項目的框線您應該使用 borderWidth 」 而非 CSS 原始屬性名稱的框線的寬度。

動畫的方法也會支援例如增加的相對動畫 (或減少) 為屬性的值，依百分比] 或 [以固定的值。 例如，下列的程式碼片段會顯示如何增加 20 %的項目的寬度和暗化的內容，由 0.4 的值。 我也已指定所有的變更應該套用兩個的秒數。

$("#Panel1").animate(
   { width: "+=20%",
     opacity: "-=0.4"
   }, 
   2000);

最後，請注意 jQuery 中所有的動畫自動排入佇列，並在之後下的其中一個的順序執行區號。 佇列的動畫，是要能夠鏈結多個包裝集合中的項目上的呼叫所需的先決條件。 佇列的動畫不過，會是預設行為。 身為的開發人員，您會提供工具能夠以平行方式執行一些動畫。

若要權部分平行處理原則，您建立使用動畫方法的多載的動畫佇列：

function animate( prop, options )
{
   …
}

在先前的簽名碼在的為第一個引數會表示您要製作成動畫的樣式屬性和您想要與的值組。

第二個引數會指出一組選項，用來設定動畫。 選項包括時間、 簡化、 完成的回呼和布林值，指出它是佇列的動畫 (true) 是預設值。

您可以設定佇列屬性為 False，在呼叫動畫的選項，您可以執行立即而佇列的動畫。 讓我們先考慮下列程式碼片段：

$("#div1").animate({ width: "90%" }, {queue:false, duration:5000 });
$("#div1").animate({ fontSize: '10em' }, 1000);
$("#div1").animate({ borderWidth: 5 }, 1000);

第一個的動畫會無法佇列，並立即執行。 第二個未排入佇列，但會被視為第一個佇列中的，因此它也會執行。 最終結果是前兩個動畫開始一起)。 第三個動畫會排入佇列，並開始只要第二個動畫結束 — 一秒鐘。 因為第一個的動畫 5 秒，框線動畫也會執行平行與動畫會變更項目的寬度。

AJAX 功能

什麼現代化的 JavaScript 程式庫是沒有 AJAX 非同步呼叫的穩固基礎結構？ jQuery，AJAX 支援根據透過您可以控制 Web 要求的所有層面 ajax 函式。 如下叫用 ajax 函式的一種常見方式：

$.ajax(
 {
   type: "POST",
   url: "getOrder.aspx",
   data: "id=1234&year=2007",
   success: function(response) {
     alert( response );
   }
 }
);

函式可接受單一物件中分組的參數的清單。 可行的選項有型別、 URL、 資料、 dataType、 快取、 非同步、 使用者名稱、 密碼、 逾時和 ifModified。

尤其，dataType 參數指示，預期的回應類型，而快取參數 (如果設定為 False) 會強制要求的資源不是由瀏覽器快取。 其他參數，例如型別、 密碼、 使用者名稱和 URL 是自我闡明的。

ajax 函式的選項也會包含一些最相關的步驟，在基礎的 XMLHttpRequest 物件的生命週期的任何之前叫用選擇性的回呼。 成功的回呼會表示完成回呼。 回呼函式收到回應，做為其唯一引數。 其他的回呼 beforeSend 的錯誤並完成。 呼叫成功或錯誤的回呼時，完成回呼就會執行要求的結尾。

有趣的是，ajax 函式會列出傳回給呼叫程式碼之前，Web 回應前置處理回呼。 這個回呼會是 dataFilter，並處理下載的 XMLHttpRequest 未經處理的回應。 回呼的目的，是要篩選回應，以便只有 sanitized 的資料符合預期的資料型別會傳回呼叫端。 回呼函式會接收兩個引數： 從伺服器並指派給 dataType 參數的值傳回的未經處理的資料。

當使用 jQuery 媒體櫃，您不太 ajax 函式直接使用。 您經常會使用一些 AJAX) 程式，例如 getScript、 載入或 getJSON 結束。

下列程式碼介紹載入指令碼檔案，視需要的方法。 時載入，會自動執行指令碼：

$.getScript("sample.js");

另一個很有用的程式碼是載入函式。 載入函式會下載的 HTML 標記，並自動將它插入在目前的 DOM。 下列程式碼會顯示如何以程式設計方式填入功能表：

$("#menu").load("menu.aspx");

URL 的內容附加至 DOM 樹狀子目錄符合選取器的任何項目中根目錄。 Load 方法會預設為一的 GET 要求不過您可以將它變更為 POST 藉由只加入一個資料引數，如您在此處所見：

$("#links").load(
   "menu.aspx", 
   { topElement: "Books" },
   function() 
   {
       // completion callback code
   }
);

如上述所示，回呼也可以指定在下載完成時執行。

也可能是指定 jQuery 選取器，在 URL 中，因此，傳入的標記是 pre-filtered 選取唯一的符合項目。 語法只會需要您將在選取器運算式新增至 URL。 以下是從名為 menuItems <ul> 項目中擷取所有 <li> 項目的一個範例：

$("#links").load("/menu.aspx ul#menuItems li");

最後，您已取得，從 URL 後，] 和 [GET 和 POST 直接執行，並取得 JSON 的 getJSON 函式的內容。

用戶端快取

用戶端快取是必要的重要的 JavaScript 程式碼中大小寫。 在此內容中中, 快取會是陣列的開發人員可以會儲存與指定的 DOM 項目相關的資料。 在下列的程式碼在 URL 會以決定是否在文字方塊的內容是有效的及回應然後快取在陣列元素，名為 IsValid 叫用的。

var url = "...";
var contentIsValid = $.get(url);
$("#TextBox1").data("IsValid", contentIsValid);

每個的 DOM 項目，可能會有其自己的本機快取。 在 jQuery，您可以使用資料方法包裝集合中的元素上。

若要讀回存放區的內容，您使用相同的資料函式只有一個引數，在項目的名稱：

alert($("#grid").data("Markup"));

加入至快取的項目可以使用 removeData 函式中移除。

會是不錯，知道為什麼最好使用 expando 屬性比資料函式。 expando 屬性會將自訂資訊加入至 DOM 項目使用非標準的 HTML 屬性。 它一定是一種用戶端快取處理，但有些瀏覽器可能不喜歡自訂屬性 (Attribute)。 在這種情況下您通常是依靠使用標準的屬性，例如 Alt 或關聯，以非標準的方式。 用戶端快取架構，如資料函式會將資料儲存在純舊的 JavaScript 物件，並維護使用字典的目標 DOM 項目的連結。 完成這種方式，沒有衝突，與瀏覽器有可能。

設定加總

JavaScript 約 10 年維持幾乎是不變的。 在順序語言的一個重要 overhaul 時的任何人的猜到，當它將會完整定義並，更重要的是瀏覽器是否支援它。 最後一年，周圍的語言，在目前的語言] 和 [建議新的 ECMAScript 4 語言是明顯不同於今天的 JavaScript 之間位於版本已達到資料的一致性。 新的專案，應該會產生 JavaScript 2.0 稱為 Harmony。

您是在查看任何方式跨瀏覽器程式庫似乎在接下來的幾年內至少規劃有效的和有效的用戶端開發，只可靠的方式。 在這個內容中，jQuery 會是會整合即將發行的 Microsoft Web 開發工具的傑出程式庫)。 看看關閉它，就會很高興您 ！ 快樂 jQuery 撰寫程式碼 ！

您提出問題或意見，請以 Dino 寄 cutting@Microsoft.com.

Dino Esposito 將是 IDesign 和合著 Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008) 的架構設計人員。 基礎的義大利，Dino 都是在世界各地的產業活動經常演講者簡報。 您可以加入在他的部落格 weblogs.asp。 net / despos.