JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 第10章 jQuery（下）

第10章jQuery（下）《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

掌握jQuery元素操作，能夠?qū)崿F(xiàn)元素的遍歷、查找、過濾、追加、復(fù)制、替換

和刪除操作

掌握jQuery尺寸和位置操作，能夠靈活應(yīng)用尺寸和位置操作方法獲取或設(shè)置元

素的尺寸、位置

掌握jQuery事件操作，能夠根據(jù)實(shí)際場景完成事件注冊、觸發(fā)、委托等操作

掌握jQuery動(dòng)畫，能夠根據(jù)不同場景使用jQuery實(shí)現(xiàn)元素的顯示、隱藏、滑動(dòng)、

停止、淡入淡出和自定義動(dòng)畫的效果

了解jQuery其他方法，能夠描述$.extend()方法和$.ajax()方法的作用章節(jié)概述/Summary第9章講解了jQuery的基本使用，相信讀者已經(jīng)掌握了使用jQuery開發(fā)常見網(wǎng)頁交互功能的技能。在jQuery中還提供了元素操作、尺寸和位置操作、事件操作、動(dòng)畫等方法，使用這些方法可以高效地開發(fā)更豐富的網(wǎng)頁交互功能。本章將對(duì)jQuery（下）進(jìn)行講解。目錄/Contents10.110.2jQuery元素操作jQuery尺寸和位置操作10.3jQuery事件操作目錄/Contents10.410.5jQuery動(dòng)畫jQuery其他方法10.6【案例】使用jQuery實(shí)現(xiàn)購物車功能jQuery元素操作10.1掌握元素遍歷操作，能夠使用each()方法實(shí)現(xiàn)元素遍歷操作

