1： jQuery 能做什么？
- 選擇網頁元素
- 改變結果集
- 元素的操作：取值和賦值
- 元素的操作：移動
- 元素的操作：復制、刪除和創建
- 工具方法
- 事件操作
- 特殊效果（動畫效果）
- AJAX
2： jQuery 對象和 DOM 原生對象有什么區別？如何轉化？
- jQuery 對象轉化成DOM 原生對象：可以通過類數組下標的獲取方式或者get方法獲取指定index的DOM對象，如：
$('wrap')[0]，即實現將jQuery 對象轉化DOM 原生對象。 - DOM 原生對象轉化jQuery 對象：用
$()包裹DOM對象，如：$(DOM對象)即可實現DOM 原生對象轉化成jQuery 對象。
3：jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
- bind：為每個匹配元素的特定事件綁定事件處理函數。（jQuery 3.0中已棄用此方法）
//當每個段落被點擊的時候，彈出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
- unbind：bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。如果沒有參數，則刪除所有綁定的事件。如果提供了事件類型作為參數，則只刪除該類型的綁定事件。（jQuery 3.0中已棄用此方法）
//把所有段落的所有事件取消綁定
$("p").unbind()
- delegate：指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。（jQuery 3.0中已棄用此方法）
//當點擊鼠標時，隱藏或顯示 p 元素：
<div style="background-color:red">
<p>這是一個段落。</p>
<button>請點擊這里</button>
</div>
<scirpt>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
</scirpt>
- live：jQuery 給所有匹配的元素附加一個事件處理函數，即使這個元素是以后再添加進來的也有效。
//把所有段落的所有事件取消綁定
<body>
<div class="clickme">Click here</div>
</body>
<scirpt>
$('.clickme').live('click', function() {
alert("Live handler called.");
});
</scirpt>
//然后再添加一個新元素：
$('body').append('<div class="clickme">Another target</div>');
//然后再點擊新增的元素，他依然能夠觸發事件處理函數。
- on：在選擇元素上綁定一個或多個事件的事件處理函數。
//當每個段落被點擊的時候，彈出其文本。
$("p").on("click", function(){
alert( $(this).text() );
});
- off：on()的反向操作在選擇元素上移除一個或多個事件的事件處理函數。與on相反。
//把所有段落的所有事件取消綁定。
$("p").off()
推薦使用on()和off()，在jQuery 1.7版本后統一了事件綁定方法，即on()和off()。
使用on綁定事件使用事件代理的寫法：
//html代碼
<ul>
<li></li>
<li></li>
<li></li>
</ul>
//對ul元素綁定事件代理
$('ul').on('click', 'li', function(){*****})
4：jQuery 如何展示/隱藏元素？
- jQuery 展示元素的方法：.hide()
$('.target').hide()；
- jQuery 隱藏元素的方法：.show()
$('.target').show()；
5： jQuery 動畫如何使用？
jQuery提供的基礎動畫方法有：
.hide()：用于隱藏元素，沒有參數的時候等同于直接設置display屬性
.show()：用于顯示元素，用法和hide類似
.toggle()：用來切換元素的隱藏、顯示
.fadeIn()：通過淡入的方式顯示匹配元素
.fadeOut()：通過淡出的方式隱藏匹配元素
.fadeTo()：調整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果
.fadeToggle()：通過匹配的元素的不透明度動畫，來顯示或隱藏它們，方法執行匹配元素的不透明度動畫。當被可見元素調用時，元素不透明度一旦達到0，display樣式屬性設置為none ，所以元素不再影響頁面的布局。
.slideDown()：用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式
.slideUp()：用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。 display 樣式屬性將被設置為none，以確保該元素不再影響頁面布局。
.slideToggle()：用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面中，在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值。
以上方法不能滿足動畫效果時，可使用自定義動畫方法.animate()
這個函數的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.，而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調用默認的動畫形式。
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據這組對象移動。
duration：動畫持續多久
easing：表示過渡使用哪種緩動函數，jQuery自身提供"linear" 和 "swing"
complete：在動畫完成時執行的函數
//點擊按鈕后div元素的幾個不同屬性一同變化
//Html代碼
<button id="go"> Run</button>
<div id="block">Hello!</div>
//jQuery代碼
// 在一個動畫中同時應用三種類型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
6：如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？
- 設置和獲取元素內部 HTML 內容:：.html([string])方法
這是一個讀寫兩用的方法，用于獲取/修改元素的innerHTML- 當沒有傳遞參數的時候，返回元素的innerHTML
- 當傳遞了一個string參數的時候，修改元素的innerHTML為參數值
$('div').html()
$('div').html('123')
- 設置和獲取元素內部文本：.text()方法
這是一個讀寫兩用的方法，用于獲取/修改元素的iinnerText- 當沒有傳遞參數的時候，返回元素的innerText
- 當傳遞了一個string參數的時候，修改元素的innerText為參數值
$('div').text()
$('div').text('123')
7：如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？
- 設置和獲取表單用戶輸入或者選擇的內容：.val([value])方法。
這是一個讀寫雙用的方法，用來處理input的value，當方法沒有參數的時候返回input的value值，當傳遞了一個參數的時候，方法修改input的value值為參數值
$('input').val()
$('input').val('newValue');
- 設置和獲取元素屬性：.attr()方法
- 獲取元素屬性
$( "div" ).attr( "id" );
- 設置元素屬性
- 為元素屬性賦值
$( "#div" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
- 為匹配的元素集合中的每個元素中移除一個屬性
$('div').removeAttr('id');
8： 使用 jQuery實現如下效果
![]()
demo
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' }];
