題目1： jQuery 能做什么华坦？

jQuery是一個快速抠藕、簡潔的JavaScript框架粱腻，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less伏伐，Do More”帕翻，即倡導寫更少的代碼鸠补，做更多的事情。它封裝JavaScript常用的功能代碼嘀掸，提供一種簡便的JavaScript設計模式紫岩，優(yōu)化HTML文檔操作、事件處理睬塌、動畫設計和Ajax交互泉蝌。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器揩晴，并且可對CSS選擇器進行擴展勋陪；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器硫兰，如IE 6.0+诅愚、FF 1.5+、Safari 2.0+劫映、Opera 9.0+等违孝。

jQuery庫為Web腳本編程提供了通用(跨瀏覽器)的抽象層，使得它幾乎適用于任何腳本編程的情形泳赋。jQuery通常能為我們提供以下功能：

1.方便快捷獲取DOM元素

如果使用純JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫很多冗余的代碼雌桑，而使用jQuery只需要一行代碼就足夠了。例如摹蘑，找到所有應用了.content class樣式的div中所有的P標簽筹燕，只需要下面的一行代碼：

$('div.content').find('p');

2.動態(tài)修改頁面樣式

使用jQuery我們可以動態(tài)的修改頁面的CSS即使在頁面呈現(xiàn)以后。jQuery仍然能夠改變文檔中某個部分的類或者個別的樣式屬性衅鹿。例如撒踪，找到頁面所有的ul標簽的第一個li子標簽，然后為它們增加名為active的樣式大渤，代碼如下：

$('ul > li:first').addClass('active');

3.動態(tài)改變DOM內(nèi)容

使用jQuery我們可以很容易地對頁面DOM進行修改制妄，例如，為ID為"container"的元素添加一個鏈接：

$('#container').append('<a href="more.html">more</a>');

4.響應用戶的交互操作

jQuery提供了截獲形形色色的頁面事件（比如用戶單擊某個鏈接）的適當方式泵三，而不需要使用事件處理程序拆散HTML代碼耕捞。此外，它的事件處理API也消除了經(jīng)常困擾Web開發(fā)人員瀏覽器的不一致性烫幕。

$('button.show-details').click(function() {
   $('div.details').show();
});

上面的代碼表示：為使用的.show-details樣式的button元素添加一個click事件俺抽，事件就是：顯示使用.details樣式的DIV。

5.為頁面添加動態(tài)效果

jQuery中內(nèi)置的一批淡入较曼、擦除之類的效果磷斧，以及制作新效果的工具包，為此提供了便利捷犹。

1    $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5         });

6.統(tǒng)一Ajax操作

jQuery統(tǒng)一了多種瀏覽器的Ajax操作弛饭，使得開發(fā)人員更多的專注服務器端開發(fā)。

1 function (data, type) {
2     // 對Ajax返回的原始數(shù)據(jù)進行預處理
3     return data  // 返回處理后的數(shù)據(jù)
4 }

7.簡化常見的JavaScript任務

除了這些完全針對文檔的特性之外萍歉，jQuery也改進了對基本的JavaScript數(shù)據(jù)結構（例如迭代和數(shù)組操作等）侣颂。

1 $.each(obj, function(key, value) {
2   total += value;
3 });

題目2： jQuery 對象和 DOM 原生對象有什么區(qū)別？如何轉化枪孩？

1.聯(lián)系:

• jQuery對象可以通過jQuery包裝DOM對象后產(chǎn)生
• DOM對象也可以通過jQuery按索引取得

2.區(qū)別

• 1.jQuery 對象是通過 jQuery 包裝DOM 對象后產(chǎn)生的對象憔晒。jQuery 對象是 jQuery 獨有的，其可以使用 jQuery 里的方法蔑舞，但是不能使用 DOM 的方法丛晌；例如： $("#img").attr("src","test.jpg"); 這里的$("#img")就是 jQuery對象。
• 2.DOM對象就是Javascript 固有的一些對象操作斗幼。DOM 對象能使用Javascript 固有的方法澎蛛，但是不能使用 jQuery 里的方法。例如：document.getElementById("img").src = “test.jpg"蜕窿；這里的document.getElementById("img")就是DOM 對象谋逻。
  $("#img").attr("src","test.jpg");和document.getElementById("img").src = "test.jpg";是等價的，但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg");都是錯誤的桐经。