先定一個(gè)小目標(biāo)！10.1.1元素遍歷操作在jQuery中，當(dāng)需要對(duì)多個(gè)元素進(jìn)行相同的操作時(shí)，可以使用元素遍歷操作，從而減少代碼量。jQuery提供了each()方法用于快速實(shí)現(xiàn)元素遍歷操作，each()方法的語法格式如下。$(selector).each(function(index,domEle)){//具體操作});在上述語法格式中，selector表示選擇器，each()方法的參數(shù)是一個(gè)函數(shù)，該函數(shù)用于遍歷匹配的元素集合中的每個(gè)元素，函數(shù)的index參數(shù)表示元素的索引，domEle參數(shù)表示DOM元素對(duì)象。10.1.1元素遍歷操作$.each()方法可以遍歷任何對(duì)象，包括數(shù)組。$.each()方法的語法格式如下。$.each(collection,function(index,element)){//具體操作});上述語法格式中，collection表示被遍歷的對(duì)象，index表示數(shù)組元素索引或?qū)ο蟪蓡T名，element表示數(shù)組元素值或?qū)ο蟪蓡T值。10.1.1元素遍歷操作$.each()方法多學(xué)一招掌握元素查找和過濾操作，能夠靈活應(yīng)用jQuery中常用的元素查找方法和過濾方法10.1.2元素查找和過濾操作

先定一個(gè)小目標(biāo)！在前面的學(xué)習(xí)中，已經(jīng)了解了如何使用jQuery的選擇器獲取滿足某個(gè)條件的元素，jQuery還提供了一些查找和過濾元素的方法，用于快速獲取元素。10.1.2元素查找和過濾操作下面列舉jQuery中常用的元素查找方法和過濾方法，具體如下表所示。分類方法說明查找元素find(selector|ele)獲取當(dāng)前匹配元素集中每個(gè)元素的后代元素，通過選擇器selector或元素ele過濾parents([selector])獲取當(dāng)前匹配元素集中每個(gè)元素的祖先元素（不包含根元素）parent([selector])獲取當(dāng)前匹配元素集中每個(gè)元素的父元素siblings([selector])獲取當(dāng)前匹配元素集中每個(gè)元素的兄弟元素（不分前后）next([selector])獲取當(dāng)前匹配元素集中每個(gè)元素緊鄰的后一個(gè)兄弟元素prev([selector])獲取當(dāng)前匹配元素集中每個(gè)元素緊鄰的前一個(gè)兄弟元素10.1.2元素查找和過濾操作>>續(xù)上一頁表分類方法說明過濾元素eq(index)獲取索引index對(duì)應(yīng)的元素filter(selector|obj|ele|fn)使用選擇器selector、對(duì)象obj、元素ele或函數(shù)fn完成指定元素的篩選hasClass(class)檢查當(dāng)前的元素是否含有某個(gè)特定的類，如果有，則返回true，否則返回falseis(selector|obj|ele|fn)根據(jù)選擇器selector、對(duì)象obj、元素ele或函數(shù)fn檢查當(dāng)前匹配的一組元素，如果這些元素中至少有一個(gè)與給定的參數(shù)匹配，則返回truehas(selector|ele)保留包含特定后代元素的元素，去掉不含有特定后代元素的元素10.1.2元素查找和過濾操作掌握精品展示的案例，能夠編寫代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！10.1.3【案例】精品展示在電商網(wǎng)站的首頁設(shè)計(jì)中，通常會(huì)有精品展示的功能，該功能用于推送熱賣的商品，并支持快速切換商品。本案例將通過jQuery實(shí)現(xiàn)精品展示的功能，要求鼠標(biāo)指針經(jīng)過左側(cè)菜單時(shí)，在右側(cè)的圖片區(qū)域顯示對(duì)應(yīng)的商品圖。10.1.3【案例】精品展示掌握元素追加操作，能夠靈活應(yīng)用jQuery中常用的元素追加操作方法

先定一個(gè)小目標(biāo)！10.1.4元素追加操作10.1.4元素追加操作在網(wǎng)頁開發(fā)中，當(dāng)需要根據(jù)用戶行為動(dòng)態(tài)地添加頁面內(nèi)容時(shí)，可以使用元素追加操作。例如，用戶單擊某個(gè)按鈕時(shí)，頁面會(huì)展示新的圖片或打開新的菜單列表。10.1.4元素追加操作元素追加是指在現(xiàn)有的元素中進(jìn)行子元素或兄弟元素的添加。jQuery提供了元素追加方法，可以幫助開發(fā)者快速更新頁面內(nèi)容、改善用戶體驗(yàn)、增強(qiáng)頁面交互性。下面列舉jQuery中常用的元素追加方法，具體如下表所示。分類方法說明追加子元素append(content|fn)將參數(shù)指定的內(nèi)容插入匹配元素集中每個(gè)元素內(nèi)部的末尾prepend(content|fn)將參數(shù)指定的內(nèi)容插入匹配元素集中每個(gè)元素內(nèi)部的開頭appendTo(target)將匹配元素集中的每個(gè)元素插入目標(biāo)元素內(nèi)部的末尾prependTo(target)將匹配元素集中的每個(gè)元素插入目標(biāo)元素內(nèi)部的開頭10.1.4元素追加操作>>續(xù)上一頁表分類方法說明追加兄弟元素after(content|fn)在匹配元素集中的每個(gè)元素之后插入由參數(shù)指定的內(nèi)容before(content|fn)在匹配元素集中的每個(gè)元素之前插入由參數(shù)指定的內(nèi)容insertAfter(target)在目標(biāo)元素之后插入匹配元素集中的每個(gè)元素insertBefore(target)在目標(biāo)元素之前插入匹配元素集中的每個(gè)元素10.1.4元素追加操作掌握元素復(fù)制操作，能夠使用clone()方法實(shí)現(xiàn)元素復(fù)制操作

先定一個(gè)小目標(biāo)！10.1.5元素復(fù)制操作10.1.5元素復(fù)制操作在實(shí)際開發(fā)中，當(dāng)使用元素追加操作將匹配元素插入目標(biāo)元素的末尾或者開頭時(shí)，通常會(huì)移動(dòng)匹配元素的位置。若要實(shí)現(xiàn)在不移動(dòng)元素位置的情況下夠?qū)⑵ヅ湓夭迦肽繕?biāo)元素中，可以使用元素復(fù)制操作。在jQuery中，使用clone()方法可以實(shí)現(xiàn)元素復(fù)制操作，該方法的語法格式如下。element.clone([Events][,deepEvents])10.1.5元素復(fù)制操作上述語法格式中，參數(shù)Events表示是否復(fù)制元素的事件驅(qū)動(dòng)程序和數(shù)據(jù)，默認(rèn)為false；參數(shù)deepEvents表示是否深層復(fù)制，默認(rèn)為false。掌握元素替換和刪除操作，能夠靈活應(yīng)用jQuery中常用的元素替換和刪除方法

