jQuery 面試問題和答案
1. jQuery 庫中的 $() 是什么？
$() 函數是 jQuery() 函數的別稱，$() 函數用於將任何對象包裹成 jQuery 對象，接着你就被允許調用定義在 jQuery 對象上的多個不同方法。你甚至可以將一個選擇器字符串傳入 $() 函數，它會返回一個包含所有匹配的 DOM 元素數組的 jQuery 對象。
2. 如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？
這是一個事件處理問題。jQuery為按鈕點擊之類的事件提供了很好的支持。你可以通過以下代碼去隱藏一個通過ID或class定位到的圖片。你需要知道如何為按鈕設置事件並執行hide() 方法，代碼如下所示：
1 |
$('#ButtonToClick').click(function(){ |
2 |
$('#ImageToHide').hide(); |
3 |
}); |
我喜歡這個問題，因為很貼近實際使用，代碼也不復雜。
3. $(document).ready() 是個什么函數？為什么要用它？
ready() 函數用於在文檔進入ready狀態時執行代碼。當DOM 完全加載（例如HTML被完全解析DOM樹構建完成時），jQuery允許你執行代碼。使用$(document).ready()的最大好處在於它適用於所有瀏覽器，jQuery幫你解決了跨瀏覽器的難題。需要進一步了解的用戶可以點擊 answer鏈接查看詳細討論。
4. 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 事件要更好些。
5. 如何找到所有 HTML select 標簽的選中項？
用下面的 jQuery 選擇器獲取所有具備 multiple=true 的 <select > 標簽的選中項：
1 |
$('[name=NameOfSelectedTag] :selected') |
這段代碼結合使用了屬性選擇器和 :selected 選擇器，結果只返回被選中的選項。你可按需修改它，比如用 id 屬性而不是 name 屬性來獲取 <select> 標簽。
6. jQuery 里的 each() 是什么函數？你是如何使用它的？
each() 函數就像是 Java 里的一個 Iterator，它允許你遍歷一個元素集合。你可以傳一個函數給 each() 方法，被調用的 jQuery 對象會在其每個元素上執行傳入的函數。有時這個問題會緊接着上面一個問題，舉個例子，如何在 alert 框里顯示所有選中項。我們可以用上面的選擇器代碼找出所有選中項，然后我們在 alert 框中用 each() 方法來一個個打印它們，代碼如下：
1 |
$('[name=NameOfSelectedTag] :selected').each(function(selected) { |
2 |
alert($(selected).text()); |
3 |
}); |
其中 text() 方法返回選項的文本。
7. 你是如何將一個 HTML 元素添加到 DOM 樹中的？
你可以用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中。這是 jQuery 提供的眾多操控 DOM 的方法中的一個。你可以通過 appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。
8. $(this) 和 this 關鍵字在 jQuery 中有何不同？
這對於很多 jQuery 初學者來說是一個棘手的問題，其實是個簡單的問題。$(this) 返回一個 jQuery 對象，你可以對它調用多個 jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。而 this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。
9. 你如何使用jQuery來提取一個HTML 標記的屬性 例如. 鏈接的href?
attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先需要利用jQuery選擇及選取到所有的鏈接或者一個特定的鏈接，然后你可以應用attr()方法來獲得他們的href屬性的值。下面的代碼會找到頁面中所有的鏈接並返回href值：
1 |
$('a').each(function(){ |
2 |
alert($(this).attr('href')); |
3 |
}); |
10. 你如何使用jQuery設置一個屬性值?
前面這個問題之后額外的一個后續問題是，attr()方法和jQuery中的其它方法一樣，能力不止一樣. 如果你在調用attr()的同時帶上一個值 例如. attr(name, value), 這里name是屬性的名稱，value是屬性的新值。
11. jQuery中 detach() 和 remove() 方法的區別是什么?
盡管 detach() 和 remove() 方法都被用來移除一個DOM元素, 兩者之間的主要不同在於 detach() 會保持對過去被解除元素的跟蹤, 因此它可以被取消解除, 而 remove() 方法則會保持過去被移除對象的引用. 你也還可以看看 用來向DOM中添加元素的 appendTo() 方法.
12. 你如何利用jQuery來向一個元素中添加和移除CSS類?
通過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態的改變元素的class屬性可以很簡單例如. 使用類“.active"來標記它們的未激活和激活狀態，等等.
13. 使用CDN加載 jQuery 庫的主要優勢是什么 ?
除了報錯節省服務器帶寬以及更快的下載速度這許多的好處之外, 最重要的是，如果瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那么它就不會再去下載它一次。 因此今時今日，許多公共的網站都將jQuery用於用戶交互和動畫，如果瀏覽器已經有了下載好的jQuery庫，網站就能有非常好的展示機會。
14. jQuery.get() 和 jQuery.ajax() 方法之間的區別是什么?
ajax() 方法更強大，更具可配置性, 讓你可以指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。
15. jQuery 中的方法鏈是什么？使用方法鏈有什么好處？
方法鏈是對一個方法返回的結果調用另一個方法，這使得代碼簡潔明了，同時由於只對 DOM 進行了一輪查找，性能方面更加出色。
16. 你要是在一個 jQuery 事件處理程序里返回了 false 會怎樣？
這通常用於阻止事件向上冒泡。
17. 哪種方式更高效：document.getElementbyId("myId") 還是 $("#myId")？
第一種，因為它直接調用了 JavaScript 引擎。