題目1：jQuery 能做什么饶氏？

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代碼方便高效
封裝部分JS代碼, API友好

• 方便快捷的獲取DOM元素
• 動(dòng)態(tài)修改頁(yè)面要樣式
• 動(dòng)態(tài)改變DOM內(nèi)容
• 事件處理
• 動(dòng)畫(huà)
• ajax
• JSONP

題目2：Query 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化栓辜？

• 區(qū)別:
  • DOM原生對(duì)象: W3C標(biāo)準(zhǔn)用于操作文檔的API, 擁有原生對(duì)象的屬性和方法
  • jQuery對(duì)象: 包裝DOM原生對(duì)象后產(chǎn)生的對(duì)象, 擁有jQuery的屬性和方法, 類(lèi)數(shù)組對(duì)象
  • jQuery對(duì)象不能使用DOM對(duì)象的任何方法, DOM對(duì)象也不能使用jQuery對(duì)象的方法
• 轉(zhuǎn)化方法:
  • jQuery對(duì)象轉(zhuǎn)化DOM對(duì)象
    • jQuery對(duì)象是一個(gè)數(shù)組對(duì)象, 通過(guò)[index]方法

    var $v = $("#v"); //jQuery對(duì)象
    var v = $v[0]; //DOM對(duì)象
    

    • jQuery本身提供, 通過(guò).get(index)方法

    var $v = $("#v"); //jQuery對(duì)象
    var v = $v.get(0); //DOM對(duì)象
    

  • DOM對(duì)象轉(zhuǎn)化jQuery對(duì)象
    對(duì)于DOM對(duì)象, 只需要用$()把DOM對(duì)象包裝起來(lái), 就可以得到j(luò)Query對(duì)象

    var v = document.getELementById("v"); //DOM對(duì)象
    var $v = $(v); //jQuery對(duì)象
    

題目3：jQuery中如何綁定事件颅夺？bind拳亿、unbind享怀、delegate、live恃慧、on园蝠、off都有什么作用？推薦使用哪種痢士？使用on綁定事件使用事件代理的寫(xiě)法彪薛？

• jQuery事件是DOM事件的封裝, 同時(shí)支持自定義擴(kuò)展. 在程序設(shè)計(jì)中, 事件和代理有著相似的作用: 他們提供了一種機(jī)制, 使得行為的實(shí)現(xiàn)方式和調(diào)用時(shí)機(jī)可以分離.
• 綁定事件: jQuery封裝了很多API, 可以方便的進(jìn)行事件處理; 咋吃1.7之前的版本jQuery處理十幾名有多個(gè)方法, 作用各不相同, 后來(lái)統(tǒng)一使用 on/off方法
• bind: $(Selector).bing(event, data, function)是最直接的綁定方法, 會(huì)綁定事件類(lèi)型和處理函數(shù)到DOM Element上, 這個(gè)方法是存在最久的, 而且也很好的解決了瀏覽器在事件處理中的兼容問(wèn)題
  優(yōu)點(diǎn):
  • 這個(gè)方法提供了一種在各種瀏覽器之間對(duì)事件處理的兼容性解決方案, 非常方便簡(jiǎn)單的綁定事件到元素上
  • .cilck(), .hover().. 這些非常方便的事件綁定, 都是bind的一種簡(jiǎn)化處理方式
  • 對(duì)于利用ID選出來(lái)的元素是非常友好的, 不僅僅是很快的可以hock上去(因?yàn)橐粋€(gè)頁(yè)面只有一個(gè)ID), 而且當(dāng)事件發(fā)生時(shí), handler可以立即被執(zhí)行(相對(duì)于后面的live, delegate)實(shí)現(xiàn)方式
    缺點(diǎn):
  • 它會(huì)綁定事件到所有的選出來(lái)的元素
  • 它不會(huì)綁定到在它執(zhí)行完后添加的那些元素上
  • 當(dāng)元素很多時(shí), 會(huì)出現(xiàn)效率問(wèn)題
  • 當(dāng)頁(yè)面加載完的時(shí)候, 才能進(jìn)行bind()
