題目1： jQuery 能做什么？
- 封裝部分JavaScript代碼落君，API友好。
$(“css選擇器”) 代替了 document.getElementsByTagName(“”)、document.getElementById(“”)…
$(“css選擇器”).css(“color”,”red”) 代替了 document.getElementById(“”).style.color = “red”垃喊。
$(“css選擇器”).text(“”) 一個(gè)api同時(shí)具有讀跟寫(xiě)的功能。($(“div”).text(“你好嗎”);)袜炕。
$(“css選擇器”).on(“click”,function (){}),監(jiān)聽(tīng)事件本谜。 - 將原生DOM元素的功能實(shí)現(xiàn)并且滿(mǎn)足良好的兼容性，最重要的是偎窘，可以簡(jiǎn)化代碼乌助。
- jquery是一個(gè)豐富的js庫(kù)，內(nèi)部對(duì)js的很多復(fù)雜的方法進(jìn)行了封裝和加工陌知，比如js很多方法名很冗長(zhǎng)他托，jquery封裝后方法就變得簡(jiǎn)便了，也考慮到了跨瀏覽器兼容問(wèn)題仆葡，這樣我們用js時(shí)需要考慮的很多問(wèn)題它都幫我們解決了赏参，這樣我們使用時(shí)就比js代碼要方便，高效的多沿盅。
題目2： jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別把篓？如何轉(zhuǎn)化？
-
DOM原生對(duì)象：
- 是對(duì)象腰涧；
- 擁有原生對(duì)象的屬性和方法韧掩；
-
jQuery對(duì)象：
- 是DOM元升級(jí)對(duì)象經(jīng)過(guò)包裝之后，擁有jQuery的屬性和方法（對(duì)原生DOM對(duì)象的封裝）窖铡；
- 是類(lèi)數(shù)組疗锐；
DOM原生對(duì)象轉(zhuǎn)化為jQuery對(duì)象：
$div = $(document.getElementsByTagName(‘div’));jQuery對(duì)象轉(zhuǎn)化為DOM原生對(duì)象：
div = $div[index];
對(duì)于一個(gè)特定結(jié)果集，我們想獲取到指定index的jQuery對(duì)象费彼，可以使用eq方法
$('div').eq(3);// 獲取結(jié)果集中的第四個(gè)jQuery對(duì)象
我們可以通過(guò)類(lèi)數(shù)組下標(biāo)的獲取方式或者get方法獲取指定index的DOM對(duì)象滑臊，也就是我們說(shuō)的jQuery對(duì)象轉(zhuǎn)DOM對(duì)象
$('div')[2];
$('div').eq(2);
題目3：jQuery中如何綁定事件？bind敌买、unbind简珠、delegate、live、on聋庵、off都有什么作用膘融？推薦使用哪種？使用on綁定事件使用事件代理的寫(xiě)法祭玉？
$("#nav").on("click",function(){
console.log("hello")
});
- .bind()為一個(gè)元素綁定一個(gè)事件處理程序氧映。
- .unbind():bind的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件脱货。如果沒(méi)有參數(shù)岛都，則刪除所有綁定的事件，.unbind(type)刪除指定類(lèi)型事件振峻；
$( "#foo" ).unbind();
$( "#foo").unbind( "click" );
.live()
$('a').live('click',function(){
alert('harrisking')
});
JQuery把a(bǔ)lert函數(shù)綁定到$(document)元素上臼疫，并使用’click’和’a’作為參數(shù)。任何時(shí)候只要有事件冒泡到document節(jié)點(diǎn)上扣孟，它就查看該事件是否是一個(gè)click事件烫堤，以及該事件的目標(biāo)元素與’a’這一CSS選擇器是否匹配，如果都是的話凤价，則執(zhí)行函數(shù)鸽斟。
.delegate()
$('#container').delegate('a', 'click', function() {
alert("That tickles!")
});
JQuery掃描文檔查找$(‘#container’)，并使用click事件和’a’這一CSS選擇器作為參數(shù)把a(bǔ)lert函數(shù)綁定到$(‘#container’)上利诺。任何時(shí)候只要有事件冒泡到$(‘#container’)上富蓄，它就查看該事件是否是click事件，以及該事件的目標(biāo)元素是否與CCS選擇器相匹配慢逾。如果兩種檢查的結(jié)果都為真的話立倍，它就執(zhí)行函數(shù)。
為什么.delegate()要比.live()好用?
$('a').live('click', function() {
blah()
});
// 或者
$(document).delegate('a', 'click', function() {
blah()
});
后者實(shí)際上要快過(guò)前者侣滩，因?yàn)榍罢呤紫纫獟呙枵麄€(gè)的文檔查找所有的$(‘a(chǎn)’)元素帐萎，把它們存成jQuery對(duì)象。
.on()
// Bind
$( "#members li a" ).on( "click", function( e ) {
} );
$( "#members li a" ).bind( "click", function( e ) {
} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {
} );
//注意子元素參數(shù)位置$( "#members" ).delegate( "li a", "click", function( e ) {
} );
.off()
off()：移除用on()綁定的事件處理程序
從所有的p中移除所有的事件:
$( "p" ).off();
從所有的p中移除click的事件:
$( "p" ).off( "click", "**" );
將事先綁定的方法作為第三個(gè)參數(shù)傳參來(lái)移除綁定事件:
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).on( "click", "p", foo );
// ... Foo will no longer be called.
$( "body" ).off( "click", "p", foo );
通過(guò)命名空間移除綁定函數(shù):
var validate = function() {
// Code to validate form entries
};
// Delegate events under the ".validator" namespace
$( "form" ).on( "click.validator", "button", validate );
$( "form" ).on( "keypress.validator", "input[type='text']", validate );
// Remove event handlers in the ".validator" namespace
$( "form" ).off( ".validator" );
live方法被廢棄on事件綁定把上面三種方法統(tǒng)一了胜卤，用起來(lái)更方便。
題目4：jQuery 如何展示/隱藏元素赁项？
<div class='box'>
<button class="btn1">消失</button>
<button class="btn2">出現(xiàn)</button>
<button class="btn3">切換</button>
</div>
<div class='content'>content</div>
<script>
$('.btn1').on('click',function(){
$('.content').hide('5000')
})
$('.btn2').on('click',function(){
$('.content').show('2000')
})
$('.btn3').on('click',function(){
$('.content').toggle('2000')
})
</script>
效果見(jiàn)題目5
題目5： jQuery 動(dòng)畫(huà)如何使用葛躏？
題目6：如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本悠菜？
(1) 設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容：
html([string])
這是一個(gè)讀寫(xiě)兩用的方法舰攒，用于獲取/修改元素的innerHTML
- 當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候，返回元素的innerHTML
- 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候悔醋，修改元素的innerHTML為參數(shù)值
$('div').html()
$('div').html('123')
(2) 設(shè)置和獲取元素內(nèi)部文本：
text()
和html方法類(lèi)似摩窃，操作的是DOM的innerText值
$('#test').text();
$('#test').text(這是要更改的內(nèi)容);
題目7：如何設(shè)置和獲取表單用戶(hù)輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
$(‘selector’).val();//獲取表單用戶(hù)輸入值;
$(‘selector’).val(‘…’);//設(shè)置輸入值;
$(‘selector’).attr(‘name’)//獲取元素屬性;
$(‘selector’).attr(‘name’,’xxx’)//設(shè)置元素屬性的值;
題目8： 使用 jQuery實(shí)現(xiàn)如下效果
task14-8
題目9：. 使用 jQuery 實(shí)現(xiàn)如下效果
task14-9
題目10：實(shí)現(xiàn)如下效果
task14-10
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'
}
];
題目11： 模仿視頻6猾愿，完成 左右切換的 Tab 效果
