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

  　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 選擇器：

1 2	$( '#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() 方法，代碼以下所示：

1 2 3

$( '#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 > 標籤的選中項：

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

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

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

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

1 2 3

$( '[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)。

　　12. 你如何使用jQuery來提取一個HTML 標記的屬性 例如. 連接的href? (答案)

　　attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先須要利用jQuery選擇及選取到全部的連接或者一個特定的連接，而後你能夠應用attr()方法來得到他們的href屬性的值。下面的代碼會找到頁面中全部的連接並返回href值：

1 2 3

$( 'a' ).each( function (){     alert($( this ).attr( 'href' )); });

　　13. 你如何使用jQuery設置一個屬性值? (答案)

　　前面這個問題以後額外的一個後續問題是，attr()方法和jQuery中的其它方法同樣，能力不止同樣. 若是你在調用attr()的同時帶上一個值 例如. attr(name, value), 這裏name是屬性的名稱，value是屬性的新值。

　　14. jQuery中 detach() 和 remove() 方法的區別是什麼? (答案)

　　儘管 detach() 和 remove() 方法都被用來移除一個DOM元素, 二者之間的主要不一樣在於 detach() 會保持對過去被解除元素的跟蹤, 所以它能夠被取消解除, 而 remove() 方法則會保持過去被移除對象的引用. 你也還能夠看看 用來向DOM中添加元素的 appendTo() 方法.

　　15. 你如何利用jQuery來向一個元素中添加和移除CSS類? (答案)

　　經過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態的改變元素的class屬性能夠很簡單例如. 使用類「.active"來標記它們的未激活和激活狀態，等等.

　　16. 使用 CDN 加載 jQuery 庫的主要優點是什麼 ? (答案)

　　這是一個稍微高級點兒的jQuery問題。好吧，除了報錯節省服務器帶寬以及更快的下載速度這許多的好處以外, 最重要的是，若是瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那麼它就不會再去下載它一次. 所以今時今日，許多公共的網站都將jQuery用於用戶交互和動畫, 若是瀏覽器已經有了下載好的jQuery庫，網站就能有很是好的展現機會。

　　17.  jQuery.get() 和 jQuery.ajax() 方法之間的區別是什麼?

　　ajax() 方法更強大，更具可配置性, 讓你能夠指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

　　18. jQuery 中的方法鏈是什麼？使用方法鏈有什麼好處？

　　方法鏈是對一個方法返回的結果調用另外一個方法，這使得代碼簡潔明瞭，同時因爲只對 DOM 進行了一輪查找，性能方面更加出色。

　　19. 你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？

　　這一般用於阻止事件向上冒泡。

　　20. 哪一種方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

 

　　第一種，由於它直接調用了 JavaScript 引擎。

  　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 選擇器：

1 2	$( '#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() 方法，代碼以下所示：

1 2 3

$( '#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 > 標籤的選中項：

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

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

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

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

1 2 3

$( '[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)。

　　12. 你如何使用jQuery來提取一個HTML 標記的屬性 例如. 連接的href? (答案)

　　attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先須要利用jQuery選擇及選取到全部的連接或者一個特定的連接，而後你能夠應用attr()方法來得到他們的href屬性的值。下面的代碼會找到頁面中全部的連接並返回href值：

1 2 3

$( 'a' ).each( function (){     alert($( this ).attr( 'href' )); });

　　13. 你如何使用jQuery設置一個屬性值? (答案)

　　前面這個問題以後額外的一個後續問題是，attr()方法和jQuery中的其它方法同樣，能力不止同樣. 若是你在調用attr()的同時帶上一個值 例如. attr(name, value), 這裏name是屬性的名稱，value是屬性的新值。

　　14. jQuery中 detach() 和 remove() 方法的區別是什麼? (答案)

　　儘管 detach() 和 remove() 方法都被用來移除一個DOM元素, 二者之間的主要不一樣在於 detach() 會保持對過去被解除元素的跟蹤, 所以它能夠被取消解除, 而 remove() 方法則會保持過去被移除對象的引用. 你也還能夠看看 用來向DOM中添加元素的 appendTo() 方法.

　　15. 你如何利用jQuery來向一個元素中添加和移除CSS類? (答案)

　　經過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態的改變元素的class屬性能夠很簡單例如. 使用類「.active"來標記它們的未激活和激活狀態，等等.

　　16. 使用 CDN 加載 jQuery 庫的主要優點是什麼 ? (答案)

　　這是一個稍微高級點兒的jQuery問題。好吧，除了報錯節省服務器帶寬以及更快的下載速度這許多的好處以外, 最重要的是，若是瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那麼它就不會再去下載它一次. 所以今時今日，許多公共的網站都將jQuery用於用戶交互和動畫, 若是瀏覽器已經有了下載好的jQuery庫，網站就能有很是好的展現機會。

　　17.  jQuery.get() 和 jQuery.ajax() 方法之間的區別是什麼?

　　ajax() 方法更強大，更具可配置性, 讓你能夠指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

　　18. jQuery 中的方法鏈是什麼？使用方法鏈有什麼好處？

　　方法鏈是對一個方法返回的結果調用另外一個方法，這使得代碼簡潔明瞭，同時因爲只對 DOM 進行了一輪查找，性能方面更加出色。

　　19. 你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？

　　這一般用於阻止事件向上冒泡。

　　20. 哪一種方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

　　第一種，由於它直接調用了 JavaScript 引擎。