1： jQuery 能做什么？
- 選擇網(wǎng)頁(yè)元素
- 改變結(jié)果集
- 元素的操作：取值和賦值
- 元素的操作：移動(dòng)
- 元素的操作：復(fù)制、刪除和創(chuàng)建
- 工具方法
- 事件操作
- 特殊效果（動(dòng)畫效果）
- AJAX
2： jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別沦童？如何轉(zhuǎn)化同波？
- jQuery 對(duì)象轉(zhuǎn)化成DOM 原生對(duì)象：可以通過(guò)類數(shù)組下標(biāo)的獲取方式或者get方法獲取指定index的DOM對(duì)象剃诅，如：
$('wrap')[0]剥啤，即實(shí)現(xiàn)將jQuery 對(duì)象轉(zhuǎn)化DOM 原生對(duì)象锦溪。 - DOM 原生對(duì)象轉(zhuǎn)化jQuery 對(duì)象：用
$()包裹DOM對(duì)象，如：$(DOM對(duì)象)即可實(shí)現(xiàn)DOM 原生對(duì)象轉(zhuǎn)化成jQuery 對(duì)象府怯。
3：jQuery中如何綁定事件？bind防楷、unbind牺丙、delegate、live复局、on冲簿、off都有什么作用？推薦使用哪種亿昏？使用on綁定事件使用事件代理的寫法峦剔？
- bind：為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。（jQuery 3.0中已棄用此方法）
//當(dāng)每個(gè)段落被點(diǎn)擊的時(shí)候角钩，彈出其文本吝沫。
$("p").bind("click", function(){
alert( $(this).text() );
});
- unbind：bind()的反向操作呻澜，從每一個(gè)匹配的元素中刪除綁定的事件。如果沒(méi)有參數(shù)惨险，則刪除所有綁定的事件羹幸。如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件辫愉。（jQuery 3.0中已棄用此方法）
//把所有段落的所有事件取消綁定
$("p").unbind()
- delegate：指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序栅受，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）恭朗。（jQuery 3.0中已棄用此方法）
//當(dāng)點(diǎn)擊鼠標(biāo)時(shí)屏镊，隱藏或顯示 p 元素：
<div style="background-color:red">
<p>這是一個(gè)段落。</p>
<button>請(qǐng)點(diǎn)擊這里</button>
</div>
<scirpt>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
</scirpt>
- live：jQuery 給所有匹配的元素附加一個(gè)事件處理函數(shù)痰腮，即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效而芥。
//把所有段落的所有事件取消綁定
<body>
<div class="clickme">Click here</div>
</body>
<scirpt>
$('.clickme').live('click', function() {
alert("Live handler called.");
});
</scirpt>
//然后再添加一個(gè)新元素：
$('body').append('<div class="clickme">Another target</div>');
//然后再點(diǎn)擊新增的元素，他依然能夠觸發(fā)事件處理函數(shù)诽嘉。
- on：在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)蔚出。
//當(dāng)每個(gè)段落被點(diǎn)擊的時(shí)候，彈出其文本虫腋。
$("p").on("click", function(){
alert( $(this).text() );
});
- off：on()的反向操作在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)骄酗。與on相反。
//把所有段落的所有事件取消綁定悦冀。
$("p").off()
推薦使用on()和off()趋翻，在jQuery 1.7版本后統(tǒng)一了事件綁定方法，即on()和off()盒蟆。
使用on綁定事件使用事件代理的寫法：
//html代碼
<ul>
<li></li>
<li></li>
<li></li>
</ul>
//對(duì)ul元素綁定事件代理
$('ul').on('click', 'li', function(){*****})
4：jQuery 如何展示/隱藏元素踏烙？
- jQuery 展示元素的方法：.hide()
$('.target').hide()；
- jQuery 隱藏元素的方法：.show()
$('.target').show()历等；
5： jQuery 動(dòng)畫如何使用讨惩？
jQuery提供的基礎(chǔ)動(dòng)畫方法有：
.hide()：用于隱藏元素，沒(méi)有參數(shù)的時(shí)候等同于直接設(shè)置display屬性
.show()：用于顯示元素寒屯，用法和hide類似
.toggle()：用來(lái)切換元素的隱藏荐捻、顯示
.fadeIn()：通過(guò)淡入的方式顯示匹配元素
.fadeOut()：通過(guò)淡出的方式隱藏匹配元素
.fadeTo()：調(diào)整匹配元素的透明度否纬，方法通過(guò)匹配元素的不透明度做動(dòng)畫效果
.fadeToggle()：通過(guò)匹配的元素的不透明度動(dòng)畫蚌铜，來(lái)顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫陷虎。當(dāng)被可見(jiàn)元素調(diào)用時(shí)菩掏，元素不透明度一旦達(dá)到0魂角，display樣式屬性設(shè)置為none ，所以元素不再影響頁(yè)面的布局智绸。
.slideDown()：用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素野揪，方法將給匹配元素的高度的動(dòng)畫访忿，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去，彌補(bǔ)了顯示的方式
.slideUp()：用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素囱挑，方法將給匹配元素的高度的動(dòng)畫醉顽，這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫后平挑，高度值達(dá)到0的時(shí)候游添，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局通熄。 display 樣式屬性將被設(shè)置為none唆涝，以確保該元素不再影響頁(yè)面布局。
.slideToggle()：用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素唇辨，方法將給匹配元素的高度的動(dòng)畫廊酣，這會(huì)導(dǎo)致頁(yè)面中，在這個(gè)元素下面的內(nèi)容往下或往上滑赏枚。display屬性值保存在jQuery的數(shù)據(jù)緩存中亡驰，所以display可以方便以后可以恢復(fù)到其初始值。
以上方法不能滿足動(dòng)畫效果時(shí)饿幅，可使用自定義動(dòng)畫方法.animate()
這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象凡辱。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）栗恩。注意：所有指定的屬性必須用駱駝形式透乾，比如用marginLeft代替margin-left.，而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫結(jié)束磕秤。如果是一個(gè)數(shù)值乳乌，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”市咆、“show”或“toggle”這樣的字符串值汉操，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫形式。
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)蒙兰。
duration：動(dòng)畫持續(xù)多久
easing：表示過(guò)渡使用哪種緩動(dòng)函數(shù)客情，jQuery自身提供"linear" 和 "swing"
complete：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
//點(diǎn)擊按鈕后div元素的幾個(gè)不同屬性一同變化
//Html代碼
<button id="go"> Run</button>
<div id="block">Hello!</div>
//jQuery代碼
// 在一個(gè)動(dòng)畫中同時(shí)應(yīng)用三種類型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
6：如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本癞己？
- 設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容:：.html([string])方法
這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的innerHTML- 當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候梭伐，返回元素的innerHTML
- 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候痹雅，修改元素的innerHTML為參數(shù)值
$('div').html()
$('div').html('123')
- 設(shè)置和獲取元素內(nèi)部文本：.text()方法
這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的iinnerText- 當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候糊识，返回元素的innerText
- 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候绩社，修改元素的innerText為參數(shù)值
$('div').text()
$('div').text('123')
7：如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容摔蓝？如何設(shè)置和獲取元素屬性？
- 設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容：.val([value])方法愉耙。
這是一個(gè)讀寫雙用的方法贮尉，用來(lái)處理input的value，當(dāng)方法沒(méi)有參數(shù)的時(shí)候返回input的value值朴沿，當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候猜谚，方法修改input的value值為參數(shù)值
$('input').val()
$('input').val('newValue');
- 設(shè)置和獲取元素屬性：.attr()方法
- 獲取元素屬性
$( "div" ).attr( "id" );
- 設(shè)置元素屬性
- 為元素屬性賦值
$( "#div" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
- 為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性
$('div').removeAttr('id');
8： 使用 jQuery實(shí)現(xiàn)如下效果
![]()
demo
9：使用 jQuery 實(shí)現(xiàn)如下效果
demo
10：實(shí)現(xiàn)如下效果
Ps:當(dāng)點(diǎn)擊按鈕時(shí)使用如下數(shù)據(jù)
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: '珂蘭 黃金轉(zhuǎn)運(yùn)珠 猴哥款', price: '￥100.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂蘭 黃金手鏈 3D猴哥款', price: '￥45.00' }];