先定一個(gè)小目標(biāo)！10.1.6元素替換和刪除操作元素替換是指將選中的元素替換為指定的元素，元素刪除是指將選中的元素或某個(gè)元素的子元素刪除。在實(shí)際開發(fā)中，當(dāng)需要替換或刪除某個(gè)元素時(shí)，可以使用jQuery提供的元素替換方法或元素刪除方法。10.1.6元素替換和刪除操作下面列舉jQuery中常用的元素替換和刪除方法，具體如下表所示。分類方法說明元素替換replaceWith(newContent)將所有匹配的元素替換成新內(nèi)容，參數(shù)newContent表示新內(nèi)容，可以是HTML字符串、DOM元素、元素?cái)?shù)組或jQuery對(duì)象replaceAll(selector)用匹配的元素替換掉所有selector匹配到的元素元素刪除empty()刪除元素下的子元素，但不刪除元素本身remove([selector])刪除元素下的子元素和元素本身，可選參數(shù)selector用于篩選元素10.1.6元素替換和刪除操作jQuery尺寸和位置操作10.2掌握尺寸操作方法的使用，能夠靈活應(yīng)用jQuery中常用的尺寸操作方法10.2.1

尺寸操作方法

先定一個(gè)小目標(biāo)！jQuery提供的尺寸操作方法用于獲取或設(shè)置元素的高度和寬度，下面列舉jQuery中常用的尺寸操作方法，具體如下表所示。方法說明width()獲取第一個(gè)匹配元素的當(dāng)前寬度，返回?cái)?shù)字型結(jié)果width(value)為所有匹配的元素設(shè)置寬度，value可以是字符串或數(shù)字height()獲取第一個(gè)匹配元素的當(dāng)前高度，返回?cái)?shù)字型結(jié)果height(value)為所有匹配的元素設(shè)置高度，value可以是字符串或數(shù)字outerWidth([includeMargin])匹配獲取元素集中第一個(gè)元素的當(dāng)前計(jì)算的外部寬度，includeMargin表示是否包括邊距，默認(rèn)為false，表示不包括outerHeight(value[,includeMargin])為所有匹配的元素設(shè)置高度為value10.2.1

尺寸操作方法掌握位置操作方法的使用，能夠靈活應(yīng)用jQuery中常用的位置操作方法10.2.2位置操作方法

先定一個(gè)小目標(biāo)！jQuery提供的位置操作方法用于獲取或設(shè)置元素的位置，下面列舉jQuery中常用的位置操作方法，具體如下表所示。方法說明offset()獲取元素的位置，返回的是一個(gè)對(duì)象，包含left屬性和top屬性offset(coordinates)使用對(duì)象coordinates設(shè)置元素的位置，必須包含left屬性和top屬性scrollTop()和scrollLeft()獲取匹配元素相對(duì)滾動(dòng)條頂部和左部的位置scrollTop(value)和scrollLeft(value)設(shè)置匹配元素相對(duì)滾動(dòng)條頂部和左部的位置10.2.2位置操作方法jQuery事件操作10.3掌握頁面加載事件，能夠靈活應(yīng)用頁面加載事件實(shí)現(xiàn)將jQuery代碼寫在DOM元素前面

先定一個(gè)小目標(biāo)！10.3.1頁面加載事件10.3.1頁面加載事件頁面加載事件用于實(shí)現(xiàn)頁面的初始化。在使用jQuery操作DOM元素時(shí)，為了確保jQuery代碼能夠生效，需要將jQuery代碼寫在DOM元素后面，否則代碼不會(huì)生效。如果想要將jQuery代碼寫在DOM元素前面，就需要使用頁面加載事件來實(shí)現(xiàn)。10.3.1頁面加載事件在jQuery中，頁面加載事件的語法格式有3種，具體如下。$(document).ready(function(){}) //語法格式1$().ready(function(){}) //語法格式2$(function(){}) //語法格式3在上述語法格式中，ready()方法用于監(jiān)聽頁面加載事件。在頁面DOM元素加載完成后，將需要運(yùn)行的代碼寫到function()函數(shù)中，并傳遞給jQuery，由jQuery在合適的時(shí)機(jī)運(yùn)行。掌握事件注冊，能夠靈活應(yīng)用事件方法或on()方法實(shí)現(xiàn)事件注冊

