jQuery 教程 · ZetCode 中文系列教程

# jQuery 教程 > 原文： [https://zetcode.com/web/jquery/](https://zetcode.com/web/jquery/) 在本教程中，我們將學習 jQuery 的基礎知識。我們將展示 jQuery 庫，展示如何下載和包含 jQuery，解釋各種 jQuery 選擇器，展示如何綁定事件，展示各種 jQuery 效果，以及處理異步事件。當我們要創建一個網站時，我們需要使用特定的技術。 HTML 創建網頁的結構。 CSS 負責網頁的外觀。 JavaScript 為網頁帶來了活力。超文本標記語言（HTML），級聯樣式表（CSS）和 JavaScript 構成了萬維網的三項基石技術。 jQuery 是 JavaScript 的抽象；它使使用 JavaScript 的工作更加輕松。 ## HTML 文件一個網站由多個網頁組成。每個網頁都是一個 HTML 文檔。 HTML 文檔是一種文本文檔，其結構由超文本標記語言定義。要創建文檔結構，我們使用 HTML 標簽，例如`<div>`，`<h2>`或`<body>`。 HTML 文檔具有`.html`或`.htm`擴展名。 ![Source of a simple HTML document](https://img.kancloud.cn/8b/2f/8b2f6f4ebe3533076145ca8eca5bb3f5_601x426.jpg) 圖：一個簡單的 HTML 文檔的來源 Web 瀏覽器使我們能夠查看每個 HTML 文檔的 HTML 源。 HTML 文檔由兩部分組成：頭和正文。 HTML 元素以層次結構進行組織-HTML 標記具有其父代，子代和同級兄弟。 ## 文檔對象模型（DOM）文檔對象模型（DOM）是 HTML 文檔的編程接口。它定義了用于操縱文檔結構，樣式和內容的功能。 DOM 將 HTML 文檔表示為節點的樹形結構，其中每個節點都是代表文檔一部分的對象。節點是具有屬性和方法的對象。這些實體可以通過 JavaScript 及其 jQuery 庫進行訪問。 ## jQuery jQuery 是一個 JavaScript 庫，用于處理 DOM。使用 jQuery，我們可以查找，選擇，遍歷和操作 HTML 文檔的各個部分。這些部分也稱為 DOM 元素。 jQuery 是當今使用最廣泛的 JavaScript 庫。據估計，在前 1000 萬個網站中，有三分之二使用了該網站。 jQuery 最初是由 John Resig 創建的。 jQuery 是根據 MIT 許可獲得許可的免費開源軟件。使用 jQuery 進行開發的原則是： * JavaScript 和 HTML 的分離。 * 簡潔明了。 * 消除跨瀏覽器的不兼容性。 * 可擴展性。 ## 選擇 jQuery 庫 jQuery 庫本質上是一個小文件。為了在我們的項目中使用 jQuery，我們可以從項目的[網站](https://jquery.com/download/)上下載文件，或者使用內容分發網絡（CDN）。有幾種選擇。首先，有多個可用的 jQuery 版本。文件名中提到了庫的版本。當前有三個版本分支：1.x，2.x 和 3.x。出于教育目的，最好選擇最新版本的 jQuery 庫。然后，我們需要在庫的生產和開發版本之間進行選擇。生產版本已壓縮，并且在庫名稱中帶有`min`字。壓縮或縮小的版本的大小已減小，但提供相同的功能。開發版本易于閱讀并帶有注釋。 ```js jquery-3.1.1.js jquery-3.1.1.min.js ``` 第一個文件是 jQuery 庫 3.1.1 的開發版本。第二個文件是 jQuery 庫 3.1.1 版的生產版本。此外，還有所謂的庫的瘦版本。精簡版的庫名稱中帶有`slim`字。它們不包括 AJAX 功能，效果和當前不建議使用的代碼。 ```js jquery-3.1.1.slim.js jquery-3.1.1.slim.min.js ``` 第一個文件是 jQuery 庫 3.1.1 的苗條開發版本。第二個文件是 jQuery 庫 3.1.1 的精簡生產版本。在本教程中，將使用 jQuery 3.1.1 的縮小版。 ## 在 HTML 文檔中包含 jQuery 通過鏈接到本地??副本或公共服務器上可用的版本之一，可以將 jQuery 庫包含在文檔中。為了包括 jQuery 庫，我們使用`<script>`標簽。該文件通常位于`</body>`標簽之前，位于文檔的開頭或底部。 ```js <script src="jquery-3.1.1.min.js"></script> ``` 在這種情況下，我們包括 jQuery 庫的本地副本。 ```js <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> ``` 在這里，我們包含來自`code.jquery.com`上公共可用存儲庫的庫。有幾個著名的 jQuery 公共存儲庫。這些存儲庫也稱為內容交付網絡（CDN）。使用 CDN 可以帶來一些性能優勢。 ```js <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> ``` 在這里，我們有 jQuery，Google 和 Microsoft CDN。 ## 選擇文本編輯器一個好的文本編輯器將幫助我們有效地編寫代碼。文本編輯器提供語法高亮顯示，代碼完成，自動縮進等功能。支持 jQuery 的文本編輯器包括括號，Sublime Text，Kwrite，Gedit，Notepad ++，PSPad 或 TextMate。 ![Brackets text editor](https://img.kancloud.cn/c7/e3/c7e333655ffe153db6d85cb9f0634df8_671x518.jpg) 圖：括號文本編輯器上圖顯示了一個在 Brackets 文本編輯器中使用 jQuery 的小型 HTML 文檔。 Brackets 是用于 Web 開發的現代文本編輯器。它是用 JavaScript 編寫的。它是專門為 Web 設計師和前端開發者創建的。 ## 準備好文件后當文檔準備就緒時，即已經構建了它的 DOM 并且可以安全地對其進行操作，jQuery 會觸發`$(document).ready()`事件。我們將 jQuery 代碼放入此事件的處理器中。 ```js $(document).ready(function() { // jQuery code }); $(function() { // jQuery code }); ``` 這些是文檔就緒的事件處理器；兩者是等效的。第二種方法是創建 jQuery 文檔就緒事件處理器的推薦方法。 `simple.html` ```js <html> <head> <title>jQuery simple example</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <h2>Simple example</h2> <script> $(function() { $('body').append("<div>Simple jQuery example</div>"); }); </script> </body> </html> ``` 該示例在`<body>`標簽的末尾附加了`<div>`標簽。 ```js $('body').append("<div>Simple jQuery example</div>"); ``` `$('body')`選擇文檔中的`<body>`標簽。 `append()`方法將`<div>`標簽附加在`<body>`標簽的末尾。 ## 測試與調試瀏覽器包含供開發者進行測試和調試的工具。在 Opera，Firefox 和 Chrome 瀏覽器中，通過 `Ctrl + Shift + I` 啟動開發者控制臺。 ![Developer console](https://img.kancloud.cn/b5/22/b5222a57d76b303700832ef5501f0ec0_592x390.jpg) 圖：開發者控制臺在控制臺窗口中，我們可以看到從`console.log()`方法輸出的錯誤消息。它可用于評估 JavaScript 語句，檢查和記錄對象和屬性。在上圖中，我們可以看到 jQuery `html()`方法的輸出，該方法獲取`<body>`元素的 HTML 代碼。輸出顯示在控制臺窗口中。 ```js <script> $(function() { console.log('Document is ready'); }); </script> ``` `console.log()`方法可用于調試輸出。 ![Syntax error](https://img.kancloud.cn/32/63/3263b5c3d8bd6455f3b3c0fb3f7d9e28_392x107.jpg) 圖：語法錯誤在上圖中，我們可以看到 jQuery 語法錯誤被捕獲并顯示在開發者控制臺窗口中。 ## jQuery 選擇器 jQuery 選擇器用于選擇 HTML 文檔中滿足某些條件的元素。條件可以是它們的名稱，ID，類名稱，屬性或它們的組合。以下是可用選擇器的部分列表： * `$("*")` - 選擇所有元素 * `$("#first")` — 用`id="first`選擇元素 * `$(".intro")` — 選擇帶有`class="intro"`的所有元素 * `$("div")` - 選擇所有`<div>`元素 * `$("h2, div, p")` - 選擇所有`<h2>, <div>, <p>`元素 * `$("li:first")` — 選擇第一個`<li>`元素 * `$("li:last")` — 選擇最后一個`<li>`元素 * `$("li:even")` — 選擇所有偶數`<li>`元素 * `$("li:odd")` - 選擇所有奇數`<li>`元素 * `$(":empty")` - 選擇所有為空的元素 * `$(":focus")` - 選擇當前具有焦點的元素在下面的示例中，我們將使用`:root`選擇器，該選擇器選擇`<html>`標簽。 `root_selector.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery root selector example</title> <meta charset="utf-8"> <style> .mycol { background-color: gray; border: 1px solid gray } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <p> A paragraph. </p> <script> $(function() { $(":root").addClass("mycol"); }); </script> </body> </html> ``` 在示例中，文檔的背景更改為灰色。 ```js $(":root").addClass("mycol"); ``` 使用`:root`選擇器，選擇文檔的根元素，然后使用`addClass()`方法向其中添加一個類。 `selecting_elements.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery selecting elements</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <p>Operating systems:</p> <ul id="mylist" style="width:150px"> <li>Solaris</li> <li>FreeBSD</li> <li>Debian</li> <li>NetBSD</li> <li>Windows</li> <li>Mac OS X</li> </ul> <script> $(function() { $("#mylist").css("border", "1px dashed gray"); $("li:odd").css("color", "blue"); }); </script> </body> </html> ``` 在此示例中，我們有一個操作系統列表。該列表帶有藍色虛線邊框，并且每個奇數元素都有灰色背景。 ```js $("#mylist").css("border", "1px dotted blue"); ``` `$("#mylist")`選擇器選擇 ID 等于`mylist`的標簽。使用`css()`方法，我們可以修改標簽的外觀。 ```js $("li:odd").css("background-color", "gray"); ``` 使用`$("li:odd")`選擇器，我們選擇所有奇數`<li>`標簽，然后使用`css()`方法對其進行修改。 ![Selecting document elements](https://img.kancloud.cn/34/64/3464fe1900733208f4cac6c68f317e34_502x336.jpg) 圖：選擇文檔元素在圖中，我們可以看到列表周圍的虛線邊框和每隔一個列表元素的藍色文本顏色。 ## 鏈接方式 jQuery 允許鏈接方法調用。方法鏈是對 jQuery 對象的 jQuery 方法調用的連續序列。 `chaining.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery chaining methods</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mypanel { width:150px; height:100px; background-color:blue } </style> </head> <body> <div class="mypanel"></div> <script> $(function() { $(".mypanel").hide(1500).show(1500).hide(1500).show(1500); }); </script> </body> </html> ``` 在該示例中，我們有一個顯示和隱藏兩次的面板。用`show()`方法顯示一個面板，用`hide()`方法隱藏一個面板。 ```js $(".mypanel").hide(1500).show(1500).hide(1500).show(1500) ``` 在這里，我們看到了四個方法調用的鏈。每個調用都返回一個 jQuery 對象，我們可以在該對象上調用另一個方法。 ## 獲取和設置內容 `text()`方法獲取匹配元素集中每個元素的組合文本內容（包括它們的后代），或設置匹配元素的文本內容。 `getting_setting_content.html` ```js <html> <head> <title>jQuery getting, setting elements</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <h2>Red car</h2> <h3></h3> <script> $(function() { var cont = $("h2").text(); $("h3").text(cont); }); </script> </body> </html> ``` 在示例中，我們獲取`<h2>`標簽的內容并將其設置為`<h3>`標簽；換句話說，我們將內容從第一個元素復制到第二個元素。 ```js var cont = $("h2").text(); ``` 通過`text()`方法，我們獲得`<h2>`標簽的內容。 ```js $("h3").text(cont); ``` 在這一行中，我們將先前檢索的內容設置為`<h3>`標簽。 ## 綁定事件 `on()`方法將一個或多個事件的事件處理器函數插入到當前選定的元素集。當啟動均勻（例如按鈕單擊）時，將觸發事件處理器。 `event_binding.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery event binding example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mypanel { width:150px; height:100px; background-color:maroon } </style> </head> <body> <button id="btn">Toggle</button> <br> <br> <div class="mypanel"></div> <script> $(function() { $("#btn").on('click', function() { $(".mypanel").slideToggle(2000); }); }); </script> </body> </html> ``` 在示例中，我們將事件處理器綁定到按鈕元素上的`click`事件。 ```js <button id="btn">Toggle</button> ``` 這是觸發點擊事件的按鈕。 ```js <script> $(function() { $("#btn").on('click', function() { $(".mypanel").slideToggle(2000); }); }); </script> ``` 我們為按鈕元素注冊一個`click`事件。該事件觸發一個函數，該函數在`<div>`元素上調用`slideToggle()`方法。 `slideToggle()`方法以滑動方式顯示或隱藏匹配的元素。 ## 鼠標移動事件當鼠標指針移至文檔區域上方時，將觸發鼠標移動事件。事件處理器函數接收一個事件對象，其中包含與事件類型有關的數據。在我們的例子中，它將包含鼠標指針的`x`和`y`坐標。 `mouse_move_event.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery mousemove event</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mypanel { width:250px; height:200px; background-color:maroon } </style> </head> <body> <div class="mypanel"></div> <br> <div id="log"></div> <script> $(function() { $(".mypanel").mousemove(function(e) { var msg = "x: " + e.pageX + " y: " + e.pageY; $("#log").text(msg); }); }); </script> </body> </html> ``` 如果我們將鼠標指針放在`<div>`元素的區域上，則該示例顯示它的`x`和`y`坐標。 ```js <div class="mypanel"></div> ``` 我們將在此元素的區域上監聽鼠標移動事件。 ```js <div id="log"></div> ``` 坐標將顯示在該記錄的`<div>`元素中。 ```js $(".mypanel").mousemove(function(e) { var msg = "x: " + e.pageX + " y: " + e.pageY; $("#log").text(msg); }); ``` 我們將事件處理器綁定到鼠標移動事件。在事件處理器內部，我們使用`pageX`和`pageY`屬性確定`x`和`y`坐標，并使用`text()`方法更新日志記錄元素。 `mousemove()`方法是`on("mousemove", handler)`方法的快捷方式。 ![Mouse move event](https://img.kancloud.cn/01/73/0173126ffb92d4d0db5b76221a9a120d_502x407.jpg) 圖：鼠標移動事件 ## 事件來源事件源是觸發事件的元素。在事件處理器內部，我們可以使用`$(this)`語法引用事件源。 `event_source.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery event source example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mybtn { } </style> </head> <body> <button class="mybtn">Button 1</button> <button class="mybtn">Button 2</button> <button class="mybtn">Button 3</button> <br> <br> <div class="messages"></div> <script> $(function() { $(".mybtn").on('click', function() { var btn_lbl = $(this).text(); $(".messages").text(btn_lbl + " clicked"); }); }); </script> </body> </html> ``` 在示例中，我們有三個按鈕。每個按鈕具有相同的事件處理器。當我們單擊一個按鈕時，會顯示一條消息；它告訴您單擊了哪個按鈕。 ```js <button class="mybtn">Button 1</button> <button class="mybtn">Button 2</button> <button class="mybtn">Button 3</button> ``` 這三個按鈕具有相同的事件處理器。 ```js <script> $(function() { $(".mybtn").on('click', function() { var btn_lbl = $(this).text(); $(".messages").text(btn_lbl + " clicked"); }); }); </script> ``` 類選擇器`$(".mybtn")`選擇所有三個按鈕。我們將`click`事件處理器附加到按鈕上。我們使用`$(this)`構造引用事件源，并使用`text()`方法確定事件的標簽。按鈕的名稱用于構建消息，該消息顯示在下面的`<div>`元素中。 ![Event source](https://img.kancloud.cn/6b/bb/6bbbc7e5a37b3a15ad8934afe8d3a350_502x336.jpg) 圖：事件源在圖中，我們可以看到在按鈕下方顯示的消息中單擊了哪個按鈕。 ## 移除元素 `remove()`方法從 DOM 中刪除匹配的元素集。 `remove_element.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery removing element</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> div { display: flex; align-items: center; justify-content: center; width:150px; height:80px; margin:3px; border: 1px solid gray } </style> </head> <body> <button id="btnf">Remove first</button> <button id="btnl">Remove last</button> <div>Panel 1</div> <div>Panel 2</div> <div>Panel 3</div> <div>Panel 4</div> <div>Panel 5</div> <div>Panel 6</div> <script> $(function() { $('#btnf').click(function() { $('div:first').remove(); }); $('#btnl').click(function() { $('div:last').remove(); }); }); </script> </body> </html> ``` 在示例中，我們有兩個按鈕和六個面板。第一個按鈕刪除第一個面板，第二個按鈕刪除最后一個面板。 ```js $('#btnf').click(function() { $('div:first').remove(); }); ``` `div:first`選擇器選擇第一個`<div>`元素，然后`remove()`方法將其從 DOM 中刪除。 ## jQuery `is()`方法 `is()`方法針對選擇器，元素或 jQuery 對象檢查當前匹配的元素集，如果這些元素中的至少一個與給定參數匹配，則返回`true`。 `condition.html` ```js <!DOCTYPE html> <html> <head> <title>First jQuery example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> div { display: flex; align-items: center; text-align: center; width:150px; height:100px; margin:3px; border: 1px solid gray } </style> </head> <body> <div id="pnl1">Panel 1</div> <div id="pnl2">Panel 2</div> <div id="pnl3">Panel 3</div> <div id="pnl4">Panel 4</div> <script> $(function() { $("div").on('click', function() { if ($(this).is('#pnl3')) { console.log("Cannot hide panel 3"); } else { $(this).hide(2000); } }); }); </script> </body> </html> ``` 在示例中，我們有四個面板。單擊面板上的面板開始消失。第三面板不消失。 ```js <script> $(function() { $("div").on('click', function() { if ($(this).is('#pnl3')) { console.log("Cannot hide panel 3"); } else { $(this).hide(2000); } }); }); </script> ``` `$(this)`語法引用事件源，即我們單擊其上的面板。使用`is()`方法，我們檢查元素是否為面板 3；如果是面板 3，我們會在控制臺上打印一條消息，并且不要將其隱藏。其他面板用`hide()`方法隱藏。 ## 特效在本節中，我們將展示一些基本的 jQuery 效果。 ### jQuery 滑動效果 `slideUp()`方法以向上滑動顯示匹配的元素，而`slideDown()`方法以向下滑動顯示。方法的第一個參數是持續時間；它是一個字符串或數字，確定動畫將運行多長時間。字符串可以是`'slow'`或`'fast'`；默認值為 400 毫秒。 `sliding.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery sliding example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mypanel { width:150px; margin-top:10px; height:100px; background-color:maroon } </style> </head> <body> <button id="btnSlideUp">Slide up</button> <button id="btnSlideDown">Slide down</button> <div class="mypanel"></div> <script> $(function() { $('#btnSlideUp').click(function() { $('.mypanel').slideUp('show'); }); $('#btnSlideDown').click(function() { $('.mypanel').slideDown('show'); }); }); </script> </body> </html> ``` 在示例中，我們有兩個按鈕。一個按鈕將向上滑動面板，另一個按鈕將向下滑動面板。 ```js $('#btnSlideUp').click(function() { $('.mypanel').slideUp('show'); }); ``` `slideUp()`方法以向上滑動的方式為選定的元素設置動畫；該元素將從窗口中消失。 ```js $('#btnSlideDown').click(function() { $('.mypanel').slideDown('show'); }); ``` `slideDown()`方法以向下滑動的方式對元素進行動畫處理，該元素出現在窗口中。 ### `animate()`方法 `animate()`方法對一組 CSS 屬性執行自定義動畫。該方法的第一個參數稱為屬性。它是動畫將朝其移動的 CSS 屬性和值的對象。第二個參數是持續時間。 `animation.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery animation example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mypanel { position: relative; width:150px; margin-top:10px; height:100px; background-color:maroon } </style> </head> <body> <button id="leftBtn">?</button> <button id="rightBtn">?</button> <div class="mypanel"></div> <script> $(function() { $("#rightBtn").click(function() { $(".mypanel").animate({ "left": "+=250px" }, "slow" ); }); $( "#leftBtn" ).click(function(){ $(".mypanel").animate({ "left": "-=250px" }, "slow" ); }); }); </script> </body> </html> ``` 在示例中，我們有兩個按鈕。第一個按鈕將面板向左移動，第二個按鈕將其向右移動。 ```js $("#rightBtn").click(function() { $(".mypanel").animate({ "left": "+=250px" }, "slow" ); }); ``` 這會將面板緩慢向左移動 250 像素。 ```js $( "#leftBtn" ).click(function(){ $(".mypanel").animate({ "left": "-=250px" }, "slow" ); }); ``` 這會將面板緩慢向右移動 250 像素。 ### jQuery 淡入淡出效果 `fadeIn()`方法通過將匹配的元素淡化為不透明來顯示它們。 `fadeOut()`方法通過將匹配的元素淡化為透明來隱藏它們。 `fading.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery fading example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .mypanel { width:150px; margin-top:10px; height:100px; background-color:maroon } </style> </head> <body> <button id="fadeOutBtn">Fade out</button> <button id="fadeInBtn">Fade in</button> <div class="mypanel"></div> <script> $(function() { $('#fadeOutBtn').click(function() { $('.mypanel').fadeOut('slow'); }); $('#fadeInBtn').click(function() { $('.mypanel').fadeIn('slow'); }); }); </script> </body> </html> ``` 在示例中，我們有兩個按鈕。一個按鈕淡入面板；第二個按鈕淡出面板。 ```js $('#fadeOutBtn').click(function() { $('.mypanel').fadeOut('slow'); }); ``` 此函數使用`fadeOut()`方法淡出匹配的元素。 ```js $('#fadeInBtn').click(function() { $('.mypanel').fadeIn('slow'); }); ``` 此函數通過`fadeIn()`方法淡入匹配的元素。 ## jQuery `$.get()`方法 `$.get()`方法使用 HTTP GET 請求從服務器請求數據。該請求是異步 GET 請求。在本節中，我們將創建一個 Java Web 應用。單擊一個按鈕，將 AJAX GET 請求發送到 Java Servlet，該 Java Servlet 會以一條消息進行響應。 `index.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery GET message</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <button id="btn">Get message</button> <span id="log"></span> <script> $(function () { $("#btn").click(function () { $.get("MyServlet", function (data) { $("#log").text(data); }); }); }); </script> </body> </html> ``` 我們有一個按鈕，單擊該按鈕即可發送異步 GET 請求。 ```js $(function () { $("#btn").click(function () { $.get("MyServlet", function (data) { $("#log").text(data); }); }); }); ``` `$.get()`方法的第一個參數是將請求發送到的 URL 字符串。第二個參數是一個回調函數，如果請求成功，則執行該函數。在回調函數內部，我們將返回的數據設置為日記記錄元素。 `MyServlet.java` ```js package com.zetcode.web; import java.io.IOException; import java.io.PrintWriter; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(name = "MyServlet", urlPatterns = {"/MyServlet"}) public class MyServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain;charset=UTF-8"); try (PrintWriter out = response.getWriter()) { Date date = new Date(); out.printf("Message from MyServlet: %s", date); } } } ``` 這是一個響應消息的 Java servlet。該消息包含當前日期。 ![jQuery asynchronous GET request](https://img.kancloud.cn/c4/ed/c4edc67a114a285cee1d4f9856e7e1c1_502x336.jpg) 圖：jQuery 異步 GET 請求單擊按鈕，該按鈕旁邊的日志記錄元素中將顯示一條消息。 ## jQuery `when()`方法 jQuery `when()`方法執行具有異步事件的回調函數。 `showing_hiding.html` ```js <!DOCTYPE html> <html> <head> <title>jQuery showing/hiding elements</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> div { display:flex; align-items:center; text-align:center; width:150px; height:100px; margin:3px; border: 1px solid gray } </style> </head> <body> <button id="btn1">Hide all</button> <div id="pnl1">Panel 1</div> <div id="pnl2">Panel 2</div> <div id="pnl3">Panel 3</div> <div id="pnl4">Panel 4</div> <script> $(function() { $("#btn1").click(function() { var task = $("div").toggle(3000); $.when(task).done(function() { if ($("#btn1").text().match("^Hide")) { $("#btn1").text("Show all"); } else { $("#btn1").text("Hide all"); } }); }); }); </script> </body> </html> ``` 在示例中，我們有一個按鈕來隱藏/顯示所有四個面板。隱藏/顯示元素的過程需要一些時間。任務結束后，按鈕的標簽將相應更改：從全部隱藏到全部顯示，反之亦然。 ```js var task = $("div").toggle(3000); ``` 創建一個新任務；這需要 3 秒鐘才能完成。 `toggle()`方法顯示或隱藏匹配的元素。 ```js $.when(task).done(function() { ``` 任務完成后將調用該函數。 ```js if ($("#btn1").text().match("^Hide")) { $("#btn1").text("Show all"); } else { $("#btn1").text("Hide all"); } ``` 現在，使用正則表達式，我們更改按鈕的標簽。在本教程中，我們使用了 jQuery 庫。您可能也對以下相關教程感興趣： [jQuery 自動完成教程](/articles/jqueryautocomplete/)， [Cheerio 教程](/javascript/cheerio/)，[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 和 [Pyquery 教程](/python/pyquery/)。