1) 程式碼解釋
解釋下面這行程式碼會做什麼：
|
1 |
$( "div#first, div.first, ol#items > [name$='first']" ) |
答案：該程式碼執行了一個查詢，查詢出任何 id 為 first 的 div 元素，加上所有 class 為 first 的 div 元素，再加上所有 id 為 items 的 ol 元素的子元素，這些子元素的 name 屬性值必須以 first 結尾。這是同時使用多個選擇器的例子。函式會返回一個包含查詢結果的 jQuery 物件。
2）這段程式碼有什麼問題？
下面的程式碼是為某個應用頁面處理所有按鈕點選事件，包括那些之後動態載入的按鈕。
這段程式碼的問題出在哪，如何修復使其對之後動態載入的按鈕也同樣起作用？
|
1 2 3 4 5 6 7 8 9 |
// 所有按鈕的點選事件處理 $( "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()的功能。下面的程式碼可以繫結所有按鈕（包括已存在和將要新增的）的事件處理。
|
1 2 3 4 5 6 7 8 9 |
// 所有按鈕的點選事件處理 $( 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 的官方文件：
|
1 2 3 4 5 6 |
<script src="other_lib.js"></script> <script src="jquery.js"></script> <script> $.noConflict(); // 其它使用 $ 符號的庫程式碼可以直接寫到這 </script> |
或者你也不用 $.noConflict() 方法，改用閉包來來實現。比如：
|
1 2 3 |
(function ($) { // 在閉包的程式碼中，我們明確的知道 $ 代表什麼 } (jQuery)); |
4） 編寫程式碼
下面有一段 HTML:
|
1 |
<div id="expander"></div> |
和一段CSS:
|
1 2 3 4 5 |
div#expander{ width: 100px; height: 100px; background-color: blue; } |
編寫jQuery程式碼，讓 id 為 expander 的 div 元素動起來，用三秒的時間將其從 100 x 100 畫素擴充套件到 200 x 200 畫素。
答案：用 jQuery 可以寫成下面這樣。
|
1 2 3 4 5 6 |
$( "#expander" ).animate( { width: "200px", height: "200px", }, 3000 ); |
5) 方法的鏈式呼叫
什麼事 jQuery 的方法鏈式呼叫？寫一個例子。說說這麼寫有什麼好處？
答案：方法的鏈式呼叫是 jQuery 的一個功能，允許在 jQuery 選擇器後面以單個程式碼句的方式順序執行多個方法。
無鏈式呼叫：
|
1 2 3 |
$( "button#play-movie" ).on( "click", playMovie ); $( "button#play-movie" ).css( "background-color", "orange" ); $( "button#play-movie" ).show(); |
鏈式呼叫：
|
1 2 3 |
$( "button#play-movie" ).on( "click", playMovie ) .css( "background-color", "orange" ) .show(); |
我們發現用了鏈式呼叫後，僅需要選擇一次按鈕，如果沒有鏈式呼叫，每次 jQuery 都要重新查詢整個DOM，找到按鈕後執行相應方法。所以，除了能夠精簡程式碼，jQuery 的鏈式呼叫還潛在地提高了程式執行的效能。
注意：準確地說，鏈式呼叫並不是避免重複查詢 DOM 的唯一方式。也可以把 DOM 查詢後的結果賦值給一個變數（例如：上面的例子中，可以把 $(“button#play-movie”) 賦值給變數，然後用變數呼叫 on()、css() 和 show() 方法）。但話說回來，鏈式操作仍然是更簡潔高效的的選擇，並且不需要把結果快取到區域性變數中。
6）解釋這段程式碼
解釋下面的程式碼在做什麼事：
|
1 |
$( "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) 下面兩行程式碼哪個更高效？ 回答並解釋。
|
1 |
document.getElementById( "logo" ); |
或
|
1 |
$( "#logo" ); |
答案：第一行純 Javascript 程式碼更高效並且速度更快，執行第二行的jQuery 程式碼時，最終會觸發呼叫 Javascript 的版本。
jQuery 是基於 Javascript 構建的，把眾多方法封裝隱藏後使得 DOM 操作更簡單，代價就是部分效能的損失。 記住這點很重要，jQuery 並不總是比原生的 Javascript 好。 每次決定是否使用 jQuery 的時候一定要想清楚它能否真正為你的專案帶來便利。
9) 對比 event.preventDefault() 和 event.stopPropagation()
解釋並對比 event.preventDefault() 和 event.stopPropagation() 的用法。舉個例子。
回答：event.stopPropagation() 方法在事件傳播鏈中阻止事件冒泡，而 event.preventDefault() 只是在事件發生時阻斷瀏覽器的預設響應，但事件仍然會向上傳遞。
舉個例子，觀察下面的程式碼片段：
|
1 2 3 4 5 6 7 8 9 10 |
// 這個例子中, 一個 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”結尾。通過下面的選擇器可以實現。
|
1 |
$("[id$='txtTitle']") |
如果需要的元素必須是div，並且 ID 以“textTitle”結尾，選擇器應該是這樣的：
|
1 |
$("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 元素，顯示的開始和結束時間相差多少？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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() 方法會更有用。