過去，瀏覽器除了顯示HTML外，很少具有其他功能。因此，早期的Web應用程序需要依賴服務 器端代碼來響應用戶交互並執行數據操作。Web應用程序的交互依賴HTML表單元素和瀏覽器向服務 器發送數據的功能實現。 隨着Web瀏覽器技術的不斷發展，Web應用程序領域也發生了巨變。現代瀏覽器復雜而且功能強 大，提供了各種用於客戶端JavaScript編程的API。如今，純粹由服務器端代碼構成的Web應用程序已 經很少見了，因此，客戶端技術對於創建優秀的Web應用程序至關重要。 最常用的瀏覽器API為DOM API，使用該API可對文檔對象模型（DOM）執行操作。對DOM所做 的更改將在向用戶顯示的HTML中反映出來。因此，任何希望提供客戶端功能的Web應用程序都會在 一定程度上使用DOM API。遺憾的是，DOM API不太好用——它極其繁瑣而且結構不合理；此外，不 同瀏覽器之間在應用DOM API方面也存在一些奇怪的問題及實現差異。 使用JavaScript DOM操作庫對DOM API進行包裝，可以使DOM API更易於使用。其中一個最常用 的庫就是jQuery，Microsoft的ASP.NET Framework中已采用了該庫。本章將簡單介紹jQuery的基本功能。
注意
本章不會深入介紹jQuery，因為jQuery這個主題本身就可以寫一本書了。如果你希望詳細了解jQuery，可以參考"從零開始學習jQuery (一) 開天辟地入門篇"(地址：http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html），請參閱《精通jQuery》一書(下載地址：http://pan.baidu.com/s/1kVRR7qZ），或訪問jquery.com網站。
創建示例項目
為了演示jQuery的用法，使用ASP.NET Empty Web Application 模板新建一個Visual Studio項目 UsingjQuery。這里將使用Web窗體生成HTML，並使用jQuery對其執行操作。本章中的大多數示例都 將使用一個簡單的靜態HTML文件，我們希望強調的是，Web窗體與jQuery能夠和諧共存。在項目中 添加一個新Web窗體Default.aspx，該文件的內容如代碼清單4-1所示。
代碼清單4-1 Default.aspx Web窗體的內容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UsingjQuery.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Summits</title> <link rel="stylesheet" href="Styles.css" /> </head> <body> <h2>Summits</h2> <table id="peaksTable"> <thead><tr><th class="name">Name</th><th>Height (m)</th></tr></thead> <tbody id="tableBody"> <tr><td class="name">Everest</td><td class="height">8848</td></tr> <tr><td class="name">Aconcagua</td><td class="height">6962</td></tr> <tr><td class="name">McKinley</td><td class="height">6194</td></tr> <tr><td class="name">Kilimanjaro</td><td class="height">5895</td></tr> <tr><td class="name">K2</td><td class="height">8611</td></tr> </tbody> </table> <input type="button" value="Delete" /> </body> </html>
這個Web窗體中並沒有代碼片段，這里希望使用靜態HTML來演示基本的jQuery功能。沒有更改 Visual Studio創建的Default.aspx.cs代碼隱藏文件。
注意，Default.aspx文件中使用link元素導入了名為Styles.css的CSS樣式表，該文件的內容如代碼 清單4-2所示。
代碼清單4-2 Styles.css文件的內容
button { margin-top: 5px; } table, td, th { border: thin solid black; border-collapse: collapse; padding: 5px; background-color: lemonchiffon; text-align: left; margin: 10px 0; } .highlight { border: thick solid red; padding: 2px; background-color: lightgray; font-size: larger; }
從Visual Studio的Debug菜單中選擇Start Debugging，即可在瀏覽器中查看HTML和CSS，如圖4-1所示
在示例項目中添加jQuery
Visual Studio集成了NuGet程序包管理器，該管理器可輕松下載並安裝常用的程序包，包括jQuery等 JavaScript庫。NuGet負責管理程序包之間的依賴關系，能夠快速、高效地升級到所需的最新版本的程序包。 從Visual Studio的Project菜單中選擇Manage NuGet Packages（管理NuGet程序包），此時將顯示 NuGet窗口。在左側窗格中選擇Online（聯機）類別，然后在窗口右上角的搜索框中鍵入jQuery。NuGet 將列出jQuery以及其他許多名稱中包含jQuery的程序包。找到主要的jQuery庫，然后單擊Install（安裝） 按鈕，如圖4-2所示。NuGet將下載並安裝最新版本的jQuery庫。
NuGet將在項目中創建一個Scripts文件夾（這是Web窗體存儲JavaScript文件的慣常做法），並在該文件 夾中添加3個新文件，如圖4-3所示。你看到的文件可能會有所不同，因為NuGet會安裝最新版本的jQuery。
jquery-1.8.2.js文件是jQuery庫的調試版本，它包含易讀的函數和變量名，以及經過格式化以便破 譯（調試客戶端代碼的一個重要方式）的代碼。jquery-1.8.2.min.js文件是jQuery庫的微縮版本，將在 最終的應用程序中部署。微縮文件更小，所有格式和有意義的名稱都被刪除，因此難以跟蹤問題。 本章將使用該文件的調試版本，第8章將介紹如何使用“捆綁”功能來優化JavaScript文件的用法， 以及如何自動在調試和微縮版本之間切換。第三個文件jquery-1.8.2.intellisense.js提供了一些信息，便 於讓Visual Studio自動執行在Web窗體文件中的jQuery函數。稍后將介紹這方面的內容。
在Web窗體中添加jQuery
我們需要在Default.aspx文件中添加兩個script元素才能使用jQuery。一個script元素導入jQuery 庫，另一個元素定義或導入利用jQuery的代碼。本章將使用Scripts文件夾中的另一個Default.js腳本文 件來定義代碼。上面提到的兩個script元素如代碼清單4-3所示。
代碼清單4-3 在Default.aspx文件中添加script元素
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UsingjQuery.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Summits</title> <link rel="stylesheet" href="Styles.css" /> <script src="/Scripts/jquery-1.8.2.js"></script> <script src="/Scripts/Default.js"></script> </head> <body> <h2>Summits</h2> <table id="peaksTable"> <thead><tr><th class="name">Name</th><th>Height (m)</th></tr></thead> <tbody id="tableBody"> <tr><td class="name">Everest</td><td class="height">8848</td></tr> <tr><td class="name">Aconcagua</td><td class="height">6962</td></tr> <tr><td class="name">McKinley</td><td class="height">6194</td></tr> <tr><td class="name">Kilimanjaro</td><td class="height">5895</td></tr> <tr><td class="name">K2</td><td class="height">8611</td></tr> </tbody> </table> <input type="button" value="Delete" /> </body> </html>
右鍵單擊Scripts文件夾，然后從彈出式菜單中選擇Add→JavaScript File（JavaScript文件），將 Default.js文件添加到項目中。將項名稱設置為Default，然后單擊OK按鈕創建該文件。
提示：
與編寫靜態HTML頁面時一樣，在Web窗體中添加JavaScript文件的順序非常重要。Default.js
文件將調用由jQuery定義的函數，因此，必須確保jquery-1.8.2.js的script元素出現在Default.js
的script元素之前。
Default.js文件一開始僅在JavaScript文件中添加一行代碼，如代碼清單4-4所示。
從Solution Explorer的Scripts文件夾拖動jquery-1.8.2.js項，然后將其放置到Default.js文件的代碼編輯器上，從而創建了這一行代碼。其中的reference元素允許Visual Studio為jQuery代碼提供代碼完成支持。這段代碼將被自動注釋，因為它不是有效的JavaScript代碼（即便如此，Visual Studio仍會找到 並處理該代碼）。