題目1： jQuery 能做什么？

1. 選擇網(wǎng)頁元素
2. 改變結(jié)果集
3. 元素的操作：取值和賦值
4. 元素的操作：移動(dòng)
5. 元素的操作：復(fù)制、刪除和創(chuàng)建
6. 工具方法
7. 事件操作
8. 特殊效果
9. AJAX

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

區(qū)別：

• DOM原生對(duì)象是用原生JavaScript獲取的對(duì)象，只接受原生JavaScript操作方法。
• jQuery對(duì)象是用jQuery類庫(kù)提供的選擇器獲取的對(duì)象，只接受jQuery提供的操作方法。

轉(zhuǎn)化：

• DOM => jQuery： 用jQuery的 $() 函數(shù)包裹即可

  var div = document.querySelector('div')
  var $div = $(div)
  $div.html('hello world')
  

• jQuery => DOM： jQuery對(duì)象是一個(gè)類數(shù)組對(duì)象，用下標(biāo)選擇后即可使用DOM方法

  var $div = $('div')
  $div[0].innerHTML = 'hello world'
  

參考文章： DOM對(duì)象和jQuery對(duì)象的區(qū)別

題目3：jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

jQuery如何綁定事件：

• 版本號(hào)小于1.7，使用 bind() 、 live() 、 delegate()(3.0已移除) 綁定事件
• 版本號(hào)大于1.7，使用 on() 綁定事件

?bind、unbind、delegate、live、on、off都有什么作用：

• bind：為一個(gè)元素綁定一個(gè)事件處理程序
• unbind：從元素上刪除一個(gè)以前附加事件處理程序
• delegate：為所有匹配選擇器（selector參數(shù)）的元素綁定一個(gè)或多個(gè)事件處理函數(shù)，基于一個(gè)指定的根元素的子集，匹配的元素包括那些目前已經(jīng)匹配到的元素，也包括那些今后可能匹配到的元素
• live：附加一個(gè)事件處理器到匹配目前選擇器的所有元素
• on：在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)
• off：移除一個(gè)事件處理函數(shù)

推薦使用 on()/off() 方法綁定/解綁事件

on()綁定事件使用事件代理的寫法：

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

看起來參數(shù)及其復(fù)雜，我們看一下各個(gè)參數(shù)的意思

• events：一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
• selector：一個(gè)選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件
• data：當(dāng)一個(gè)事件被觸發(fā)時(shí)，要傳遞給事件處理函數(shù)的event.data
• handler(eventObject)：事件被觸發(fā)時(shí)，執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡(jiǎn)寫成 false

注意：命名空間沒什么特別的作用，只不過在解綁事件時(shí)便于區(qū)分綁定的事件v

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

jQuery 使用 show()/hide() 展示／隱藏元素，使用 toggle()切換元素的 展示／隱藏

.show( [duration ] [, easing ] [, complete ] )
.hide( [duration ] [, easing ] [, complete ] )
.toggle( [duration ] [, easing ] [, complete ] )

參數(shù)的含義：

• duration: 動(dòng)畫持續(xù)多久，單位是毫秒
• easing: 過渡使用哪種緩動(dòng)函數(shù)，jQuery自身提供 linear 和 swing
• complete: 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

題目5： jQuery 動(dòng)畫如何使用？

jQuery動(dòng)畫分為基礎(chǔ)、漸變、滑動(dòng)、自定義等4種類型

基礎(chǔ)：

• .hide([duration ] [, easing ] [, complete ]): 用于隱藏元素，沒有參數(shù)的時(shí)候等同于直接設(shè)置 display 屬性
• .show([duration ] [, easing ] [, complete ]): 用于顯示元素，用法和 hide 類似
• .toggle([duration ] [, easing ] [, complete ]): 用來切換元素的隱藏、顯示，類似于 toggleClass ，用法和 show 、 hide 類似

漸變：

• .fadeIn([duration ] [, easing ] [, complete ]): 通過淡入的方式顯示匹配元素，參數(shù)含義和上面相同
• .fadeOut([duration ] [, easing ] [, complete ]): 通過淡出的方式隱藏匹配元素
• .fadeTo(duration, opacity [, easing ] [, complete ]): 調(diào)整匹配元素的透明度，方法通過匹配元素的不透明度做動(dòng)畫效果，使用參數(shù) opacity 設(shè)置不透明度
• .fadeToggle([duration ] [, easing ] [, complete ]): 通過匹配的元素的不透明度動(dòng)畫，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫。當(dāng)被可見元素調(diào)用時(shí)，元素不透明度一旦達(dá)到0，display樣式屬性設(shè)置為none ，所以元素不再影響頁面的布局

滑動(dòng)：

• .slideDown( [duration ] [, easing ] [, complete ] ): 用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁面的下面部分滑下去，彌補(bǔ)了顯示的方式
• .slideUp( [duration ] [, easing ] [, complete ] ): 用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局。 display 樣式屬性將被設(shè)置為none，以確保該元素不再影響頁面布局
• .slideToggle( [duration ] [, easing ] [, complete ] ): 用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁面中，在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值。如果一個(gè)元素的display屬性值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline。當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局

自定義動(dòng)畫：

• .animate( properties [, duration ] [, easing ] [, complete ] ): jQuery提供的自定義動(dòng)畫的方法，用于滿足更復(fù)雜的需求。properties是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)
• .clearQueue(): 清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫
• .finish: 停止當(dāng)前動(dòng)畫，并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)
• .stop( [clearQueue ] [, jumpToEnd ] ): 停止當(dāng)前正在運(yùn)行的動(dòng)畫

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

使用 html([string]) 方法可以獲取和設(shè)置元素內(nèi)部的 HTML 內(nèi)容。這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的 innerHTML

• 當(dāng)沒有傳遞參數(shù)的時(shí)候，返回元素的 innerHTML
• 當(dāng)傳遞了一個(gè) string 參數(shù)的時(shí)候，修改元素的 innerHTML 為參數(shù)值

$('div').html()
$('div').html('123')

• 如果結(jié)果多個(gè)，獲取值的時(shí)候，返回結(jié)果集中的第一個(gè)對(duì)象的相應(yīng)值
• 如果結(jié)果是多個(gè)進(jìn)行賦值操作的時(shí)候會(huì)給每個(gè)結(jié)果都賦值

使用 text([string]) 方法可以獲取和設(shè)置元素內(nèi)部的 innerText 值，使用方法和 html([string]) 方法類似

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

.val([value]) 方法可以獲取／設(shè)置用戶輸入或選擇的內(nèi)容。這是一個(gè)讀寫雙用的方法，用來處理input的value，當(dāng)方法沒有參數(shù)的時(shí)候返回input的value值，當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候，方法修改input的value值為參數(shù)值

$('input').val()
$('input').val('newValue');

attr() 方法可以設(shè)置／獲取元素的屬性

• attr(attributeNme): 獲取元素特定屬性的值

  var title = $( "em" ).attr( "title" )
  

• .attr(attributeName,value)/.attr(attributesJson)/.attr(attributeName,function(index, attr)): 為元素屬性賦值

  // .attr(attributeName, value)
  $( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" )
  
  // .attr(attributesJson)
  $( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
  })
  
  // .attr(attributeName, function(index, attr))
  $( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark"
  })
  

removeAttr() 方法為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性(attribute)

題目8

demo

題目9

demo

題目10

demo

題目11

demo