• unbind: 解綁事件的方法, 和bind()事件對(duì)應(yīng)
• delegate: $(selector).delegate(childSelector,event,function)可以實(shí)現(xiàn)事件代理; 將事件處理函數(shù)綁定在指定的跟元素上, 由于事件會(huì)冒泡, 它用來(lái)處理指定的子元素上的事件,適用于當(dāng)前或未來(lái)的元素(如由腳本創(chuàng)建的元素)
  • 自動(dòng)綁定動(dòng)態(tài)添加的元素, 因?yàn)槭录幚砗瘮?shù)綁定在#root上, 新加的子元素事件會(huì)冒泡到#root
  • 性能優(yōu)于.bind(), 只綁定一個(gè)事件處理函數(shù), 綁定速度相當(dāng)快
• live: $(Selector).live(event, data, function)方法為被選元素附加一個(gè)或多個(gè)事件處理程序, 并規(guī)定這些事件發(fā)生時(shí)運(yùn)行的函數(shù)
  通過(guò)live()方法添加的事件處理程序適用于匹配選擇器的當(dāng)前及未來(lái)的元素
• on: $(Selector).on(event, Selector, data, function)方法將事件處理程序附加到j(luò)Query對(duì)象中當(dāng)前選定的元素集。 從jQuery 1.7開(kāi)始良瞧，.on（）方法提供了附加事件處理程序所需的所有功能.
• off: .off( events [, selector ] [, handler ] )方法刪除.on（）附加的事件處理程序陪汽。
• 由于在新版本中bind/unbind/delegete/undelegete/live/die 都已經(jīng)棄用，推薦使用on/off

使用on綁定事件, 使用事件代理的寫(xiě)法:

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

• event: 一個(gè)或多個(gè)空格分隔的事件類(lèi)型或可選的命名空間褥蚯，比如"click", "keydown.myPlugin", 或者 ".myPlugin"挚冤。
• Selector: 一個(gè)選擇器字符串, 用于過(guò)濾被選中的元素中能觸發(fā)事件的后代元素; 如果選擇器是null或者忽略了該選擇器, 那么被選中的元素總是能觸發(fā)事件
• data: 當(dāng)一個(gè)事件被觸發(fā)時(shí), 要傳遞給事件處理函數(shù)的event.data
• handler: 事件觸發(fā)時(shí), 執(zhí)行的函數(shù). 若該函數(shù)只是要執(zhí)行return false, 該位置可以簡(jiǎn)寫(xiě)為false

<div><a class="name">123</a></div>
$('div').on("click", ".name", function(){
  console.log($(this).text())
})  // 為父元素地址下的每個(gè)a綁定點(diǎn)擊事件, 即使這個(gè)a是新生元素

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

• .hide(duration, easing, complete): 用于隱藏元素, 沒(méi)有參數(shù)時(shí)等同于設(shè)置display屬性 .css('display', 'none')

  • duration: 動(dòng)畫(huà)持續(xù)時(shí)間
  • easing: 過(guò)渡使用哪種緩動(dòng)函數(shù), jQuery自身提供linear和swing
  • complete: 動(dòng)畫(huà)執(zhí)行完后執(zhí)行的函數(shù)

• .show(duration, easing, complete): 用于顯示元素, 用法和hide類(lèi)似

• .toggle(duration, easing, complete): 事用來(lái)切換元素的隱藏, 顯示, 類(lèi)似于toggleClass, 用法和show, hide類(lèi)似

• .fadeIn( duration , easing, complete)
  通過(guò)淡入的方式顯示匹配元素赞庶，參數(shù)含義和上面相同

• .fadeOut( duration , easing , complete )
  通過(guò)淡出的方式隱藏匹配元素

