關於 jquery 的常用面試題

標籤：xhtml   連續   foo   play   range   time   getjson   .ajax   defer   

1) 代碼解釋

 

解釋下面這行代碼會做什麼：

 

$( "div#first, div.first, ol#items > [name$=‘first‘]" )

 

答案：該代碼執行了一個查詢，查詢出任何 id 為 first 的 div 元素，加上所有 class 為 first 的 div 元素，再加上所有 id 為 items 的 ol 元素的子項目，這些子項目的 name 屬性值必須以 first 結尾。這是同時使用多個選取器的例子。函數會返回一個包含查詢結果的 jQuery 對象。

 

2）這段代碼有什麼問題？

 

下面的代碼是為某個應用頁面處理所有按鈕點擊事件，包括那些之後動態載入的按鈕。

 

這段代碼的問題出在哪，如何修複使其對之後動態載入的按鈕也同樣起作用？

 

// 所有按鈕的點擊事件處理

$( "button" ).bind( "click", function() {

alert( "Button Clicked!" )

});

 

/* ... 一段時間後... */

 

// 動態將別的按鈕添加到頁面

$( "html" ).append( "<button>Click Alert!</button>" );

 

答案：在 bind() 方法之後動態添加的按鈕關聯不了點擊事件。這是因為 bind() 繫結元素的事件處理時，必須保證該元素當時就已經存在。

 

解決此問題的辦法是，利用 “事件冒泡” 的方式來綁定現存及將要添加的元素。以前可以用 live() 方法替換 bind() 方法。但 jQuery 1.7 版後 live() 方法被廢棄了。delegate() 方法和 live() 方法的工作方式類似，而且可以控制DOM事件的冒泡層級。

 

不過，最推薦的方式是使用 on()方法，該方法可利用文法變換，實現所有 bind()、live()、delegate()的功能。下面的代碼可以綁定所有按鈕（包括已存在和將要添加的）的事件處理。

 

// 所有按鈕的點擊事件處理

$( document ).on( "click", "button", function() {

alert( "Button Clicked!" )

});

 

/* ... 一段時間後... */

 

// 動態將別的按鈕添加到頁面

$( "html" ).append( "<button>Click Alert!</button>" );

 

3) $ 符號

 

jQuery 中的 $ 符號是怎麼回事？ 它是什麼，有什麼作用？

 

還有，如何讓 jQuery 與其它也用 $ 命名的 Javascript 架構聯合使用？如果這兩個問題都回答會有獎勵。

 

答案： 在 Javascript 中 $ 符號並沒有什麼特殊意義，可以隨意用於變數命名。在 jQuery中，$ 僅僅是用來簡寫 jQuery 對象以及 jQuery() 函數。

 

但是，jQuery 並沒有將 $ 符號獨佔，所以當你想將 jQuery 與其它使用 $ 的 JS 庫聯合使用時，會遭遇命名衝突的問題。jQuery 提供了 jQuery.noConflict() 方法解決這個問題。調用完這個方法後，必須使用更底層的變數名 “jQuery” 來引用 jQuery對象及函數。

 

下面的例子來自 jQuery 的官方文檔：

 

 

或者你也不用 $.noConflict() 方法，改用閉包來來實現。比如：

 

(function ($) {

// 在閉包的代碼中，我們明確的知道 $ 代表什麼

} (jQuery));

 

4） 編寫代碼

 

下面有一段 HTML:

 

XHTML

 

<div id="expander"></div>

 

和一段CSS:

 

div#expander{

width: 100px;

height: 100px;

background-color: blue;

}

 

編寫jQuery代碼，讓 id 為 expander 的 div 元素動起來，用三秒的時間將其從 100 x 100 像素擴充到 200 x 200 像素。

 

答案：用 jQuery 可以寫成下面這樣。

 

$( "#expander" ).animate(

{

width: "200px",

height: "200px",

},

3000 );

 

5) 方法的鏈式調用

 

什麼事 jQuery 的方法鏈式調用？寫一個例子。說說這麼寫有什麼好處？

 

答案：方法的鏈式調用是 jQuery 的一個功能，允許在 jQuery 選取器後面以單個代碼句的方式順序執行多個方法。

 

無鏈式調用：

 

$( "button#play-movie" ).on( "click", playMovie );

$( "button#play-movie" ).css( "background-color", "orange" );

$( "button#play-movie" ).show();

 

鏈式調用：

 

$( "button#play-movie" ).on( "click", playMovie )

.css( "background-color", "orange" )

.show();

 

