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

• 庫：對(duì)開發(fā)者來說就是操作方便，簡(jiǎn)化流程，提高效率，代碼簡(jiǎn)潔。
• 框架 : 框架就是一個(gè)大的整體結(jié)構(gòu)，包含多個(gè)庫的集合，根據(jù)框架提供的類或函數(shù)，即可實(shí)現(xiàn)全部功能，這就是框架。

jquery 能做什么？

jQuery 是一個(gè)高效、精簡(jiǎn)并且功能豐富的 JavaScript 工具庫。
常見實(shí)用方法
創(chuàng)建

var obj = $('<div class="test"><p><span>Done</span></p></div>');

取值和賦值

$('.box').html(); // 取值
$('#username').val(); // 取值
$('.box').html('給box賦值'); // 賦值
$('#username').val('給ipnput賦值'); // 賦值

事件操作

$('.box').on('click', function(){
    console.log( $(this).html() );
})

動(dòng)畫效果

$(".btn").click(function(){
    $(".box").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "60px",
        fontSize: "30px"
    }, 1500 );
});

AJAX

$.ajax({
    type: "POST",
    url: "some.php",
    data: { name: "John", location: "Boston" }
}).done(function( msg ) {
    alert( "Data Saved: " + msg );
});

添加樣式和刪除樣式

$(".box").addClass("active");
$(".box").removeClass("active");

添加元素和刪除元素

$( ".box" ).append( "<p>Test</p>" ); // 添加元素
$('.box').empty(); // 清空元素
$('.box').remove(); // 刪除被選元素

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

• 區(qū)別：
  jQuery對(duì)象操作簡(jiǎn)單，兼容性強(qiáng)。
  DOM原生對(duì)象代碼復(fù)雜，兼容性差。
• 轉(zhuǎn)化：
  DOM原生對(duì)象轉(zhuǎn)化jQuery對(duì)象：$(node) ，用 $() 包起來實(shí)現(xiàn)
  jQuery對(duì)象轉(zhuǎn)化DOM原生對(duì)象： $(node)[index]，以下標(biāo)來實(shí)現(xiàn)

jquery中如何綁定事件？

// 1
$('#foo').on('click', function() {
  alert('User clicked on "foo."');
});
// 2
$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？

bind 方法用于直接附加一個(gè)事件處理程序到元素上，在.bind()綁定事件的時(shí)候，這些元素必須已經(jīng)存在。
unbind 從元素上刪除一個(gè)以前附加事件處理程序。
delegate 對(duì)于早期版本，它仍然是使用事件代理（委派）最有效的方式

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

等價(jià)于下面使用.on()的代碼

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

從jQuery 1.7開始，.delegate()已經(jīng)被.on()方法取代
live 從jQuery1.7開始， .live() 方法已經(jīng)過時(shí)了。使用.on()附加事件處理程序。 舊版本的jQuery中用戶，應(yīng)優(yōu)先使用.delegate()來取代.live()。

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+

on 在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)，在jQuery 1.7中，.on()方法提供綁定事件處理的所有功能。

$('.box').on('click', function(){
    console.log( $(this).html() );
});

$("form").on("submit", function(event) {
  event.preventDefault();
});

off 移除一個(gè)事件處理函數(shù)。

$("form").off(".validator");
$("form").on("click.validator", "button", validate);

在jquery-1.7之后建議使用 on() 來 綁定事件

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

// 事件委托或者事件代理，想讓div 下面所有的span綁定事件，可以把事件綁定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

jquery 如何展示/隱藏元素？

// 方法1
$('.box').css('display','block');
$('.box').css('display','none');
// 方法2 
$('.box').show();
$('.box').hide();
// 方法3
$('.box').fadeIn();
$('.box').fadeOut();

jquery 動(dòng)畫如何使用？

自定義動(dòng)畫
$(selector).animate(styles,speed,easing,callback)

參數(shù)說明
styles 必需。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值。
speed 可選。規(guī)定動(dòng)畫的速度。默認(rèn)是 normal。可能的值：毫秒 （比如 1500） slow normal fast
easing 可選。規(guī)定在不同的動(dòng)畫點(diǎn)中設(shè)置動(dòng)畫速度的 easing 函數(shù)。內(nèi)置的 easing 函數(shù)： swing linear
callback 可選。animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

代碼事例

$(".box").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "60px",
        fontSize: "30px"
    }, 'slow' , 'linear' , function(){
        $(".box").css('color','blue');
    });

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

// HTML
var str = $('.box').html();     // 獲取
$('.box').html('給box賦值');   // 設(shè)置
// 文本
var str = $('.box').text();     // 獲取
$('.box').text('給box賦值');   // 設(shè)置

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

.val([string]) 無參數(shù)時(shí)，獲取表單輸入值，有參數(shù)時(shí)，設(shè)置表單的輸入值。

$('.ipt').val('1231321'); //設(shè)置
$('.ipt').val(); // 獲取

如何設(shè)置和獲取元素屬性？

.attr(attributeName, value) 參數(shù)vulue可設(shè)置元素的屬性值
.attr(attributeName) 獲取元素特定屬性的值

$('.box').attr({'data-img':'./icon.jpg','data-id':'20'}); // 設(shè)置
$('.box').attr('data-img'); // 獲取 data-img 的值

以下是三個(gè)小demo

菜單切換
https://boloog.github.io/demos/jQuery/index-1.html
tabs切換
https://boloog.github.io/demos/jQuery/index-2.html
事件委托
https://boloog.github.io/demos/jQuery/index-3.html