• .fadeTo( duration, opacity , easing, complete )
  調(diào)整匹配元素的透明度训挡，方法通過(guò)匹配元素的不透明度做動(dòng)畫(huà)效果澳骤。
  第一、二個(gè)參數(shù)必須澜薄，第一個(gè)參數(shù)設(shè)置無(wú)意義時(shí)會(huì)取默認(rèn)時(shí)間为肮；第二個(gè)參數(shù)設(shè)置透明度。

• .fadeToggle( duration ,easing ,complete )
  通過(guò)匹配的元素的不透明度動(dòng)畫(huà)肤京，來(lái)顯示或隱藏它們颊艳，方法執(zhí)行匹配元素的不透明度動(dòng)畫(huà)。當(dāng)被可見(jiàn)元素調(diào)用時(shí)忘分，元素不透明度一旦達(dá)到0棋枕，display樣式屬性設(shè)置為none ，所以元素不再影響頁(yè)面的布局妒峦。

• .slideDown( duration , easing , complete )
  用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素重斑，方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去肯骇，彌補(bǔ)了顯示的方式

• .slideUp(duration , easing , complete )
  用滑動(dòng)動(dòng)畫(huà)隱藏一個(gè)匹配元素窥浪，方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去笛丙，當(dāng)一個(gè)隱藏動(dòng)畫(huà)后漾脂，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none胚鸯，以確保該元素不再影響頁(yè)面布局符相。 display 樣式屬性將被設(shè)置為none，以確保該元素不再影響頁(yè)面布局蠢琳。

• .slideToggle( duration , easing , complete )
  用滑動(dòng)動(dòng)畫(huà)顯示或隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫(huà)镜豹，這會(huì)導(dǎo)致頁(yè)面中傲须，在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中趟脂，所以display可以方便以后可以恢復(fù)到其初始值泰讽。
  如果一個(gè)元素的display屬性值為inline，然后是隱藏和顯示昔期，這個(gè)元素將再次顯示inline已卸。當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候硼一，display 樣式屬性被設(shè)置為none累澡，以確保該元素不再影響頁(yè)面布局。

題目5：jQuery 動(dòng)畫(huà)如何使用般贼？
.animate(properties, duration, easing, step, complete):

• properties: 一個(gè)css屬性和值得對(duì)象, 動(dòng)畫(huà)將根據(jù)這組對(duì)象移動(dòng)
• duration (default: 400)：一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久愧哟。默認(rèn)值: "normal"奥吩， 三種預(yù)定速度的字符串("slow", "normal", 或 "fast"或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) ）
• easing (default: swing)：一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)蕊梧。jQuery自身提供"linear" 和 "swing"霞赫，其他效果可以使用jQuery Easing Plugin插件
• step：每個(gè)動(dòng)畫(huà)元素的每個(gè)動(dòng)畫(huà)屬性將調(diào)用的函數(shù)。這個(gè)函數(shù)為修改Tween 對(duì)象提供了一個(gè)機(jī)會(huì)來(lái)改變?cè)O(shè)置中得屬性值肥矢。
• complete：在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)

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

獲取內(nèi)容
$(".box").html() //獲取元素內(nèi)部的html內(nèi)容甘改，類(lèi)似于innerHTML
$(".box").text() //獲取元素內(nèi)部的text文本旅东，類(lèi)似于innerText
設(shè)置內(nèi)容
$(".box").html("<p>設(shè)置了一個(gè)段落</p>")//設(shè)置了元素內(nèi)部的html內(nèi)容,標(biāo)簽生效
$(".box").text("設(shè)置了一個(gè)文本")//設(shè)置了元素內(nèi)部的text文本，標(biāo)簽不生效