3.轉換

• DOM對象轉成jQuery對象
  對于已經(jīng)是一個 DOM 對象毁兆，只需要用$()把DOM對象包裝起來，就可以獲得一個 jQuery 對象了阴挣，$(DOM 對象) 注： var是定義變量
  如:

1 var a = document.getElementById('a'); //DOM對象
2 var $a = $(a); //jQuery對象

轉換后,就可以任意使用jQuery的對象

• jQuery對象轉成DOM對象
  兩種轉換方式將一個 jQuery 對象轉換成 DOM 對象： [index] 和 .get(index)气堕；

(1)jQuery對象是一個數(shù)組對象,可以通過[index]的方法,來得到相應的DOM對象
如:

1 var $a = $('#a'); //jQuery 對象
2 var a = $a[0]; //DOM對象
3 alert(a.checked); //檢測這個checkbox是否被選中

(2) jQuery本身提供,通過.get(index)方法得到相應的DOM

1 var $v = $("#v"); //jQuery 對象
2 var v = $v.get(0); //DOM對象 ( $v.get()[0] 也可以 )
3 alert(v.checked); //檢測這個 checkbox 是否被選中 

總結:通過以上方法，可以任意的相互轉換 jQuery 對象和 DOM 對象，需要再強調(diào)的是： DOM 對象才能使用DOM 中的方法茎芭，jQuery 對象是不可以使用DOM中的方法揖膜。

題目3：jQuery中如何綁定事件？bind梅桩、unbind壹粟、delegate、live宿百、on趁仙、off都有什么作用？推薦使用哪種垦页？使用on綁定事件使用事件代理的寫法雀费？

• jQuery中使用on方法綁定事件,用off方法卸載事件

  • bind、unbind痊焊、delegate盏袄、live都是jQuery1.7之前的方法,現(xiàn)已廢棄,被on和off代替.
  • bind和on都用于綁定事件
  • unbind和off都用于卸載事件
  • delegate與on都可實現(xiàn)事件代理
  • live和bind綁定事件是一樣的,但live方法會綁定相應的事件到document元素上

• 推薦使用on方法綁定事件,off方法卸載事件

• 用on事件使用事件代理的寫法

.on( events [,selector ] [,data ], handler(eventObject) )

如例:添加一個事件處理函數(shù)

/ 普通事件綁定，最簡單的用法
$('div').on('click', function(e){
    console.log(this);
    console.log(e);
})

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

// 可以在綁定的時候給事件處理程序傳遞一些參數(shù)
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);

• 用off解綁事件使用事件代理的寫法

.off( events [, selector ] [, handler ] )

示例:移除一個事件處理函數(shù)

function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});

$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});

• trigger,根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為

$('#foo').on('click', function() {
  console.log($(this).text())
});
$('#foo').trigger('click')

示例:創(chuàng)建一個點擊事件并模擬點擊執(zhí)行

$('#foo').on('click', function() {
  alert($(this).text());
});
$('#foo').trigger('click');

題目4：jQuery 如何展示/隱藏元素？

• 通過設置css的display屬性來實現(xiàn)

var $h1 = $('h1')
$h1.css('display','block')
$h1.css('display':'none')

• 通過增加或刪除class來實現(xiàn)

//css部分
.status{
   display: none;
}
//js部分
var $h1 = $('h1')
$h1.addClass('status') //隱藏元素
$h1.removeClass('status') //展示元素

• 通過jQuery動畫的hide罪佳、show逛漫、toggle方法實現(xiàn)

var $h1 = $('h1')
$h1.hide() //隱藏
$h1.show() //展示
$h1.toggle() //用于切換元素的隱藏顯示

題目5： jQuery 動畫如何使用？

四個參數(shù):
duration：動畫持續(xù)多久
easing：表示過渡使用哪種緩動函數(shù)赘艳，jQuery自身提供"linear" 和 "swing"
complete：在動畫完成時執(zhí)行的函數(shù)
opacity：不透明度

• 基礎用法:

  • 隱藏元素
    .hide([duration ] [,easing ] [,complete ])
  • 顯示元素
    .show( [duration ] [, easing ] [, complete ])
  • 切換元素
    .toggle( [duration ] [, easing ] [, complete ])