我們發現用了鏈式調用後，僅需要選擇一次按鈕，如果沒有鏈式調用，每次 jQuery 都要重新尋找整個DOM，找到按鈕後執行相應方法。所以，除了能夠精簡代碼，jQuery 的鏈式調用還潛在地提高了程式執行的效能。

 

注意：準確地說，鏈式調用並不是避免重複查詢 DOM 的唯一方式。也可以把 DOM 查詢後的結果賦值給一個變數（例如：上面的例子中，可以把 $(“button#play-movie”) 賦值給變數，然後用變數調用 on()、css() 和 show() 方法）。但話說回來，鏈式操作仍然是更簡潔高效的的選擇，並且不需要把結果緩衝到局部變數中。

 

6）解釋這段代碼

 

解釋下面的代碼在做什麼事：

 

$( "div" ).css( "width", "300px" ).add( "p" ).css( "background-color", "blue" );

 

答案：這段代碼通過鏈式調用完成了很多工作。首先，選擇所有 div 元素並且將它們的 CSS 寬度設定為 300像素。然後，在元素內部添加了 p 元素，最後將 div 元素和 p元素的 CSS 背景顏色設定為藍色。

 

7）對比 jQuery.get() 和 jQuery.ajax() 方法

 

jQuery.get() 方法和 jQuery.ajax() 方法有什麼不同？

 

回答：jQuery.ajax() 是 jQuery提供的最全面的 Ajax 要求方法。它允許建立高度定製的Ajax請求，通過選項可以設定響應時間長度，處理錯誤，決定阻塞（同步）請求還是非阻塞（非同步）請求，服務端響應資料格式，還有更多其它選項。

 

jQuery.get() 是在內部封裝了 jQuery.ajax() 方法的快捷版本，用於擷取簡單資訊的 Ajax 請求。jQuery 還提供了其它常用 Ajax 請求的預設方法，比如 jQuery.post()、jQuery.getScript() 和 jQuery.getJSON()。

 

8) 下面兩行代碼哪個更高效？ 回答並解釋。

 

document.getElementById( "logo" );

 

或

 

$( "#logo" );

 

答案：第一行純 Javascript 代碼更高效並且速度更快，執行第二行的jQuery 代碼時，最終會觸發調用 Javascript 的版本。

 

jQuery 是基於 Javascript 構建的，把眾多方法封裝隱藏後使得 DOM 操作更簡單，代價就是部分效能的損失。 記住這點很重要，jQuery 並不總是比原生的 Javascript 好。 每次決定是否使用 jQuery 的時候一定要想清楚它能否真正為你的項目帶來便利。

 

9) 對比 event.preventDefault() 和 event.stopPropagation()

 

解釋並對比 event.preventDefault() 和 event.stopPropagation() 的用法。舉個例子。

 

回答：event.stopPropagation() 方法在事件傳播鏈中阻止事件冒泡，而 event.preventDefault() 只是在事件發生時阻斷瀏覽器的預設響應，但事件仍然會向上傳遞。

 

舉個例子，觀察下面的程式碼片段：

 

// 這個例子中, 一個 id 是 ‘foo‘ 的 div 包含了一個 id 是 ‘bar‘ 的 button

 

$("#foo").click(function() {

// div ‘foo‘ 上的滑鼠點擊

});

 

$("#bar").click(function(e) {

// button ‘bar‘ 上的滑鼠點擊

e.stopPropagation();

});

 

由於按鈕的點擊處理內部調用了 stopPropagation() 方法，這個事件永遠不會傳遞到 div ，所以 div 的點擊事件處理不會被觸發。它能夠有效阻止父元素捕獲子項目的事件。

 

相反，如果你把剛才調用的 stopPropagation() 替換成 preventDefault()，只有瀏覽器的預設響應會被阻止，但是 div 的點擊事件處裡仍然會被觸發。

 

（注意：儘管 stopPropagation() 和 preventDefault() 方法常應用於 jQuery 的事件處理，它們同樣適用於原生的 Javascript）。

 

10) 你瞭解選取器嗎？

 

用什麼選取器能夠得到 ID 符合某個特殊尾碼的所有元素？還有，如何通過修改選取器得到 ID 僅包含這個尾碼的所有 div 元素？ 舉一個例子。

 

答案：假設你想得到元素的 ID 以“textTitle”結尾。通過下面的選取器可以實現。

 

$("[id$=‘txtTitle‘]")

 

如果需要的元素必須是div，並且 ID 以“textTitle”結尾，選取器應該是這樣的：

 

$("div[id$=‘txtTitle‘]")

 

11) 返回 false

 

