jQuery，顧名思義是JavaScript和查詢(xún)（Query），jQuery是免費(fèi)、開(kāi)源的。它可以簡(jiǎn)化查詢(xún)DOM對(duì)象、處理事件、制作動(dòng)畫(huà)、處理Ajax交互過(guò)程且兼容多瀏覽器的javascript庫(kù)，核心理念是write less,do more(寫(xiě)得更少,做得更多)。

jQuery優(yōu)勢(shì)

1. 體積小，使用靈巧（只需引入一個(gè)js文件）。

2. 方便的選擇頁(yè)面元素（模仿CSS選擇器更精確、靈活）。

3. 動(dòng)態(tài)更改頁(yè)面樣式/頁(yè)面內(nèi)容（操作DOM，動(dòng)態(tài)添加、移除樣式）。

4. 控制響應(yīng)事件（動(dòng)態(tài)添加響應(yīng)事件）。

5. 提供基本網(wǎng)頁(yè)特效（提供已封裝的網(wǎng)頁(yè)特效方法）。

6. 快速實(shí)現(xiàn)通信（ajax）。

7. 易擴(kuò)展、插件豐富。

8. 支持鏈?zhǔn)綄?xiě)法。

一、jQuery選擇器

• ID選擇器：$(“#box”);

• 類(lèi)名選擇器：$(“.box”);

• 標(biāo)簽選擇器：$(“div”);

• 后代選擇器：$(“#box p”);

• :first：獲取第一個(gè)元素。

• :last：獲取最后一個(gè)元素。

• :even：匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)。

• :odd：匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)。

• :eq(index)：匹配一個(gè)給定索引值的元素，從 0 開(kāi)始計(jì)數(shù)。

• :not(selector)：去除所有與給定選擇器匹配的元素。

• :has(selector)：匹配含有選擇器所匹配的元素的元素。

二、jQuery屬性和樣式CSS

操作屬性：

attr(name|properties|key,value|fn)：設(shè)置或返回被選元素的屬性值。

removeAttr(name)：從每一個(gè)匹配的元素中刪除一個(gè)屬性。

prop(name|properties|key,value|fn)：獲取在匹配的元素集中的第一個(gè)元素的屬性值。

removeProp(name)：用來(lái)刪除由.prop()方法設(shè)置的屬性集。

區(qū)別：attr可以操作（增刪改查）自定義的節(jié)點(diǎn)屬性，而prop不可以（增刪改查）。attr和prop對(duì)input的disabled屬性的返回值不一致，attr返回disabled或者undefined，而prop返回布爾值。

操作Class：

addClass(class|fn) ：為每個(gè)匹配的元素添加指定的類(lèi)名。

removeClass([class|fn]) ：從所有匹配的元素中刪除全部或者指定的類(lèi)。

toggleClass(class|fn[,switch])：如果存在（不存在）就刪除（添加）一個(gè)類(lèi)。

操作內(nèi)容：

html([val|fn])：取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

text([val|fn])：取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本。這個(gè)方法對(duì)HTML和XML文檔都有效。

val([val|fn|arr])：獲得匹配元素的當(dāng)前值。如果多選，將返回一個(gè)數(shù)組，其包含所選的值。

操作CSS：

css(name|pro|[,val|fn])：訪(fǎng)問(wèn)匹配元素的樣式屬性。

操作位置：

offset([coordinates])：獲取匹配元素在當(dāng)前文檔的相對(duì)偏移。返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。方法只對(duì)可見(jiàn)元素有效。

position()：獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性：top 和 left。為精確計(jì)算結(jié)果，請(qǐng)?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對(duì)可見(jiàn)元素有效。

scrollTop([val])：獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移。此方法對(duì)可見(jiàn)和隱藏元素均有效。

scrollLeft([val])：獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。此方法對(duì)可見(jiàn)和隱藏元素均有效。

操作尺寸：

height([val|fn])：取得匹配元素當(dāng)前計(jì)算的高度值（px）。

width([val|fn])：取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值（px）。

innerHeight()：獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度（包括補(bǔ)白、不包括邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。

innerWidth()：獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。

outerHeight([options])：獲取第一個(gè)匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。

outerWidth([options])：獲取第一個(gè)匹配元素外部寬度（默認(rèn)包括補(bǔ)白和邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。

注：設(shè)置options為true，計(jì)算margin在內(nèi)。

三、過(guò)濾查找

過(guò)濾元素：

eq(index|-index)：獲取第N個(gè)元素。這個(gè)元素的位置是從0算起，如果是負(fù)數(shù)，則從集合中的最后一個(gè)元素開(kāi)始倒數(shù)。

first()：獲取第一個(gè)元素。

last()：獲取最后一個(gè)元素。

hasClass(class)：檢查當(dāng)前的元素是否含有某個(gè)特定的類(lèi)，如果有，則返回true。

has(expr|ele)：保留包含特定后代的元素，去掉那些不含有指定后代的元素。

not(expr|ele|fn)：刪除與指定表達(dá)式匹配的元素。

查找元素：

children([expr])：取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有子元素的元素集合。只考慮子元素而不考慮所有后代元素。

find(expr|obj|ele)：搜索所有與指定表達(dá)式匹配的子元素。

parent([expr])：取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。

offsetParent()：返回第一個(gè)匹配元素用于定位的父節(jié)點(diǎn)。

next([expr])：取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合。

nextAll([expr])：查找當(dāng)前元素之后所有的同輩元素。

prev([expr])：取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。

prevAll([expr])：查找當(dāng)前元素之前所有的同輩元素。

siblings([expr])：取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有唯一同輩元素的元素集合。可以用可選的表達(dá)式進(jìn)行篩選。

串聯(lián)操作：

add(expr|ele|html|obj[,con])：把與表達(dá)式匹配的元素添加到j(luò)Query對(duì)象中。這個(gè)函數(shù)可以用于連接分別與兩個(gè)表達(dá)式匹配的元素結(jié)果集。返回的結(jié)果將始終以元素在HTML文檔中出現(xiàn)的順序來(lái)排序，而不再是簡(jiǎn)單的添加。

andSelf()：將先前所選的加入當(dāng)前元素中。

end()：回到最近的一個(gè)"破壞性"操作之前。即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。如果之前沒(méi)有破壞性操作，則返回一個(gè)空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。

四、jQuery事件

頁(yè)面載入事件：

ready(fn)：當(dāng)DOM載入就緒可以查詢(xún)及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。這是事件模塊中最重要的一個(gè)函數(shù)，因?yàn)樗梢詷O大地提高web應(yīng)用程序的響應(yīng)速度。簡(jiǎn)單地說(shuō)，這個(gè)方法純粹是對(duì)向window.load事件注冊(cè)事件的替代方法。

綁定事件：

on(events,[selector],[data],fn)：在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)。

off(events,[selector],[fn])：在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)。

bind(type,[data],fn)：為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。

unbind(type,[data|fn]])：bind()的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件。如果沒(méi)有參數(shù)，則刪除所有綁定的事件。

one(type,[data],fn)：為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。

hover([over,]out)：當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。

click([[data],fn])：觸發(fā)每一個(gè)匹配元素的click事件。這個(gè)函數(shù)會(huì)調(diào)用執(zhí)行綁定到click事件的所有函數(shù)。

注：其他事件方法使用方式一樣。例如：mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。

相關(guān)前端培訓(xùn)開(kāi)發(fā)技術(shù)知識(shí)，關(guān)注我，有更多精彩內(nèi)容與您分享！