先定一個(gè)小目標(biāo)！10.3.2事件注冊在前面學(xué)習(xí)DOM的相關(guān)知識(shí)時(shí)，講解了如何通過標(biāo)簽的屬性進(jìn)行事件注冊，以及如何在JavaScript代碼中獲取元素后使用“元素對(duì)象.事件屬性”完成事件的注冊。在jQuery中，實(shí)現(xiàn)事件注冊的方式有兩種，第1種方式是通過事件方法實(shí)現(xiàn)事件注冊，第2種方式是通過on()方法實(shí)現(xiàn)事件注冊。10.3.2事件注冊10.3.2事件注冊1.通過事件方法實(shí)現(xiàn)事件注冊在jQuery中通過調(diào)用某個(gè)事件方法，并傳入事件處理函數(shù)就可以實(shí)現(xiàn)事件注冊。jQuery的事件處理方法和DOM中的事件屬性相比，省略了開頭的“on”，例如，jQuery中的click()方法對(duì)應(yīng)DOM中的onclick事件屬性。jQuery中的事件方法允許多次調(diào)用，從而可以為一個(gè)事件注冊多個(gè)事件處理函數(shù)。下面列舉jQuery中常用的事件方法，具體如下表所示。10.3.2事件注冊分類方法說明表單事件blur([eventData][,handler])當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)focus([eventData][,handler])當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)change([eventData][,handler])當(dāng)元素的值發(fā)生改變時(shí)觸發(fā)focusin([eventData][,handler])在父元素上檢測子元素獲取焦點(diǎn)的情況focusout([eventData][,handler])在父元素上檢測子元素失去焦點(diǎn)的情況select([eventData][,handler])當(dāng)文本框（包括<input>和<textarea>）中的文本被選中時(shí)觸發(fā)submit([eventData][,handler])當(dāng)表單提交時(shí)觸發(fā)>>續(xù)上一頁表10.3.2事件注冊分類方法說明鍵盤事件keydown([eventData][,handler])按鍵盤按鍵時(shí)觸發(fā)keypress([eventData][,handler])按鍵盤按鍵（“Shift”“Fn”“CapsLock”等非字符鍵除外）時(shí)觸發(fā)keyup([eventData][,handler])鍵盤按鍵彈起時(shí)觸發(fā)鼠標(biāo)事件mouseover([eventData][,handler])當(dāng)鼠標(biāo)指針移入元素或其子元素時(shí)觸發(fā)mouseout([eventData][,handler])當(dāng)鼠標(biāo)指針移出元素或其子元素時(shí)觸發(fā)mouseenter([eventData][,handler])當(dāng)鼠標(biāo)指針移入元素時(shí)觸發(fā)mouseleave([eventData][,handler])當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)10.3.2事件注冊分類方法說明鼠標(biāo)事件click([eventData][,handler])當(dāng)單擊元素時(shí)觸發(fā)dblclick([eventData][,handler])當(dāng)雙擊元素時(shí)觸發(fā)mousedown([eventData][,handler])當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按鼠標(biāo)按鍵時(shí)觸發(fā)mouseup([eventData][,handler])當(dāng)在元素上放松鼠標(biāo)按鍵時(shí)會(huì)被觸發(fā)瀏覽器事件scroll([eventData][,handler])當(dāng)滾動(dòng)條發(fā)生變化時(shí)觸發(fā)resize([eventData][,handler])當(dāng)調(diào)整瀏覽器窗口的大小時(shí)會(huì)被觸發(fā)>>續(xù)上一頁表10.3.2事件注冊2.通過on()方法實(shí)現(xiàn)事件注冊jQuery提供的on()方法用于為元素注冊一個(gè)或多個(gè)事件，也可以為不同事件注冊相同的事件處理函數(shù)，通過on()方法注冊一個(gè)事件的語法格式如下。element.on(event,fn)通過on()方法注冊多個(gè)事件的語法格式如下。element.on({event:fn},{event:fn},…)通過on()方法為不同的事件注冊相同的事件處理函數(shù)的語法格式如下。element.on(events,fn)使用jQuery的排他操作清除元素樣式多學(xué)一招前面的章節(jié)講解了如何使用JavaScript排他操作實(shí)現(xiàn)高亮顯示被單擊的按鈕，在實(shí)際開發(fā)中，還可以使用jQuery的排他操作清除元素樣式。例如，頁面中有3個(gè)按鈕，當(dāng)單擊任意一個(gè)按鈕時(shí)，該按鈕的背景顏色將顯示為粉色，其他兩個(gè)按鈕的背景顏色不顯示。10.3.2事件注冊多學(xué)一招若要實(shí)現(xiàn)這樣的效果，則可以使用jQuery的排他操作，示例代碼如下。<body>

<button>按鈕1</button>

<button>按鈕2</button>

<button>按鈕3</button>

<script>

$('button').click(function(){

$(this).css('background','pink');

$(this).siblings('button').css('background','');

});

</script></body>10.3.2事件注冊掌握事件觸發(fā)，能夠靈活應(yīng)用事件方法、trigger()方法和triggerHandler()方法實(shí)現(xiàn)事件觸發(fā)