• 漸變

  • 淡入顯示
    .fadeIn( [duration ] [, easing ] [, complete ] )
  • 淡出隱藏
    .fadeOut( [duration ] [, easing ] [, complete ] )
  • 調(diào)整匹配元素的透明度,方法通過匹配元素的不透明度做動畫效果
    .fadeTo( duration, opacity [, easing ] [, complete ] )
  • 調(diào)整匹配的元素的不透明度動畫來顯示或隱藏它們酌毡，方法執(zhí)行匹配元素的不透明度動畫。當被可見元素調(diào)用時蕾管，元素不透明度一旦達到0枷踏，display樣式屬性設置為none ，元素不再影響頁面的布局掰曾。
    .fadeToggle( [duration ] [, easing ] [, complete ] )

• 滑動

  • 滑動顯示旭蠕，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去旷坦，彌補了顯示的方式
    .slideDown( [duration ] [, easing ] [, complete ] )
  • 滑動隱藏掏熬，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去秒梅，當一個隱藏動畫后旗芬，高度值達到0時，display 樣式屬性被設置為none捆蜀，該元素不再影響頁面布局疮丛。
    .slideUp( [duration ] [, easing ] [, complete ] )
  • 用滑動動畫顯示或隱藏一個匹配元素幔嫂，方法將給匹配元素的高度的動畫，這會導致頁面中誊薄，在這個元素下面的內(nèi)容往下或往上滑履恩。display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復到其初始值暇屋。
    如果一個元素的display屬性值為inline似袁，然后是隱藏和顯示洞辣，這個元素將再次顯示inline董饰。當一個隱藏動畫后塔猾，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局有梆。
    .slideToggle( [duration ] [, easing ] [, complete ] )

• 自定義

  • properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
    .animate( properties [, duration ] [, easing ] [, complete ] )
  • options是一組包含動畫選項的值的集合洒扎。
    animate( properties, options )
  • 當一個元素調(diào)用.stop()瓣履，當前正在運行的動畫（如果有的話）立即停止。
    .stop( [clearQueue ] [, jumpToEnd ] )

題目6：如何設置和獲取元素內(nèi)部 HTML 內(nèi)容材原？如何設置和獲取元素內(nèi)部文本沸久？

• 用html方法獲取/修改元素的innerHTML

  • 沒有傳遞參數(shù)時直接返回元素的innerHTML
    $('div').html()
  • 傳遞了一個string參數(shù)時修改元素的innerHTML為參數(shù)值
    $('div').html('hello world')

• 用text方法獲取/修改元素的innerText

  • 沒有傳遞參數(shù)時直接返回元素的innerText
    $('div').text()
  • 傳遞了一個string參數(shù)時修改元素的innerText為參數(shù)值
    $('div').text('hello world')

這種讀寫兩用的方法很多，原理都類似

1. 如果結果是多個余蟹，進行賦值操作的時候會給每個結果都賦值

2. 如果結果多個卷胯，獲取值的時候，$node.html()返回結果集中的第一個對象的相應值威酒，$node.text()返回結果集中的所有值組成的字符串窑睁。

題目7：如何設置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設置和獲取元素屬性葵孤？

• 用val方法設置和獲取表單用戶輸入或者選擇的內(nèi)容
  也是一個讀寫雙用的方法担钮，用來處理input的value，當方法沒有參數(shù)的時候返回input的value值尤仍，當傳遞了一個參數(shù)的時候箫津，方法修改input的value值為參數(shù)值

$('input').val()//獲取用戶輸入或選擇的內(nèi)容
$('input').val('newValue');//設置用戶輸入或選擇的內(nèi)容

• 用attr和prop方法來設置和獲取元素屬性

//獲取元素屬性
$node.attr('id')
$node.attr('src')
//獲取元素自定義屬性
$node.prop('data-title')
//設置元素屬性
$node.attr('id','newId')
$node.attr('src','newSrc')
//設置元素自定義屬性
$node.prop({
  data-title: "newTitle",
  data-href: "new href"
})

attr多用于html原有屬性，prop多用于自定義屬性宰啦。

題目8:使用 jQuery實現(xiàn)如下效果

題目9：. 使用 jQuery 實現(xiàn)如下效果

題目10：實現(xiàn)如下效果

題目11： 完成 左右切換的 Tab 效果

代碼實現(xiàn)(http://js.jirengu.com/hezisujore/2/edit)