題目1：jQuery 能做什么？
jQuery是什么：
官網解釋：jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
簡而言之，jQuery是一個JS庫，可以更簡單，快速的操控頁面元素。
功能：
- 選擇網頁元素
- 改變結果集
- 元素的操作：取值和賦值
- 元素的操作：移動
- 元素的操作：復制、刪除和創建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
DOM能干的，它干的更理解易于簡單，DOM不能干的，它也能干。
題目2： jQuery 對象和 DOM 原生對象有什么區別？如何轉化？
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。DOM對象可以使用原生JS進行操作。
jQuery對象就是通過jQuery包裝DOM對象后產生的對象，jQuery對象是jQuery獨有的，其可以使用jQuery里的方法。但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法，亂使用會報錯。
jQuery對象轉DOM對象：
jQuery對象是一個數據對象，可以通過[index]，get（index）的方法，來得到相應的DOM對象。
$('div')[index];
$('div').get(index);
注意：$（‘div’）.eq（index）返回的還是jQuery對象$（‘div’）.eq（index）[index]是DOM對象
DOM對象轉jquery對象：
DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。
var btn = document.querySelector('button');//DOM對象
$btn = $(btn)；//jQuery對象
題目3：jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
jQuery提供了四種方法進行時間監聽，on，bind，delegate，one（live已經棄用），相應的解除監聽off，unbind，undelegate。
$('a').bind('click', handle);//給$('a')的‘click’事件綁定執行函數
$('a').unbind(['click']);//給$('a')解除所有綁定事件【‘click’事件】
jQuery 掃描文檔找到所有 $(‘a’) 元素，然后給每一個找到的元素的 click 事件綁定處理函數。
$('a').live('click',handle });// $('a')綁定‘click’事件，執行函數
$('a').die('click',handle });// $('a')解除及‘click’事件執行函數
jQuery綁定處理函數到 $(document) 元素，并把 ‘click’ 和 ‘a’ 作為函數的參數。有事件冒泡到document節點的時候，檢查這個事件是不是 click 事件，target element能不能匹配 ‘a’ css選擇器，如果兩個條件都是true，處理函數執行。
$('a', $('#container')[0]).live(...);
live方法也可以綁定到指定的元素（或者說“上下文(context)”）而不用綁定到document.
$('#container').delegate('a', 'click', handle);//$('#container')綁定‘click’事件，執行函數
$('#container').undelegate('a', 'click', handle);//$('#container')解除‘click’事件和執行函數
jQuery掃描文檔找到 $(‘#container’)，綁定處理函數到他的 click 事件，’a’ css選擇器作為函數的參數。當有事件冒泡到 $(‘#container’)，檢查事件是不是 click，并檢查target element是不是匹配css選擇器，如果兩者都符合，執行函數。
one()該方法綁定的事件觸發一次后自動刪除
$('.class').on( events [,selector ] [,data ], handler);//$('.class')綁定事件
$('.class').off（）$('.class')解除事件
on實現事件委托很簡單， '.class'為父元素，on后面括號里的selector 參數為子元素，當‘.class’的事件觸發時，判斷事件來源是否子元素selector，若是，則執行處理函數，從而實現事件委托。
on是最基本的事件綁定方法，bind，delegate，live都是調用on來綁定事件，因此，推薦使用on來綁定事件。
//delegate源碼
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
//live源碼
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
//bind源碼
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
題目4：jQuery 如何展示/隱藏元素？
首先，html中要隱藏元素，無外乎幾種方法。
display：none;//展示形式為none，不占據文檔空間
visibility：hidde；//可見性為hidden，看不見，占據文檔空間
opacity：0；//不透明度為0，即為透明，占據文檔空間
元素位置在窗口之外
jQuery有hide（），fadeOut（），slideDown（或slideUp（））方法都可以達到隱藏元素，對應的原理就是元素的display屬性，opacity屬性和文檔位置。
推薦使用hide（）方法，簡單，無副作用。
$(selector).hide([duration ] [,easing ] [,complete ])；//隱藏元素
$(selector).show( [duration ] [, easing ] [, complete ] );//展示元素
題目5： jQuery 動畫如何使用？
jQuery有幾個簡單的動畫方法
$(selector).hide([duration ] [,easing ] [,complete ])；//隱藏元素
$(selector).show( [duration ] [, easing ] [, complete ] );//展示元素
$(selector).fadeIn( [duration ] [, easing ] [, complete ] )；//淡入
$(selector).fadeOut( [duration ] [, easing ] [, complete ] )；//淡出
$(selector).slideDown( [duration ] [, easing ] [, complete ] )；//下滑
$(selector).slideUp( [duration ] [, easing ] [, complete ] )；//上滑
然而，如此完美的jQuery還有大招---自定義動畫
$(selector).animate( properties [, duration ] [, easing ] [, complete ] )；
animate() 方法執行 CSS 屬性集的自定義動畫。
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。
注釋：使用 "+=" 或 "-=" 來創建相對動畫（relative animations）。
題目6：如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？
$(selector).html([string]);//設置或獲取元素HTML內容
$(selector).text([string]);//設置或獲取元素text內容
html（）和text（）都是讀取兩用的方法，沒有參數時返回元素現有HTML或text內容，有參數時則將參數傳遞為HTML或text。
題目7：如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？
$(selector).val();//設置或獲取input的value值
$(selector).attr();//設置或獲取元素屬性
$(selector).prop();//設置或獲取元素的property
$(selector).css();//設置或獲取元素的property
題目8：使用 jQuery實現如下效果
![]()
題目9：. 使用 jQuery 實現如下效果
[
效果
demo
題目10：實現如下效果
[
Ps:當點擊按鈕時使用如下數據
var products = [
{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂蘭 黃金手 猴哥款',
price: '￥405.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂蘭 黃金轉運珠 猴哥款',
price: '￥100.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂蘭 黃金手鏈 3D猴哥款',
price: '￥45.00'
}];
題目11：模仿視頻6，完成 左右切換的 Tab 效果
效果
demo
