jQuery能做什么

jQuery是一個(gè)優(yōu)秀的JavaScript庫。jQuery憑借著簡潔的語法以及跨平臺(tái)的兼容性，極大簡化了遍歷HTML，操作DOM，處理事件，執(zhí)行動(dòng)畫和開發(fā)ajax操作。jquery有如下優(yōu)勢

• 輕量級(jí)：采用UglifyJS壓縮后，大小保持在30k。
• 強(qiáng)大的選擇器：允許開發(fā)者使用從CSS1到CSS3幾乎所有的選擇器，以及jquery獨(dú)創(chuàng)的高級(jí)選擇器。
• 出色的DOM操作封裝
• 可靠的事件處理機(jī)制
• 完善的ajax：jquery將ajax操作封裝到一個(gè)函數(shù)$.ajax()里
• 不污染頂級(jí)變量：jquery只簡歷一個(gè)名為jQuery的對象，其所有的函數(shù)方法都在這個(gè)對象之下。
• 出色的瀏覽器兼容性
• 鏈?zhǔn)讲僮鞣绞?/li>
• 隱式迭代
• 行為層與結(jié)構(gòu)層的分離
• 豐富的插件支持
• 完善的文檔
• 開源

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

DOM原生對象都可以表示成一棵樹，一個(gè)html文檔中的比如<h3>，<p>等節(jié)點(diǎn)都是DOM元素節(jié)點(diǎn)，可以通過JavaScript方法中的getElementById或者getElementsByTagName來獲取元素節(jié)點(diǎn)。像這樣得到的元素就是DOM對象。DOM對象可以使用JavaScript中的方法。
而jQuery對象就是通過jQuery包裝之后產(chǎn)生的對象，jQuery對象是jQuery獨(dú)有的，如果一個(gè)對象是jQuery對象，那么就可以使用jQuery里的方法。
但是在jQuery對象中無法使用DOM對象的任何方法，同樣的，DOM對象也不能使用jQuery的方法。
如果要將二者相互轉(zhuǎn)換，首先要明白，如果獲取的對象是jquery對象，那么在變量前加上$，比如

var $variable = jQuery對象

如果獲取的是DOM對象，則

var variable = DOM對象

其次，jquery提供了兩種方法將jquery對象轉(zhuǎn)換為DOM對象，即[index]和get(idnex)。
(1)首先，jquery是一個(gè)類數(shù)組對象，可以通過[index]來得到相應(yīng)的DOM對象。jquery對象如下

var $cr = $('#cr')   //jquery對象
var cr = $cr[0]; //DOM對象

(2)另一種方法是jquery提供的，可以通過get(index)方法來將其轉(zhuǎn)化為dom對象。jquery代碼如下

var $cr = $('#cr') //jquery對象
var cr = $cr.get(0) //DOM對象

如果是將DOM對象轉(zhuǎn)換為jquery對象的話，可以利用$()將DOM對象包裝起來，就可以獲得一個(gè)jquery對象。

var cr = document.getElementById('cr') //DOM對象
var $cr = $(cr) //jquery對象

jQuery中如何綁定事件？

bind()

可以利用bind()方法來對匹配的元素進(jìn)行事件的綁定，具體的bind()方法為

bind( type [.data] . fn)

bind()方法有三個(gè)參數(shù)，具體如下

• 第1個(gè)參數(shù)是事件的類型，類型包括click、blur、focus、mouseover、mousemove等，當(dāng)然也可以是自定義的名稱。
• 第2個(gè)參數(shù)為可選參數(shù)，作為event data屬性值傳遞給事件對象的額外數(shù)據(jù)對象。
• 第3個(gè)參數(shù)則是用來綁定的處理函數(shù)。

unbind()

unbind()作用是解除jquery對象的事件綁定，能夠移除所有的，或者是被選定的事件處理程序，或者是當(dāng)事件發(fā)生時(shí)候終止事件的運(yùn)行。

delegate()

delegate()的方法是為指定的元素綁定一個(gè)或者多個(gè)事件，并且規(guī)定這些事件發(fā)生時(shí)候運(yùn)行的函數(shù)。使用delegate()方法一般用于當(dāng)前元素或者未來元素(比如由腳本創(chuàng)建的元素)。
delegate()里面有這幾個(gè)參數(shù)，delegate(childSelector,event,data,function)

• childSelector：必需，規(guī)定要附加事件的一個(gè)或者多個(gè)子元素。
• event：必需，規(guī)定附加到元素的一個(gè)或多個(gè)事件。
• data：可選，規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
• function：必需，規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。

live()

live() 方法為被選元素附加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）。
基本的語法為live(event, data,function)。

• event：必需，規(guī)定附加到元素的一個(gè)或多個(gè)事件。
• data：可選，規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
• function：必需，規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。

on()

on()，一般的用法為.on( events [,selector ] [,data ], handler(eventObject) )，其參數(shù)意義如下所述

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

off()

off()，用來移除一個(gè)事件的處理函數(shù)，基本用法為.off( events [, selector ] [, handler ] )。參數(shù)意義和on()基本類似。

常用的方法

一般情況下常用的方法為on()/off()方法來綁定事件以及移除事件處理函數(shù)，利用on()來綁定事件的寫法是，例子如下

$('div').on('click', function(e){
    console.log(this);
    console.log(e);
});

jQuery 如何展示/隱藏元素？

• 展示元素可以利用show：
  $(selector).show(speed,callback);
  可選的參數(shù)speed：規(guī)定元素從隱藏到完全可見的速度，默認(rèn)為0。
  可選的參數(shù)callback：show函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。
  本質(zhì)上show方法是修改元素的display為block。
• 隱藏元素可以利用
  $(selector).hide(speed,callback);
  參數(shù)同上（這里的speed表示從顯示到隱藏的速度），本質(zhì)上hide方法是修改元素的display為none。

jQuery動(dòng)畫使用

可以利用animate()來創(chuàng)建自定義動(dòng)畫，基本語法如下

.animate({params}, speed, callback);

參數(shù)意義分別是：
params 定義形成動(dòng)畫的 CSS 屬性(動(dòng)畫結(jié)束后的CSS)必選
speed 規(guī)定效果的時(shí)長.值:slow,fast或毫秒,可選
callback 動(dòng)畫完成后所執(zhí)行的函數(shù),可選
.delay()設(shè)置一個(gè)定時(shí)器，以延遲 執(zhí)行隊(duì)列中后續(xù)的項(xiàng)目。
.clearQueue()從隊(duì)列中刪除所有還沒有運(yùn)行過的項(xiàng)目。
.stop()在匹配的元素上停止當(dāng)前正在運(yùn)行的動(dòng)畫。
.finish()針對匹配的元素 停止當(dāng)前 正在運(yùn)行的動(dòng)畫，刪除所有 隊(duì)列中的動(dòng)畫，并結(jié)束所有 動(dòng)畫

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

可以分別利用$(selector).html()來獲取元素html內(nèi)容
可以利用$(selector).text()來獲取文本內(nèi)容
如果要修改元素內(nèi)部文本和html內(nèi)容，可以在.html()以及.text()括號(hào)內(nèi)加入傳遞的參數(shù)。即arguments。

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

對于獲取表單信息可以利用

$(selector).val(); //獲取表單用戶輸入值
$(selector).val(arguments); //設(shè)置輸入值
$(selector).attr(attrName); //獲取元素屬性
$(selector).attr(attrName , 'xxx'); //設(shè)置元素屬性的值