先定一個(gè)小目標(biāo)！10.3.3事件觸發(fā)通常在為元素注冊事件后，由用戶或?yàn)g覽器觸發(fā)事件，若希望某個(gè)事件在程序中被觸發(fā)，就需要手動(dòng)觸發(fā)這個(gè)事件。在jQuery中，實(shí)現(xiàn)事件觸發(fā)的方式有3種，第1種方式是通過事件方法實(shí)現(xiàn)事件觸發(fā)；第2種方式是通過trigger()方法實(shí)現(xiàn)事件觸發(fā)；第3種方式是通過triggerHandler()方法實(shí)現(xiàn)事件觸發(fā)。10.3.3事件觸發(fā)1.通過事件方法實(shí)現(xiàn)事件觸發(fā)在jQuery中，調(diào)用事件方法還可以實(shí)現(xiàn)事件觸發(fā)，兩者的區(qū)別在于是否傳入?yún)?shù)（傳入?yún)?shù)表示事件注冊，不傳入?yún)?shù)則表示事件觸發(fā)），示例代碼如下。<body>

<div>通過事件方法實(shí)現(xiàn)事件觸發(fā)</div>

<script>

//事件注冊

$('div').click(function(){

alert('Hello');

});

//事件觸發(fā)

$('div').click();

</script></body>10.3.3事件觸發(fā)2.通過trigger()方法實(shí)現(xiàn)事件觸發(fā)使用trigger()方法可以觸發(fā)指定事件，示例代碼如下。<body>

<div>通過trigger()方法實(shí)現(xiàn)事件觸發(fā)</div>

<script>

//事件注冊

$('div').click(function(){

alert('Hello');

});

//事件觸發(fā)

$('div').trigger('click');

</script></body>10.3.3事件觸發(fā)3.通過triggerHandler()方法實(shí)現(xiàn)事件觸發(fā)通過事件方法和trigger()方法觸發(fā)事件時(shí)，都會(huì)運(yùn)行元素的默認(rèn)行為，而通過triggerHandler()方法觸發(fā)事件時(shí)不會(huì)運(yùn)行元素的默認(rèn)行為。元素的默認(rèn)行為是指用戶執(zhí)行某個(gè)動(dòng)作后元素自動(dòng)產(chǎn)生的行為，例如，文本框獲取焦點(diǎn)時(shí)有光標(biāo)閃爍的現(xiàn)象。10.3.3事件觸發(fā)掌握事件委托，能夠使用on()方法實(shí)現(xiàn)事件委托

先定一個(gè)小目標(biāo)！10.3.4事件委托事件委托是指把原本要給子元素注冊的事件委托給父元素，也就是將子元素的事件注冊到父元素上。事件委托的優(yōu)勢在于，可以為未來動(dòng)態(tài)創(chuàng)建的元素注冊事件，其原理是將事件委托給父元素后，在父元素中動(dòng)態(tài)創(chuàng)建的子元素也會(huì)擁有事件。10.3.4事件委托在jQuery中，事件委托通過on()方法實(shí)現(xiàn)，on()方法的語法格式如下。element.on(event,selector,fn)10.3.4事件委托上述語法格式中，event表示事件類型，selector表示子元素選擇器，fn表示事件處理函數(shù)。掌握事件解除，能夠使用off()方法實(shí)現(xiàn)事件解除

先定一個(gè)小目標(biāo)！10.3.5事件解除事件解除是指移除元素所注冊的事件，在jQuery中，事件解除通過off()方法實(shí)現(xiàn)。off()方法的語法格式如下。element.off(event,selector)上述語法格式中，當(dāng)off()方法中不傳入?yún)?shù)時(shí)，表示解除元素上的所有事件；當(dāng)off()方法中只傳入event參數(shù)時(shí)，表示解除元素上注冊的指定事件；當(dāng)off()方法中傳入event參數(shù)和selector參數(shù)時(shí)，表示解除元素上的事件委托。10.3.5事件解除one()方法多學(xué)一招one()方法用于注冊一次性事件。在網(wǎng)頁開發(fā)中，若希望元素的某個(gè)事件只觸發(fā)一次，可以使用one()方法實(shí)現(xiàn)。例如，為div元素注冊一次性單擊事件，示例代碼如下。10.3.5事件解除<body>

<div>div元素</div>

<script>

$('div').one('click',function(){

console.log('為div元素注冊一次性單擊事件');

});

</script></body>掌握事件對(duì)象，能夠使用事件對(duì)象阻止默認(rèn)行為和事件冒泡

先定一個(gè)小目標(biāo)！10.3.6事件對(duì)象10.3.6事件對(duì)象當(dāng)事件被觸發(fā)時(shí)，就會(huì)產(chǎn)生事件對(duì)象，在事件處理函數(shù)中可以使用參數(shù)接收事件對(duì)象。除此之外，還可以使用事件對(duì)象阻止默認(rèn)行為和事件冒泡。下面通過代碼演示如何查看事件對(duì)象。<body>

