20個最常見的jQuery面試問題及答案

毫無疑問，jQuery給了JavaScript急需的提振，這是一門如此有用，但同時總是常常被低估的語言. 在 jQuery 粉墨登場之前，我們曾經會寫出冗長的JavaScript代碼，不僅僅為更大型的應用程序，有時即使是更小的應用程序也要如此. 那種代碼常常是既難以閱讀又難以維護的.

在使用這個優秀的庫之前寫過原生的JavaScript，僅僅在用過它的一個月之后，我就能意識到jQuery的真正力量. 鑒于它的巨大人氣，有關jQuery的面試問題，以及有關HTML和JavaScript的數量在任何web開發者面試中有所增加. 因為 jQuery 相對較新，大多數面試所涉及的問題都是圍繞核心的 jQuery 庫的，包括選擇器, DOM 操作 以及 jQuery 基礎.

在本篇文章中，我要向 HTML 和 JavaScript 開發人員分享 20 個在不同面試遇到的 jQuery 問題。這里面的一些問題也許同樣會在那些要求同時進行服務端(Spring，Servlet 和 JSP)和客戶端(HTML，CSS，JavaScript 和 jQuery)的開發 Java Web 開發面試中涉及。

如果你正要去面試一個職位，它需要你擁有多項技能，比如：Java、jQuery，它并不是希望你明白jQuery每一個細微的細節，或對其有全面的了解，但是如果你是要面試一個真正的客戶端開發職位，你就需要積累更多高級的有技巧性的jQuery問題，而不限于本文列舉的這些問題。不過，你可以通過本文來快速的溫習那些jQuery面試中經常被提到的問題，而且它們大多也適用于有2到5年經驗的web開發人員，特別是Java領域。

jQuery 面試問題和答案

JavaScript 是客戶端腳本的標準語言，而 jQuery 使得編寫 JavaScript 更加簡單。你可以只用寫幾行的jQuery 代碼就能實現更多的東西. 它是最常被用到的 JavaScript 庫之一，并且現在已經很少有不用jQuery 而使用原生 JavaScript 的新項目了。這對于作為一個 Java web 開發者的你而言意味著你會在一場Java web開發面試中發現許多jQuery的面試問題.

早些時候，絕大部分都是 HTTP, HTML, CSS 以及 JavaScript，但最近開始，除了 JavaScript 基礎之外，人們也希望知道你是否熟悉 jQuery。這16個jQuery的問題是為web開發者準備的，且也能夠非常方便你在參加一次電話或者視頻一輪的面試之前糾正一些關鍵的概念。如果你是 jQuery 新手，那么它也能夠幫助你更加好的理解基礎知識，并激勵你去發現更多東西。

1. jQuery 庫中的 $() 是什么？（答案如下）

$() 函數是 jQuery() 函數的別稱，乍一看這很怪異，還使 jQuery 代碼晦澀難懂。一旦你適應了，你會愛上它的簡潔。$() 函數用于將任何對象包裹成 jQuery 對象，接著你就被允許調用定義在 jQuery 對象上的多個不同方法。你甚至可以將一個選擇器字符串傳入 $() 函數，它會返回一個包含所有匹配的 DOM 元素數組的 jQuery 對象。這個問題我已經見過好幾次被提及，盡管它非常基礎，它經常被用來區分一個開發人員是否了解 jQuery。

2. 網頁上有 5 個 <div> 元素，如何使用 jQuery來選擇它們？（答案）

另一個重要的 jQuery 問題是基于選擇器的。jQuery 支持不同類型的選擇器，例如 ID 選擇器、class 選擇器、標簽選擇器。鑒于這個問題沒提到 ID 和 class，你可以用標簽選擇器來選擇所有的 div 元素。jQuery 代碼：$("div")，這樣會返回一個包含所有 5 個 div 標簽的 jQuery 對象。更詳細的解答參見上面鏈接的文章。

3. jQuery 里的 ID 選擇器和 class 選擇器有何不同？（答案）

如果你用過 CSS，你也許就知道 ID 選擇器和 class 選擇器之間的差異，jQuery 也同樣如此。ID 選擇器使用 ID 來選擇元素，比如 #element1，而 class 選擇器使用 CSS class 來選擇元素。當你只需要選擇一個元素時，使用 ID 選擇器，而如果你想要選擇一組具有相同 CSS class 的元素，就要用 class 選擇器。在面試過程中，你有很大幾率會被要求使用 ID 選擇器和 class 選擇器來寫代碼。下面的 jQuery 代碼使用了 ID 選擇器和 class 選擇器：

