1. 說說庫和框架的區(qū)別？

• 類庫是實(shí)現(xiàn)各種功能的類的集合，可以幫助編程人員簡化工作，提高工作效率。就像一個小的工具箱，里面有錘子、剪刀、扳手等之類的工具。
• 框架是解決方案，集成了最佳實(shí)踐和可復(fù)用的基礎(chǔ)結(jié)構(gòu)，是加速和提高系統(tǒng)質(zhì)量的半成品。

2. jquery 能做什么？

jQuery相較于原生js能用更少的代碼，做更多的事情。jQuery可以：

1. 快速獲取文檔元素。采用$()，如：$('#header')。為了方便使用者jQuery刻意和CSS選擇器使用相同的語法，幾乎支持所有類型的CSS3選擇器，當(dāng)然也有一些其特定的選擇器。
2. 提供漂亮的頁面動態(tài)效果。jQuery內(nèi)置了一系列動畫效果，如淡入、淡出、顯示、隱藏等，還有自定義動畫.animate()。
3. 提供常用函數(shù)。如.each( function(index, Element) )遍歷一個jQuery對象，為每個匹配元素執(zhí)行一個函數(shù)。
4. 事件處理更好的實(shí)現(xiàn)了瀏覽器兼容。
5. 操作DOM元素，更改網(wǎng)頁內(nèi)容。

3. jquery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化？

jQuery對象是一個類數(shù)組對象（用[]包裹的），用$()方法得到的都是jQuery對象，jQuery對象可以使用jQuery自帶的屬性和方法。

2.jpg

4. jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

jQuery綁定事件的方法以及對應(yīng)特點(diǎn)：

• .bind()
  $('a').bind('click', function() { alert("That tickles!") });
  這是最簡單的綁定方法了。JQuery掃描文檔找出所有的$(‘a(chǎn)’)元素，并把a(bǔ)lert函數(shù)綁定到每個元素的click事件上。

• .live()
  $('a').live('click', function() { alert("That tickles!") });
  JQuery把a(bǔ)lert函數(shù)綁定到$(document)元素上，并使用’click’和’a’作為參數(shù)。任何時候只要有事件冒泡到document節(jié)點(diǎn)上，它就查看該事件是否是一個click事件，以及該事件的目標(biāo)元素與’a’這一CSS選擇器是否匹配，如果都是的話，則執(zhí)行函數(shù)。
  live方法還可以被綁定到具體的元素（或“context”）而不是document上，像這樣：
  $('a', $('#container')[0]).live(...);

• .delegate()
  $('#container').delegate('a', 'click', function() { alert("That tickles!") });
  JQuery掃描文檔查找$(‘#container’)，并使用click事件和’a’這一CSS選擇器作為參數(shù)把a(bǔ)lert函數(shù)綁定到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上，它就查看該事件是否是click事件，以及該事件的目標(biāo)元素是否與CCS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話，它就執(zhí)行函數(shù)。
  $('a').live('click', function() { blah() });
  // 或者
  $(document).delegate('a', 'click', function() { blah() });
  以上兩個例子可以達(dá)到相同的效果，.delegate和.live哪個更好用？答案是.delegate。為什么呢？看似兩個的作用差不多，但是使用.live()首先要掃描整個的文檔查找所有的$(‘a(chǎn)’)元素，把它們存成jQuery對象。而delegate方法僅需要查找并存儲$(document)元素。所以后者速度更快。
  其次，live方法有一個非常大的缺點(diǎn)，那就是它僅能針對直接的CSS選擇器做操作，這使得它變得非常的不靈活。

• .on()
  在jQuery 3.0中，.bind()已被標(biāo)記為棄用。從jQuery 1.7開始，.live() 方法也已廢棄，[.on()] 方法是將事件處理程序綁定到文檔（document）的首選方法。 舊版本的jQuery中用戶，應(yīng)優(yōu)先使用[.delegate()]來取代.live()。

  // 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 ) {} );
  

on事件綁定把上面三種方法統(tǒng)一了，用起來更方便。
on方法可以在同一個元素上綁定多個事件
$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
.toggleClass()方法用于為匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類（class）,取決于這個樣式類（class）是否存在或state參數(shù)的值。（如果存在（不存在）就刪除（添加）一個類。）
.on()綁定事件和事件代理
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
以上代碼如果表格tbody中有多個tr，這需要給每個tr都綁定這樣的事件處理程序。由于點(diǎn)擊每一個tr時事件都會冒泡到它的父元素上，所以采用事件代理可以避免頻繁的綁定和解綁事件。代碼如下：
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});

5. jquery 如何展示/隱藏元素？

• .show()用于顯示元素
  $('.target').show();
  采用這種方式，元素將立即被顯示，沒有動畫?？梢詾槠涮砑訁?shù)，顯示時間或快慢。參考http://www.css88.com/jqapi-1.9/show/
• .hide()用于隱藏元素

6. jquery 動畫如何使用？

.animate()為元素添加動畫。

7. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？

• .html()用于獲取和設(shè)置元素內(nèi)部的HTML內(nèi)容，在.html()里添加字符串則為該元素設(shè)置HTML內(nèi)容。如：
  <p class="p1">段落</p>

• .text()用于獲取和設(shè)置元素文本。

text.jpg

text2.jpg

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

• .val([value])
  這是一個讀寫雙用的方法，用來處理input的value，當(dāng)方法沒有參數(shù)的時候返回input的value值，當(dāng)傳遞了一個參數(shù)的時候，方法修改input的value值為參數(shù)值
  $('input').val()
  $('input').val('newValue');
  
  input.jpg

ii.jpg

input2.jpg

• .attr(attributeName)獲取元素特定屬性的值或者為元素屬性賦值。
• .removeAttr()為匹配的元素集合中的每個元素中移除一個屬性（attribute）.
• .css()獲取或設(shè)置元素的css.