<div>單擊事件對(duì)象</div>

<script>

$('div').click(function(event){

console.log(event);

});

</script></body>10.3.6事件對(duì)象首先單擊頁面中的“單擊事件對(duì)象”，然后查看事件對(duì)象的輸出結(jié)果，如下圖所示。10.3.6事件對(duì)象下面通過代碼演示如何使用事件對(duì)象阻止默認(rèn)行為和事件冒泡。

<body>

<ahref="1.html">請(qǐng)單擊</a>

<script>

$(document).on('click',function(){

console.log('單擊了document');

});

$('a').on('click',function(event){

event.preventDefault();

//阻止事件默認(rèn)行為

console.log('單擊了a');

});

</script></body>10.3.6事件對(duì)象若要阻止事件冒泡，可以添加如下代碼。event.stopPropagation() //阻止事件冒泡掌握Tab欄切換的案例，能夠編寫代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！10.3.7【案例】Tab欄切換Tab是指頁面中的標(biāo)簽，Tab欄切換是一種常見的網(wǎng)頁特效，在網(wǎng)頁開發(fā)中，使用Tab欄切換可以提高用戶的體驗(yàn)，當(dāng)用戶單擊頁面中的標(biāo)簽時(shí)，會(huì)顯示當(dāng)前標(biāo)簽下的內(nèi)容。10.3.7【案例】Tab欄切換10.3.7【案例】Tab欄切換下面將通過一個(gè)案例演示Tab欄切換的實(shí)現(xiàn)，本案例的具體實(shí)現(xiàn)思路如下。編寫頁面結(jié)構(gòu)。使用div元素、ul元素和li元素分別定義Tab欄列表結(jié)構(gòu)和展示當(dāng)前標(biāo)簽下的頁面結(jié)構(gòu)。編寫頁面樣式。當(dāng)單擊當(dāng)前標(biāo)簽時(shí)，當(dāng)前標(biāo)簽的背景顏色為綠色。通過jQuery實(shí)現(xiàn)業(yè)務(wù)邏輯。當(dāng)單擊頂部標(biāo)簽欄中的li元素時(shí)，當(dāng)前l(fā)i元素添加current類名，其他兄弟元素移除current類名，并且同時(shí)得到當(dāng)前l(fā)i元素的索引，讓內(nèi)容區(qū)域中相應(yīng)索引的內(nèi)容顯示，其他內(nèi)容隱藏。在瀏覽器中進(jìn)行測試，運(yùn)行結(jié)果如下圖所示。10.3.7【案例】Tab欄切換當(dāng)單擊列表標(biāo)簽中的“規(guī)格與包裝”時(shí)，運(yùn)行結(jié)果如下圖所示。jQuery動(dòng)畫10.4掌握顯示和隱藏效果，能夠靈活應(yīng)用控制元素顯示和隱藏的方法

先定一個(gè)小目標(biāo)！10.4.1顯示和隱藏效果10.4.1顯示和隱藏效果在某個(gè)電商平臺(tái)的頁面開發(fā)中，假設(shè)需要給用戶提供商品篩選的功能，由于頁面空間有限，需要當(dāng)用戶單擊“展開篩選條件”按鈕時(shí)，展開篩選條件，用戶完成篩選后將篩選條件收起。若要實(shí)現(xiàn)這個(gè)開發(fā)需求，則可以使用jQuery中的顯示和隱藏效果。jQuery中控制元素顯示和隱藏效果的方法如下表所示。方法說明show([duration][,easing][,complete])顯示被隱藏的匹配元素hide([duration][,easing][,complete])隱藏已顯示的匹配元素toggle([duration][,easing][,complete])元素顯示和隱藏切換掌握滑動(dòng)效果，能夠靈活應(yīng)用控制元素上滑和下滑的方法

