題目1： 說(shuō)說(shuō)庫(kù)和框架的區(qū)別许师？

• 庫(kù)
  是一個(gè)數(shù)據(jù)倉(cāng)庫(kù)，里面放了各種可以利用的API蛇受，由于庫(kù)的內(nèi)部已經(jīng)做了各種底層的封裝和各種兼容實(shí)現(xiàn)敞斋，因此可以調(diào)用提供的API接口來(lái)實(shí)現(xiàn)我們需要的功能，而不需要復(fù)雜的代碼和加工恼除，因此使代碼得到優(yōu)化踪旷，效率提高
• 框架相當(dāng)于一個(gè)模板，用來(lái)搭建一個(gè)項(xiàng)目的最基層的部分豁辉，框架內(nèi)部可以根據(jù)不同項(xiàng)目的需要填入不同的內(nèi)容令野。

框架和庫(kù)的比較可以想像為:

假如我們要買一臺(tái)電腦』占叮框架為我們提供了已經(jīng)裝好的電腦气破，我們只要買回來(lái)就能用，但你必須把整個(gè)電腦買回來(lái)餐抢。這樣用戶自然輕松許多现使，但會(huì)導(dǎo)致很多人用一樣的電腦，或你想自定義某個(gè)部件將需要修改這個(gè)框架旷痕。而庫(kù)就如自己組裝的電腦碳锈。庫(kù)為我們提供了很多部件，我們需要自己組裝欺抗，如果某個(gè)部件庫(kù)未提供售碳，我們也可以自己做。庫(kù)的使用非常靈活绞呈，但沒有框架方便贸人。

題目2： jquery 能做什么？

• jquery是javascript的一個(gè)類庫(kù)佃声，說(shuō)到底jquery就是javascript
• jquery主要是用來(lái)簡(jiǎn)化javascript的各種操作以及解決各種瀏覽器之間的兼容性
• 用jquery能辦到的用javascript都能辦到艺智。

題目3： jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化秉溉？

DOM原生對(duì)象：w3c標(biāo)準(zhǔn)用于操作文檔的API.
jQuery對(duì)象：包裝DOM對(duì)象產(chǎn)生的對(duì)象力惯。
區(qū)別：DOM原生對(duì)象使用DOM原生對(duì)象的方法，jQuery對(duì)象使用jQuery對(duì)象的方法召嘶。
轉(zhuǎn)化：
DOM原生對(duì)象轉(zhuǎn)化為jQuery對(duì)象：$div = $(document.getElementsByTagName(‘div’));
jQuery對(duì)象轉(zhuǎn)化為DOM原生對(duì)象：div = $div[index];

題目4：jquery中如何綁定事件父晶？bind、unbind弄跌、delegate甲喝、live、on铛只、off都有什么作用埠胖？推薦使用哪種糠溜？使用on綁定事件使用事件代理的寫法？

• bin():為一個(gè)元素綁定一個(gè)或多個(gè)事件直撤。
• $(‘button’).bind(‘click’,function(){console.log(this)});
• $(‘p’).bind(‘mouseenter mouseleave’,function(){$(this).toggleClass(‘change’)})非竿；
• unbind():$(‘p’)解除該元素綁定的事件。
• delegate():為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序谋竖，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)红柱；適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。
• live():這種方法是將頁(yè)面的document元素作為事件代理元素蓖乘，太消耗資源锤悄，已經(jīng)過(guò)時(shí)。在新版本中推薦用.on()法嘉抒，即時(shí)在舊版本中零聚，也推薦使用.delegate()方法來(lái)取代.live()方法。
• on():在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)些侍，提供綁定事件處理的所有功能隶症。

$('button').on('click',function(){
    $('.test').append('<p>新增內(nèi)容'+ ($('p').length+1) +'</p>')
     console.log($('p').length)
   })

• off():用來(lái)移除on綁定的事件處理函數(shù)。

使用 on 綁定使用事件代理的寫法:

   $(".ct").on("click", "li", function{
        console.log($(this));
   })
   //事件綁定在父元素class為ct 上娩梨，通過(guò)事件代理點(diǎn)擊子元素為 li 的時(shí)候觸發(fā)事件