text()楼誓、html() 的回調(diào)函數(shù)
上面的兩個(gè) jQuery 方法：text()玉锌、html() （以及 下邊提到的val())，擁有回調(diào)函數(shù)疟羹≈魇兀回調(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值榄融。然后以函數(shù)新值返回您希望使用的字符串参淫。

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

設(shè)置/獲取表單內(nèi)容
$("#ipt").val() //獲取表單的html內(nèi)容
$("#ipt").val(content) //更改表單的內(nèi)容

設(shè)置/獲取元素屬性
 .attr()
獲取元素特定屬性的值`.attr(attributeName)`
var title = $( "em" ).attr( "title" );
為元素屬性賦值`.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )`
普通用法：
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
屬性JSON形式
  $("#baid").attr({
    "href" : "http://www.baid.com.cn",
    "title" : "bai du"
  });
回調(diào)函數(shù)用法`.attr( attributeName, function(index, attr) )`
jQuery 方法 attr()涎才，也提供回調(diào)函數(shù)×牛回調(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)耍铜，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串跌前。
.removeAttr():  為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點(diǎn)是可以直接在一個(gè) jQuery 對(duì)象上調(diào)用該方法棕兼，并且它解決了跨瀏覽器的屬性名不同的問(wèn)題。
$('div').removeAttr('id');

• 創(chuàng)建元素
  只需要把DOM字符串傳入$方法即可返回一個(gè)jQuery對(duì)象

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

• 添加元素
  .append(content[,content]) / .append(function(index,html))
  可以一次添加多個(gè)內(nèi)容抵乓，內(nèi)容可以是DOM對(duì)象伴挚、HTML string、 jQuery對(duì)象灾炭。
  如果參數(shù)是function茎芋，function可以返回DOM對(duì)象、HTML string蜈出、 jQuery對(duì)象田弥，參數(shù)是集合中的元素位置與原來(lái)的html值
  appendTo(target):
  把對(duì)象插入到目標(biāo)元素的尾部, 目標(biāo)元素可以是selector, DOM對(duì)象, HTML string, 元素集合, jQuery對(duì)象
  .prepend(content[,content]) / .prepend(function(index,html))
  向?qū)ο箢^部追加內(nèi)容，用法和append類(lèi)似铡原，內(nèi)容添加到最開(kāi)始
  .prependTo(target):
  把對(duì)象插入到目標(biāo)元素頭部皱蹦，用法和prepend類(lèi)似
  .before([content][,content]) / .before(function):
  在對(duì)象前面(不是頭部煤杀，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容沪哺，參數(shù)和append類(lèi)似
  .insertBefore(target)
  把對(duì)象插入到target之前（同樣不是頭部沈自，是同級(jí)）
  .after([content][,content]) / .after(function（index）):
  和before相反，在對(duì)象后面(不是尾部辜妓，而是外面枯途，和對(duì)象并列同級(jí))插入內(nèi)容，參數(shù)和append類(lèi)似
  insertAfter(target):
  和insertBefore相反籍滴，把對(duì)象插入到target之后（同樣不是尾部酪夷，是同級(jí)）
• 刪除元素
  .remove([Selector]):
  刪除被選元素(及其子元素)
  .empty()
  清空被選擇元素內(nèi)所有子元素
  .detach()
  detach() 方法移除被選元素鳞骤，包括所有文本和子節(jié)點(diǎn)净响。這個(gè)方法會(huì)保留 jQuery 對(duì)象中的匹配的元素侣肄，因而可以在將來(lái)再使用這些匹配的元素档礁。
  detach() 會(huì)保留所有綁定的事件、附加的數(shù)據(jù)怜庸，這一點(diǎn)與 remove() 不同盟步。
• 包裹元素
  wrap(wrappingElement) / .wrap(function(index))
  為每個(gè)對(duì)象包裹一層HTML結(jié)構(gòu)休玩，可以是selector, element, HTML string, jQuery object
  .wrapAll(wrappingElement)
  把所有匹配對(duì)象包裹在同一個(gè)HTML結(jié)構(gòu)
  .wrapInner(wrappingElement) / .wrapInner(function(index))
  用選中的元素包裹指定的HTML
  .unwrap()
  把DOM元素的parent移除
  題目8：使用 jQuery實(shí)現(xiàn)如下效果

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

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

地址
題目11：

地址