先定一個(gè)小目標(biāo)！10.4.2滑動(dòng)效果在網(wǎng)頁開發(fā)中，使用滑動(dòng)效果可以提升用戶體驗(yàn)，例如，在開發(fā)垂直導(dǎo)航菜單時(shí)，可以通過滑動(dòng)效果設(shè)置當(dāng)用戶單擊導(dǎo)航菜單后，子菜單下拉顯示，再次單擊則收起子菜單。jQuery中常用slideDown()方法和slideUp()方法實(shí)現(xiàn)滑動(dòng)效果，其中，slideDown()方法可以讓HTML元素或者文本自上而下逐漸顯示，而slideUp()方法則是將HTML元素或者文本自下而上逐漸隱藏。10.4.2滑動(dòng)效果jQuery中控制元素上滑和下滑的方法和說明，具體如下表所示。方法說明slideDown([duration][,easing][,complete])垂直滑動(dòng)顯示匹配元素（自上而下逐漸顯示）slideUp([duration][,easing][,complete])垂直滑動(dòng)隱藏匹配元素（自下而上逐漸隱藏）slideToggle([duration][,easing][,complete])在slideDown()和slideUp()兩種方法實(shí)現(xiàn)的效果之間切換10.4.2滑動(dòng)效果掌握停止效果，能夠使用stop()方法停止動(dòng)畫

先定一個(gè)小目標(biāo)！10.4.3停止效果如果在同一個(gè)元素上調(diào)用了一個(gè)以上的動(dòng)畫方法，則該元素除了當(dāng)前正在運(yùn)行的動(dòng)畫，其他的動(dòng)畫將被放到一個(gè)隊(duì)列中，這樣就形成了動(dòng)畫隊(duì)列。動(dòng)畫隊(duì)列中的動(dòng)畫都是按照順序運(yùn)行的，默認(rèn)只有當(dāng)?shù)?個(gè)動(dòng)畫運(yùn)行完畢，才會(huì)運(yùn)行下一個(gè)動(dòng)畫。如果想運(yùn)行動(dòng)畫隊(duì)列中的第2個(gè)動(dòng)畫或其他動(dòng)畫，則需要停止元素當(dāng)前正在運(yùn)行的動(dòng)畫。當(dāng)需要停止動(dòng)畫時(shí)，可以使用jQuery提供的stop()方法，其語法格式如下。10.4.3停止效果element.stop([clearQueue][,jumpToEnd])在程序中調(diào)用stop()方法時(shí)，如果設(shè)置的參數(shù)不同，則會(huì)實(shí)現(xiàn)不同的效果。下面以div元素為例，演示使用stop()方法的3種常用方式，示例代碼如下。10.4.3停止效果$('div').stop();$('div').stop(true);$('div').stop(true,true);掌握淡入淡出效果，能夠靈活應(yīng)用控制元素淡入和淡出的方法

先定一個(gè)小目標(biāo)！10.4.4淡入淡出效果在某個(gè)電商網(wǎng)站的開發(fā)中，為了提高用戶體驗(yàn)，需要在首頁展示熱門商品，并提供一個(gè)“查看更多”的按鈕。當(dāng)用戶單擊該按鈕時(shí)，若要讓新加載的商品平滑漸顯，就可以使用jQuery中控制元素淡入和淡出的方法。10.4.4淡入淡出效果下面列舉jQuery中控制元素淡入和淡出的方法，具體如下表所示。方法說明fadeIn([duration][,easing][,complete])淡入顯示匹配元素fadeOut([duration][,easing][,complete])淡出隱藏匹配元素fadeTo(duration,opacity[,easing][,complete])以淡入淡出方式將匹配元素調(diào)整到指定的透明度fadeToggle([duration][,easing][,complete])在fadeIn()和fadeOut()兩種方法實(shí)現(xiàn)的效果間切換10.4.4淡入淡出效果下面通過代碼進(jìn)行演示，實(shí)現(xiàn)鼠標(biāo)指針移入盒子時(shí)突出顯示，其他盒子以0.2透明度顯示。10.4.4淡入淡出效果初始效果、當(dāng)鼠標(biāo)指針移入第1個(gè)盒子時(shí)效果，如下圖所示。掌握自定義動(dòng)畫的實(shí)現(xiàn)，能夠使用jQuery提供的animate()方法自定義動(dòng)畫

