本文章是由機器翻譯。
剪下緣
探索豐富型用戶端指令碼與 jQuery，Part 1
Dino Esposito
內容
jQuery 的物件
選取器
篩選器
表單篩選
換行集的作業
jQuery Chainability
知道您的 HTML
您知道它是如何。您想要擠壓出 Web 瀏覽器，) 的更多您必須在 JavaScript 中撰寫更多的功能。介紹約為 1995 年將加入 HTML 網頁的多個動作，JavaScript 語言並非明確設計為開發人員。它實際上被設計以管理 HTML 項目，並設定樣式，然後回應使用者輸入。它具有也已廣泛用於用戶端輸入的驗證 」 和 「 輕量型的其他作業。
看到較一般使用 JavaScript 已套用到可能會導致您認為很容易撰寫。但 Ray Djajadinata 中指出 」物件-導向技術來建立進階的 Web 應用程式「 在可能 2007 的MSDN Magazine撰寫好的 JavaScript 程式碼並不是一般，但如果您瞭解它也，您可以確實擠壓出的某些而進階的功能。
其中一項缺點，不過，會是 JavaScript 的它的轉譯 (不編譯) 的語言，因此也，轉譯至瀏覽器的主體。並非所有瀏覽器都在相同的方式處理相同的 JavaScript 程式碼。但 jQuery 類似的程式庫可以讓您的 JavaScript 程式碼更可預測的瀏覽器。
Microsoft 現在完全支援 jQuery 並發佈它與 ASP.NET 模型-檢視控制器 (MVC) 架構。此外，副檔名已經完全整合 jQuery IntelliSense in Visual Studio 2008 SP1 已開發。
在本月的我會討論在 jQuery 程式庫] 和 [焦點的主要特性尤其 CSS 選取器、 鏈結的函式，和換行的設定。在未來的單元我將探討等使用 jQuery 處理事件和效果、 瀏覽器端快取和 AJAX 要求有更特定的主題。
jQuery 簡介
jQuery 讓 JavaScript 程式碼更容易，並更快速地寫入。程式庫提供的 Helper 函式，大幅增加您的生產力，同時降低您的挫折。所產生的程式碼是容易閱讀而且更穩固，因為較高的抽象概念層級隱藏數檢查和處理程序的錯誤。
程式庫撰寫的 John Resig，包含單一的.js 檔案，您可以從 Docs.jquery.com/Downloading_jQuery 下載。最新版本會為 1.2.6 已於 2008 的年春季發行的。在下載 site 提供三個程式庫版本： 解壓縮、 封裝和最小化。
未壓縮的版本會是接近 100KB，，是完全人類可讀取和註解。這個版本是絕對挑選 perusal 和偵錯。
最小化的版本會是關於 50KB。已從原始程式碼中移除所有不嚴格需要實作功能的額外字元。程式碼是如果不可能讀取人類，不切實際，但它適用正常的電腦]。
最後，封裝的版本是難以大小，30KB，但它需要更多的初始設定時間，在用戶端上。jQuery 的官方網站，建議您考慮實際執行環境中取得最小化的版本而非的封裝版本。此外，您也應該考慮 GZip 壓縮，透過網路傳輸的是標準的作法，並且由所有現代化的 Web 伺服器和瀏覽器。GZip 壓縮會顯示往下的大約 20 KB，大小。如果您使用 GZip，封裝的版本為相當多的無用的。
在的 ASP.NET] 專案您也需要 jquery 1.2.6 vsdoc.js 中，啟用 IntelliSense 和 Visual Studio 2008 補充程式 (請參閱JScript KB958502-編輯器支援 '-vsdoc.js ' IntelliSense 文件檔案」)，以完整支援 jQuery IntelliSense。
在 ASP.NET，您可以使用一個純 <script> 標記，以連結程式庫，或您可以在 ScriptManager 控制項，在指令碼區段中列出它就像這樣：
<asp:ScriptManager id="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference path="Scripts/jquery-1.2.6.min.js" />
</Scripts>
</asp:ScriptManager>
請注意，除非您也會希望 Microsoft AJAX 程式庫以目前版本的 ASP.NET 不建議使用這個方法內嵌於頁面中。 您可以在 ASP.NET 4.0，停用 Microsoft AJAX 用戶端架構檔案讓此方法的一個好的。
整個組 jQuery 功能可分成四個主要區域： DOM 查詢和操作、 效果和動畫、 AJAX 和使用陣列、 篩選資料，和偵測瀏覽器功能的核心功能。
jQuery 的物件
在程式庫的名稱 「 查詢 」 一字，表示所有。 它是指透過頁面是其中 jQuery 取得其電源的 DOM 執行查詢。
程式庫提供選取 DOM 項目的一個功能強大介面，，遠超過簡單搜尋元素符合指定的 ID。 例如，即可輕鬆地選取共用指定的 CSS 類別、 具有特定的屬性、 出現在的樹狀目錄中的指定位置或有其他項目關聯的所有項目。 更重要的是，您也可以加入篩選條件，而您可以鏈結這些所有的查詢功能一起，更，像是您可以查詢 SQL 中的資料。
jQuery 程式庫的根目錄會是 jQuery 函式定義如下：
var jQuery = window.jQuery = window.$ = function( selector, context )
{
return new jQuery.fn.init( selector, context );
};
$ 函式會是 jQuery 函式的別名。 當您建立 jQuery 物件時，您可以傳遞選取器] 和 [內容。 選取器表示的查詢運算式，，內容表示在其上執行查詢 DOM 的部分]。 如果沒有內容指定，jQuery 函式會尋找 DOM 項目整個頁面 DOM 中。
jQuery 函式 (以及其 $ 別名) 上提供的引數中執行某些工作，執行的查詢，並再傳回包含結果在新 jQuery 物件。 在新建立的 jQuery 物件可以，依次，是進一步查詢，或篩選一個新在陳述式中也為陳述式) 的鏈結。
根 jQuery 物件會支援下列簽名碼：
jQuery( expression, [context] )
jQuery( html, [ownerDocument] )
jQuery( elements )
jQuery( callback )
第一個會接受一個 CSS 選取器，並傳回 HTML 項目，所謂包裝集合的包裝的陣列。 第二個會接受的 HTML 字串，建立相關樹狀子目錄，並將它附加至指定的擁有人文件中,，如果有的話。 第三個多載會挑選項目的指定的 DOM 項目。 最後，第四個只會回呼函式，並執行它在整個的文件上，只要在頁面的文件完全載入。
此外，根 jQuery 物件也提供幾個的 Helper 方法如 [圖 1 ] 中所列。 特定開發人員感興趣的是每個方法，您可以使用一個縮寫為手動的反覆項目透過一個 jQuery 物件的內容 — 通常是透過一個 CSS 選取器選取 DOM 項目。 以下是程式碼片段，顯示每個方法的動作。 迴圈會處理所有的 <input> 的標記，在表單中：
$("form input").each(
function(i) {
this.title = "Input #" + i;
}
);
| [圖 1 的邊緣伺服器角色和反向 Proxy OCS 2007 的 |
| 方法 | 描述 |
| 每一個 (回呼) | 迴圈，透過包裝集合的內容，並執行指定的回呼函式中。 |
| 長度 | 會換行的集合中傳回的元素數目的屬性。 |
| eq (位置) | 減少至在指定的位置的單一項目的換行的集合。 |
| get() | 為 DOM 項目的陣列，會傳回包裝集合的內容。 |
| 取得 (索引) | 會傳回包裝集合中的指定位置的 DOM 項目。 |
| 索引 (項目) | 如果有的話，請換行的指定的 DOM 項目集合中傳回 0 為基礎索引。 |
each () 」 和 「 手動 JavaScript 迴圈，差異會在於該 each() 自動將 「 這個 」 物件對應至正在處理集合中的項目。 回呼函式，但是，會接收選擇性整數參數，可為反覆項目的 (0 為基礎) 索引。 讓我們進一步瞭解 jQuery 選取器及其 CSS 的基礎語法。
以下是 $ 函式的最簡單的用法：
var elem = $("#grid");
在程式碼片段中，$ 函式會擷取所有的 DOM 元素，其 ID 屬性符合指定運算式。 在 # 符號 ID 字串，不屬於但 $ 函式明確執行識別碼字串、 CSS 類別和 HTML 標記 (Tag) 名稱前的置字元。 (在 # 符號是標準的 CSS 語法，識別碼的選取項目的一部分)。 前面的程式碼片段功能相當於下列的 DOM 陳述式：
var elem = document.getElementById("grid");
值得注意的是在 HTML DOM，不同於在 ASP.NET 中，多個項目可以共用相同的 ID。 如果元素的陣列，符合識別碼，再方法 getElementById 會只傳回第一個相符的項目，另一方面，getElementsByName，會傳回整個集合。
傳統的 DOM 的方法和 $ 函式之間，相似性會有結束 ； $ 的功能遠超越。 透過 $，您選取 DOM 的項目，然後再到每個中套用 [函式。
選取器運算式由 CSS 3.0 語法所驅動，並可以達到重要的複雜性層級。 [圖 2 ] 顯示支援的選取器。 清單並不包含我將於稍後討論的篩選。 請注意，在階層的選取祖系、 父系，金鑰或前一個項目可以是任何有效的選取器不只是在 HTML 項目。 [圖 3 ] 顯示一些範例的查詢。
| [圖 2 支援 jQuery 選取器 |
| 選取器 | 描述 |
| Id | 如果任何具有相符的 ID 屬性 DOM 中，請傳回第一個項目。 |
| 項目 | 傳回具有相符的標記名稱的所有項目。 |
| class | 傳回具有相符的 CSS 類別的所有項目。 |
| * | 傳回頁面的所有項目。 |
| selector1，...selectorN | 適用於所有指定的基本選取器，並傳回合併的結果。 |
| 祖系的子系 | 指定的祖系選取器，會傳回集合的所有符合選取子孫項的子代項目。 例如，"div p"會傳回一個 <div> 內的所有 <p> 項目)。 |
| 父代 > 子系 | 指定資料的選取傳回 [符合子選取器的所有子項目的集合]。 |
| 上一個] + [下一個 | 指定資料的選取傳回符合下一個選取器，位於至上一個選取器] 旁邊的所有同層級項目的集合]。 |
| 上一個 ~ 同層級 | 指定資料的選取傳回符合同層項目選取器，依照上一個選取器的所有同層級項目的集合]。 |
| [圖 3 範例 jQuery 選取器的動作 |
| 範例的選取器 | 效果 |
| 表單輸入 | 您可以傳回任何 <form> 標記內的所有輸入的欄位中頁面。 |
| #Form1 輸入 | 傳回標示為 Form1 的表單內的所有輸入的欄位。 |
| h2 + p | 相同父代的子系時，會傳回所有的 <p> 標記的旁邊一個 <h2>。 |
| input.textBox | 會傳回所有的 CSS 類別是 textBox 」 的 <input> 的標記。 |
| div span.myClass | 傳回的 CSS 類別是 「 myClass 」 在 <div> 內的所有 <span> 標記。 |
選取器可以藉由將篩選器套用屬性 (Attribute)、 內容、 位置，和可視性中進一步精簡。 [圖 4 ] 列出一些 jQuery 中最受歡迎的篩選器。 Docs.jquery.com/selectors 是完整的參考。
例如，第一個和最後一個尋找篩選傳回的集合中指定位置的 DOM 項目。 藉由使用 eq)、 gt 和 lt 篩選器，您也可以使用篩選器項目的索引的基礎語法。 篩選器 eq 挑選的項目的索引會符合在指定的索引而 gt 和 lt 挑選項目，或大於，小於，指定的索引。
屬性篩選條件會是選取 HTML 項目的強大工具，其中的指定的屬性都是以具有值指定關聯性。 在 [圖 4 ，我只會列出最常使用的屬性篩選器。 其他篩選器會存在於選取指定的屬性的開始處的項目與，結束與，或包含在指定的值。 以下是必要的語法：
[attribute^=value] // begins with value
[attribute$=value] // ends with value
[attribute*=value] // contains value
| [圖 4 jQuery 篩選器 |
| 位置的篩選器 | 描述 |
| :first | 傳回所選取的項目集合的第一個項目。 |
| ： 最後一個 | 傳回所選取的項目集合的最後一個項目。 |
| ： not(selector) | 篩選出所有符合指定的選取的項目。 |
| ： 即使 | 傳回所有即使項目，選取集合中。 |
| ： 奇數 | 您可以傳回所有奇數項目選取集合中。 |
| 子篩選器 | 描述 |
| ： nth-child(expr) | 傳回所有子項目任何父代的符合給定的運算式。 運算式可以是個長度索引或數學序列 (針對範例、 3n + 1) 的包括標準 sequences 例如奇數的而且甚至一個。 |
| ： 首先： 子系 | 傳回的第一個子系其父代的所有項目。 |
| ： 最後子系 | 傳回其父代的最後一個子系的所有項目。 |
| ： 僅-子系 | 傳回其父代的唯一子系的所有項目。 |
| 內容篩選器 | 描述 |
| ： contains(text) | 傳回包含指定的文字的所有項目。 |
| ： 空白 | 傳回具有沒有子系的所有項目。 (文字被視為一個子節點)。 |
| ： has(selector) | 傳回包含符合指定的選取器至少一個項目的所有項目。 |
| ： 父代 | 傳回有至少一個子系的所有項目。 (文字被視為一個子節點)。 |
| 可視性篩選器 | 描述 |
| ： 隱藏 | 傳回檢視目前隱藏的所有項目。 輸入 「 隱藏的型別的項目會加入至清單中。 |
| ： 顯示 | 傳回目前顯示的所有項目。 |
| 屬性篩選條件 | 描述 |
| [屬性] | 傳回具有指定的屬性的所有項目。 |
| [屬性 = 值] | 傳回具有指定的屬性設定為指定值的所有項目。 |
| [屬性! = value] | 傳回所有的項目 (如果有的話)，其為指定的屬性具有不同於指定的另一個值。 |
屬性篩選條件也可以藉由直接放置兩個或多個並排，鏈結就像這樣：
[align=right][valign=top]
在特別強大的篩選是第 n 個子的。 它支援許多不同的輸入運算式，如下所示：
:nth-child(index)
:nth-child(even)
:nth-child(odd)
:nth-child(sequence)
第一個格式會在 [來源選取器，其中 n 是指提供索引] 中選取 HTML 項目的第 n 個子系。 如果您指定了奇數或偶數的篩選器，會傳回位於任何奇數或偶數的位置 (0 為基礎) 的所有項目。 最後，您可以傳遞第 n 個子做為一個數學的序列，例如 3n，表示為 3 的倍數的根目錄運算式。
例如，下列的選取器挑選 (標示為 DataGrid1) 資料表中的位置由 [順序] 3n + 1、 (1、 4、 7 和等等)，) 上的所有資料列記住它就會以零起始的索引：
#DataGrid1 tr:nth-child(3n+1)
下一個更複雜的運算式，並且它會示範 incredible 電源和 jQuery 選取器的彈性：
#DataGrid1 tr:nth-child(3n+1):has(td[align=right]) td:odd
它顯示如下： 在先前步驟所選取的所有資料表資料列的 (定位 1 」、 「 4 」、 「 7 和 「 等等) 現在您只能採取的儲存格 (<td> 標記) 的屬性對齊等於這些值 」 權限。 此外，其餘的資料列的您只取得具有奇數索引資料行上的儲存格。 我們考慮 [圖 5 ] 中的 HTML 表格。 在 [圖 6 ，儲存格具有黃色背景會是查詢的結果。
[圖 5 一個 HTML 資料表
<table id="DataGrid1" border="1">
<tr>
<td>Column1</td>
<td>Column2</td></tr>
<tr>
<td>Val1</td>
<td align="right">Num1</td></tr>
<tr>
<td>Val2</td>
<td align="right">Num2</td></tr>
<tr>
<td>Val3</td>
<td align="right">Num3</td></tr>
<tr>
<td>Val4</td>
<td>Num4</td></tr>
<tr>
<td>Val5</td>
<td>Num5</td></tr>
<tr>
<td>Val6</td>
<td>Num6</td></tr>
<tr>
<td>Val7</td>
<td>Num7</td></tr>
</table>
[圖 6 選取資料表的某些儲存格
表單篩選
如同所提到的 jQuery 選取器的整體語法已接近只使用一些額外的虛擬項目 (例如那些列在所擴充的 CSS 3.0 選取選取器的語法 [圖 7 .
： 輸入篩選器，特別，參考所有邏輯的輸入項目，您可能會發現在頁面上並不是限於 <input> 的標記。 事實上，它包含 <textarea> 項目] 和 [<select> 的項目，用來顯示 listboxes] 和 [下拉式清單。 [圖 7 ] 中選取不符合 CSS 選取器，但提供方便的捷徑挑選同質性的項目，例如指定型別的所有輸入的標記中。 例如，選取器： 文字功能相當於下列：
form input[type=text]
| [圖 7 表單篩選 |
| 選取器 | 描述 |
| ： 輸入 | 傳回的角色中收集的輸入的資料，包括文字區域和下拉式清單的所有項目。 |
| ： 文字 | 傳回的型別的屬性都是文字的所有的輸入項目。 |
| ： 密碼 | 傳回其型別] 屬性為密碼的所有的輸入項目。 |
| ： 核取方塊 | 傳回所有輸入的元素，其型別的屬性是核取方塊。 |
| ： 選項 | 傳回所有輸入的元素，其型別的屬性是選項。 |
| ： 提交 | 傳回所有的輸入的項目的型別的屬性是送出。 |
| ： 重設 | 傳回的型別的屬性會重設所有輸入的項目。 |
| ： 影像 | 傳回的型別的屬性是影像的所有的輸入項目。 |
| ：] 按鈕 | 傳回其型別的屬性會為按鈕的所有的輸入項目。 |
| ： 檔案 | 傳回的型別的屬性是檔案的所有的輸入項目。 |
| ： 隱藏 | 傳回的型別的屬性會隱藏所有輸入的項目。 |
| ： 啟用 | 傳回目前已啟用所有的輸入項目。 |
| ： 停用 | 傳回目前已停用所有的輸入項目。 |
| ： 檢查 | 傳回所有目前已簽核取方塊或選項項目。 |
| ： 選取 | 傳回目前選取的所有清單項目。 |
其他不錯的協助程式可用來擷取所有的輸入項目，啟用或停用頁面中] 和 [所有的核取方塊和選項按鈕已核取以及列出目前所選取的項目。
換行集的作業
HTML 項目選取器會傳回的符合封裝 jQuery 物件的新執行個體中。 這個物件會包含 JavaScript 隻與所有的 DOM 參考。 結果通常稱為包裝的集合。 即使沒有相符的項目有找到，是永遠不會 null，包裝的一。 您可以檢查這種情況下藉由查看 jQuery 物件，長度屬性，如下所示：
// All TDs with a child IMG
var w_set = new jQuery("#DataGrid1 td:has(img))");
if (w_set.length == 0)
alert("No match found.");
else
alert(w_set.length)
jQuery 所顯示的彈性的高層級會是很棒的功能，有，但然後您要尋找的所有項目之後，您需要加以處理。 最簡單的可能方法都需要設定 [迴圈，和類似集合中的每個項目上執行函式：
var ws = $("#DataGrid1 tr:nth-child(3n+1)");
for(i = 0; i<ws.length; i++)
{
processElement(ws[i]);
}
function processElement(elem)
{
...
}
在反覆這類手動項目中，您 DOM 項目直接存取，只是所示傳統的 JavaScript 程式設計。
jQuery 程式庫會提供數個功能相當於手動的反覆項目的替代路由。 剛好足夠，jQuery 反覆項目會導致更精簡和甚至更容易閱讀的程式碼。 第一種方法，根據每個函式。
如同所提到的在 jQuery 每個函式執行使用者定義的回呼與換行組關聯的任何項目上。 相當大量的操作的方法不過，存在，讓它甚至更快速、 更輕鬆地執行一般包裝上的作業中。 例如，您可以使用 CSS 函式，將 CSS 樣式套用至換行的集合。 下列會是在表單中設定的所有輸入項目的背景色彩] 和 [框線樣式的範例：
$("form input").css(
{'background-color' : 'yellow',
'border-style' : 'dashed'}
);
無可否認地，這個簡短的範例是有點誤導之虞，因為它可能會建議的 jQuery 應該用於 CSS 本身會好的。 在使用者互動或某些其他的執行的階段條件而定的動態套用樣式運作時，CSS 函式是很棒。
同樣地，您可以加入、 移除和甚至切換包裝集合中的元素上的 CSS 類別。 您執行此操作透過 addClass、 removeClass 和 toggleClass 函式。 attr 函式可讓您在所有的項目上設定一或多個的屬性。 例如，以下是如何在停用所有的輸入項目：
$("form input").attr(
{'disabled' : 'disabled'}
);
HTML 函式會設定為標記的 HTML 內容。 它會在內部使用 innerHTML 屬性。 若要設定為標記的內部文字，而，您使用文字函式傳遞文字設定為引數。 這是瞭解像 jQuery 跨瀏覽器程式庫的好處一個好方法。 在屬性 innerHTML 可以視為 de facto-標準屬性中的相同的方式支援所有瀏覽器。
相同不能說類似，只會設定文字的屬性。 這個屬性就是 innerText 在 Internet Explorer] 及 [textelement Firefox 的。 jQuery 文字函式會隱藏的差異，並在所有瀏覽器中提供，項相同的功能。
jQuery Chainability
jQuery 的最佳功能之一是其 chainability 是可能的因為 jQuery 物件本身，以及大部分的函式和篩選器，傳回 jQuery 物件時。 傳回的物件為函式本身已修改，包含原始換行的集合。 例如，如果您將 CSS 函式套用至一包裝時，傳回的 jQuery 物件會包含相同的項目，以及一組修改 CSS 樣式集。 如果您要套用篩選，您會得到回篩選函式，較小的集。 值得注意的是您也有可用在不是函式以排除符合指定的查詢的所有項目。
串連 jQuery 函式無法更容易。 您要執行的是附加新函式呼叫前, 一個呼叫所傳回的 jQuery 物件。 以下是範例：
$("form input")
.not("[type!=text]")
.css(
{'background-color' : 'yellow',
'border-style' : 'dashed'})
.attr("value", "test");
以下範例運算式會選取所有的輸入的欄位的型別屬性等於文字] 和 [將少數的 CSS 樣式] 和 [值屬性設定為固定值。 (請注意在範例中，我使用不只是將第三個連結新增至鏈結的函式。 結果的不條件可能會整合至 $ 查詢更清楚的程式碼產生)
它會不說鏈結產生的方法更精簡的程式碼，但它不一定是產生更快的程式碼。 鏈結是一項技術您，身為的開發人員可以或不可能會覺得熟悉。 如果您遇到 troubles 使用其中一個這些精簡的運算式時，您可以在它分成片段，以簡化偵錯。
最後，請注意並非所有的 jQuery 方法會傳回已修改的 jQuery 物件。 方法都要 HTML 或文字，例如，只傳回字串，分別指向來源的第一個項目，HTML 或文字內容包裝集合。 如需確切的語法，jQuery 的方法，請參閱 Docs.jquery.com/Main_Page。
知道您的 HTML
更多您瀏覽的 jQuery，您瞭解的知道您正在使用的詳細 HTML 重要性的更多。 ASP.NET 伺服器控制項通常隱藏這些輸出之 HTML 的結構。 另一方面，伺服器控制項就已簡介可讓開發人員著重宣告式的屬性 (Attribute)，而非 HTML 的詳細資料。 經驗證明，這不一定正確的方法。
今天，想要保留您總的控制之下的 HTML 網頁可及性、 樣式，和一致性以 XHTML。 順便一提，這項事實在細微之間建立連結 jQuery 和 ASP.NET MVC Framework。 並且 ASP.NET MVC 架構包含 jQuery 的最新版本，套件中沒有 coincidence。
換句話說，也值得注意的是使邏輯使用 jQuery 選取器的標記，可能會建立邏輯和 DOM 可能會導致難以維護的應用程式的圖案之間的不必要的聯結。
如果您正在尋找更多有趣的方式使用 JavaScript 的構想，最後，簽出的清單 MSDN 上的 JavaScript 文件：.
您提出問題或意見，請以 Dino 寄 cutting@Microsoft.com.
Dino Esposito 將是 IDesign 和合著 Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press 2008) 的架構設計人員。 基礎的義大利，Dino 都是在世界各地的產業活動經常演講者簡報。 您可以加入在他的部落格 weblogs.asp。 net / despos.