題目5：jquery 如何展示/隱藏元素沿腰？

• 通過(guò)增刪class（display:none;）來(lái)實(shí)現(xiàn)展示/隱藏元素

.display{
         display: none;
     }
$('#btn').on('click',()=>{
     let $box2 = $('.box2');

     //method1
     if($box2.hasClass('display')){
         $box2.removeClass('display');
     }else {
         $box2.addClass('display');
     }

     //method2===method1
     // $box2.toggleClass('.display');
 });

• 通過(guò)jquery動(dòng)畫方法show()和hide()來(lái)實(shí)現(xiàn)

let $box2 = $('.box2');
$box2.hide();
$box2.show();

• 通過(guò)設(shè)置css的display屬性來(lái)實(shí)現(xiàn)

let $box2 = $('.box2');
$box2.css('display','none');
$box2.css('display','block');

題目6： jquery 動(dòng)畫如何使用？

• 基礎(chǔ)：
• 控制顯示/隱藏：
• 隱藏元素: $node.show([duration ] [,easing ] [,complete ]);
• 顯示元素: $node.hide([duration ] [,easing ] [,complete ]);
• 切換元素的隱藏狈定、顯示: $node.toggle([duration ] [,easing ] [,complete ]);
• 3個(gè)參數(shù)的含義：

duration:動(dòng)畫時(shí)長(zhǎng)
easing:表示過(guò)渡使用哪種緩動(dòng)函數(shù)颂龙，jQuery自身提供"linear" 和 "swing"
complete:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

• 漸變
• 通過(guò)淡入的方式顯示匹配元素: $node.fadeIn( [duration ] [, easing ] [, complete ] )
• 通過(guò)淡出的方式隱藏匹配元素: $node.fadeOut( [duration ] [, easing ] [, complete ] )
• 調(diào)整匹配元素的透明度: $node.fadeTo( duration, opacity [, easing ] [, complete ] )
• 通過(guò)匹配的元素的不透明度動(dòng)畫，來(lái)顯示或隱藏它們:
• $node.fadeToggle( [duration ] [, easing ] [, complete ] )
• 滑動(dòng)
• .slideDown( [duration ] [, easing ] [, complete ] )
  用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素纽什，方法將給匹配元素的高度的動(dòng)畫措嵌，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去，彌補(bǔ)了顯示的方式
• .slideUp( [duration ] [, easing ] [, complete ] )
  用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素芦缰，方法將給匹配元素的高度的動(dòng)畫企巢，這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫后让蕾，display 樣式屬性被設(shè)置為none
• .slideToggle( [duration ] [, easing ] [, complete ] )
  用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素
• 自定義：
• .animate( properties [, duration ] [, easing ] [, complete ] ):自己設(shè)定動(dòng)畫
• .stop( [clearQueue ] [, jumpToEnd ] )：暫停動(dòng)畫
• finish：結(jié)束動(dòng)畫

題目7：如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容浪规？如何設(shè)置和獲取元素內(nèi)部文本？

• 設(shè)置元素內(nèi)部 HTML 內(nèi)容：$('#box').html('<h1>Hello world</h1>');
• 獲取元素內(nèi)部 HTML 內(nèi)容：var content = $('#box').html();
• 設(shè)置元素內(nèi)部文本：$('h1').text('Hello world');
• 獲取元素內(nèi)部文本：var title = $('h1').text();

題目8：如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容探孝？如何設(shè)置和獲取元素屬性笋婿？

• 設(shè)置表單用戶輸入或者選擇的內(nèi)容: $('#username").value="蕭雪圣";
• 獲取表單用戶輸入或者選擇的內(nèi)容: var username = $('#username").value;
• 設(shè)置元素屬性: $('.box').attr('color','red');$('box').attr({'color':'red','width':'100px'});
• 獲取元素屬性: var color = $('.box').attr('class');

題目9： 使用 jquery實(shí)現(xiàn)如下效果

demo68

導(dǎo)航代碼

題目10：. 使用 jquery 實(shí)現(xiàn)如下效果

Tab效果

代碼

題目11：實(shí)現(xiàn)如下效果

添加Li效果

代碼

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' 
}];