先定一個(gè)小目標(biāo)！10.4.5自定義動(dòng)畫在網(wǎng)頁開發(fā)中，當(dāng)顯示、隱藏、滑動(dòng)、停止和淡入淡出的動(dòng)畫效果無法滿足用戶的實(shí)際需求時(shí)，可以使用jQuery提供的animate()方法自定義動(dòng)畫，該方法的語法格式如下。10.4.5自定義動(dòng)畫element.animate(properties[,duration][,easing][,complete])上述語法格式中，參數(shù)properties表示一組包含動(dòng)畫最終屬性值的集合，如果屬性名由兩個(gè)單詞組成，需要使用駝峰命名法，如background-color，需要寫為backgroundColor。掌握手風(fēng)琴效果的案例，能夠編寫代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！10.4.6【案例】手風(fēng)琴效果下面將通過jQuery動(dòng)畫實(shí)現(xiàn)手風(fēng)琴效果的案例進(jìn)行講解，本案例的具體實(shí)現(xiàn)思路如下。編寫頁面結(jié)構(gòu)。在頁面中定義7個(gè)不同顏色的小方塊，將每個(gè)小方塊的寬度和高度都設(shè)置為69px，當(dāng)鼠標(biāo)指針經(jīng)過不同顏色的小方塊時(shí)，小方塊將變?yōu)殚L度為224px，高度為69px的大方塊。編寫頁面樣式。為7個(gè)小方塊設(shè)置不同的背景顏色，并且采用十六進(jìn)制來區(qū)分。為了使頁面樣式更加美觀，大方塊的背景顏色采用接近于當(dāng)前小方塊的背景顏色。10.4.6【案例】手風(fēng)琴效果通過jQuery實(shí)現(xiàn)交互效果。當(dāng)鼠標(biāo)指針移動(dòng)到小方塊時(shí)，會(huì)觸發(fā)鼠標(biāo)指針移入事件。在使用選擇器獲取頁面中的小方塊時(shí)，通過fadeIn()方法和fadeOut()方法控制方塊的顯示與隱藏。10.4.6【案例】手風(fēng)琴效果初始效果、當(dāng)鼠標(biāo)指針移入第3個(gè)小方塊時(shí)效果，如下圖所示。jQuery其他方法10.5了解$.extend()方法的使用，能夠描述$.extend()方法的作用

先定一個(gè)小目標(biāo)！10.5.1$.extend()方法$.extend()方法可以將一個(gè)對(duì)象的成員賦值給另一個(gè)對(duì)象使用，其語法格式如下。$.extend([deep],target,object1[,objectN])上述語法格式中，參數(shù)deep為可選參數(shù)，如果設(shè)置為true表示深復(fù)制，默認(rèn)值為false，表示淺復(fù)制；參數(shù)target表示需要復(fù)制的目標(biāo)對(duì)象，后面可以跟多個(gè)對(duì)象（object1~objectN）；參數(shù)object1表示待復(fù)制的第一個(gè)對(duì)象；參數(shù)objectN表示待復(fù)制的第N個(gè)對(duì)象。當(dāng)不同對(duì)象中存在相同的成員名時(shí)，后面的對(duì)象的成員會(huì)覆蓋前面的對(duì)象的成員。10.5.1$.extend()方法了解$.ajax()方法的使用，能夠描述$.ajax()方法的作用

先定一個(gè)小目標(biāo)！10.5.2$.ajax()方法jQuery提供了$.ajax()方法用于通過Ajax（AsynchronousJavaScriptAndXML，異步JavaScript和XML）技術(shù)請(qǐng)求服務(wù)器，獲取服務(wù)器的響應(yīng)結(jié)果。Ajax技術(shù)用于在瀏覽器中通過JavaScript向服務(wù)器發(fā)送請(qǐng)求，接收服務(wù)器返回的結(jié)果。10.5.2$.ajax()方法除$.ajax()方法外，jQuery還提供了get()方法、post()方法和load()方法發(fā)送Ajax請(qǐng)求。下面列舉jQuery中常用的Ajax操作方法，具體如下表所示。分類方法說明高級(jí)應(yīng)用$.get(url[,data][,fn][,type])通過GET請(qǐng)求載入信息$.post(url[,data][,fn][,type])通過POST請(qǐng)求載入信息$.getJSON(url[,data][,fn])通過GET請(qǐng)求載入JSON數(shù)據(jù)$.getScript(url[,fn])通過GET請(qǐng)求載入并執(zhí)行一個(gè)JavaScript文件底層應(yīng)用對(duì)象.load(url[,data][,fn])載入遠(yuǎn)程HTML文件代碼并將其插入DOM$.ajax(url[,options])請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)$.ajaxSetup(options)設(shè)置全局Ajax默認(rèn)選項(xiàng)10.5.2$.ajax()方法常用的Ajax選項(xiàng)如下表所示。選項(xiàng)名稱說明url處理Ajax請(qǐng)求的服務(wù)器地址data發(fā)送Ajax請(qǐng)求時(shí)傳遞的參數(shù)（字符串型）successAjax請(qǐng)求成功時(shí)所觸發(fā)的回調(diào)函數(shù)type發(fā)送的HTTP請(qǐng)求方式，如GET、POSTdatatype期待的返回值類型，如XML、JSON、SCRIPT或HTML數(shù)據(jù)類型10.5.2$.ajax()方法>>續(xù)上一頁表選項(xiàng)名稱說明async是否異步，true