$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.

正如你所見，從語法角度來說，ID 選擇器和 class 選擇器的另一個不同之處是，前者用字符”#”而后者用字符”.”。更詳細的分析和討論參見上面的答案鏈接。

4. 如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？

這是一個事件處理問題。jQuery為按鈕點擊之類的事件提供了很好的支持。你可以通過以下代碼去隱藏一個通過ID或class定位到的圖片。你需要知道如何為按鈕設置事件并執行hide() 方法，代碼如下所示：

$('#ButtonToClick').click(function(){
  $('#ImageToHide').hide();
});

我喜歡這個問題，因為很貼近實際使用，代碼也不復雜。

5. $(document).ready() 是個什么函數？為什么要用它？(answer)

這個問題很重要，并且常常被問到。 ready() 函數用于在文檔進入ready狀態時執行代碼。當DOM 完全加載（例如HTML被完全解析DOM樹構建完成時），jQuery允許你執行代碼。使用$(document).ready()的最大好處在于它適用于所有瀏覽器，jQuery幫你解決了跨瀏覽器的難題。需要進一步了解的用戶可以點擊 answer鏈接查看詳細討論。

6. JavaScript window.onload 事件和 jQuery ready 函數有何不同？（答案）

這個問答是緊接著上一個的。JavaScript window.onload 事件和 jQuery ready 函數之間的主要區別是，前者除了要等待 DOM 被創建還要等到包括大型圖片、音頻、視頻在內的所有外部資源都完全加載。如果加載圖片和媒體內容花費了大量時間，用戶就會感受到定義在 window.onload 事件上的代碼在執行時有明顯的延遲。

另一方面，jQuery ready() 函數只需對 DOM 樹的等待，而無需對圖像或外部資源加載的等待，從而執行起來更快。使用 jQuery $(document).ready() 的另一個優勢是你可以在網頁里多次使用它，瀏覽器會按它們在 HTML 頁面里出現的順序執行它們，相反對于 onload 技術而言，只能在單一函數里使用。鑒于這個好處，用 jQuery ready() 函數比用 JavaScript window.onload 事件要更好些。

7. 如何找到所有 HTML select 標簽的選中項？（答案如下）

這是面試里比較棘手的 jQuery 問題之一。這是個基礎的問題，但是別期望每個 jQuery 初學者都知道它。你能用下面的 jQuery 選擇器獲取所有具備 multiple=true 的 <select > 標簽的選中項：

$('[name=NameOfSelectedTag] :selected')

這段代碼結合使用了屬性選擇器和 :selected 選擇器，結果只返回被選中的選項。你可按需修改它，比如用 id 屬性而不是 name 屬性來獲取 <select> 標簽。

8. jQuery 里的 each() 是什么函數？你是如何使用它的？（答案如下）

each() 函數就像是 Java 里的一個 Iterator，它允許你遍歷一個元素集合。你可以傳一個函數給 each() 方法，被調用的 jQuery 對象會在其每個元素上執行傳入的函數。有時這個問題會緊接著上面一個問題，舉個例子，如何在 alert 框里顯示所有選中項。我們可以用上面的選擇器代碼找出所有選中項，然后我們在 alert 框中用 each() 方法來一個個打印它們，代碼如下：

$('[name=NameOfSelectedTag] :selected').each(function(selected) {
  alert($(selected).text());
});

其中 text() 方法返回選項的文本。

9. 你是如何將一個 HTML 元素添加到 DOM 樹中的？（答案如下）

你可以用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中。這是 jQuery 提供的眾多操控 DOM 的方法中的一個。你可以通過 appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。

10. 你能用 jQuery 代碼選擇所有在段落內部的超鏈接嗎？（答案略）

這是另一個關于選擇器的 jQuery 面試題。就像其他問題那樣，只需一行 jQuery 代碼就能搞定。你可以使用下面這個 jQuery 代碼片段來選擇所有嵌套在段落（<p>標簽）內部的超鏈接（<a>標簽）……

11. $(this) 和 this 關鍵字在 jQuery 中有何不同？（答案如下）

這對于很多 jQuery 初學者來說是一個棘手的問題，其實是個簡單的問題。$(this) 返回一個 jQuery 對象，你可以對它調用多個 jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。而 this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。