在下面三種情況下返回 false 會出現什麼樣的結果？（a）jQuery 事件處理， （b） 超連結標籤的原生 Javascript onclick 事件處理，（c）非超連結標籤（例如： div，button等）的原生 Javascript onclick 事件處理。

 

答案：（a）在 jQuery 事件處理中返回 false 相當於 jQuery 的 event 對象連續調用了 preventDefault() 和 stopPropagation() 方法。

 

（b） 在超連結標籤的原生 Javascript onclick 事件處理中返回 false 會阻止瀏覽器預設的地址導航，並且阻止了DOM事件的冒泡傳遞。

 

（c） 在非超連結標籤（例如： div，button等）的原生 Javascript onclick 事件處理中返回 false 不會起任何作用。

 

12) .clone() 方法

 

jQuery 提供了一個非常有用的 .clone() 方法用於對指定元素進行深拷貝。

 

回答下面的問題

 

1. 這裡的“深拷貝”是什麼意思?

 

答案： .clone() 方法為一組元素執行深拷貝，意味著拷貝這些元素的同時，對其所有子項目和 text 節點也進行拷貝。

 

2. 深拷貝有哪些例外情況？如何去控制這些情況？

 

答案： 一般來說：

 

對象和數組中的元素資料不會被拷貝，複製元素和原始元素共用同一份資料。要深拷貝所有資料，你需要“手動”操作每一個元素。任何綁定原始元素的事件處理也不會被拷貝到複製元素上。可以將 withDataAndEvents 參數設定為 true 來強制所有的事件處理都會被拷貝到新元素上。

 

在 jQuery 1.4 中，所有元素所包含的資料（通過.data()方法綁定）同樣會拷貝到新元素上。

 

到了 jQuery 1.5， withDataAndEvents 連同增強 deepWithDataAndEvents 參數可以為所有子項目拷貝事件及資料。

 

3. 使用 clone()方法有什麼潛在的陷阱？（提示：元素有什麼屬性，是你不願複製的？）

 

答案：使用 .clone() 方法會有一個潛在的問題，就是產生了一堆 id 重複的元素，但 id 應該是唯一的。所以，如果複製的元素含有 id 屬性，務必要記住在 DOM插入這個複製元素前修改其 id 。

 

13) 構造 .promise()

 

解釋 jQuery 中的 .promise() 方法，包括如何使用及為何要使用它。

 

請注意下面這段代碼。如果頁面中有 5 個 div 元素，顯示的開始和結束時間相差多少？

 

function getMinsSecs() {

var dt = new Date();

return dt.getMinutes()+":"+dt.getSeconds();

}

 

$( "input" ).on( "click", function() {

$( "p" ).append( "Start time: " + getMinsSecs() + "<br />" );

$( "div" ).each(function( i ) {

$( this ).fadeOut( 1000 * ( i * 2 ) );

});

$( "div" ).promise().done(function() {

$( "p" ).append( "End time: " + getMinsSecs() + "<br />" );

});

});

 

答案：.promise() 方法返回一個動態產生的 Promise 對象，用來受理所有特定類型的操作的集合綁定、排隊與否、是否已完成。

 

這個方法有兩個可選的參數：

 

type – 預設值是 “fx”, 這意味著返回被受理 Promise 對象的時機，是在所有被選中元素的動畫都完成時發生的。

target – 如果提供target參數，.promise()在該參數上添加方法，然後返回這個對象，而不是建立一個新的。

根據上面的範例程式碼，開始和結束時間間隔將會顯示為 10 秒。 這是由於 .promise() 會等待所有 div 動畫（在這個例子，是所有的 faseOut() 調用）完成，最後一個將會在動畫開始後的 10 秒完成 （ 5*2 秒）

 

14) 中斷 promise

 

在 jQuery 中如何正確地在元素的 Promise 對象受理之前將其從 DOM 移除？

 

答案：jQuery返回的 Promise 關聯著 Deferred 對象，通過 .data() 儲存在該元素上。一旦 .remove() 方法移除了元素，也就移除了該元素的所有資料，這會使元素中任何未受理的 Promise 處理中斷。

 

所以，如果要在一個元素的 Promise 對象受理之前將其從 DOM 移除， 改用 .detach() 方法，隨後在 Promise 受理完成時調用 .removeData()。

 

15) .detach() 和 .remove() 方法

 

解釋 jQuery 中的 .detach() 和 .remove() 方法有何不同？

 

答案：.detach() 和 .remove() 方法基本相同，唯一不同是 .detach() 會保持移除元素關聯的所有 jQuery 資料，而 .remove() 方法則不會。如果移除的元素在將來可能重新插入 DOM ，.detach() 方法會更有用。

關於 jquery 的常用面試題（轉）