《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》教案匯 周文潔 第9-14章 jQuery特效 -思政答題程序的設(shè)計(jì)與實(shí)現(xiàn)

《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)》教案第9章jQuery特效一、教學(xué)目標(biāo)：掌握jQuery隱藏/顯示相關(guān)函數(shù)hide()、show()和toggle()的用法；掌握jQuery淡入/淡出相關(guān)函數(shù)fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法；掌握jQuery滑動(dòng)相關(guān)函數(shù)slideDown()、slideUp()、slideToggle()的用法；掌握jQuery動(dòng)畫(huà)（Animation）的用法；掌握jQuery方法鏈接（Chaining）的用法；掌握jQuery停止動(dòng)畫(huà)相關(guān)函數(shù)stop()的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery常用特效（隱藏/顯示、淡入淡出、滑動(dòng)）；難點(diǎn)：jQuery動(dòng)畫(huà)和方法鏈接的用法。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：本章主要介紹jQuery常用特效，包括jQuery隱藏和顯示、淡入和淡出、滑動(dòng)、動(dòng)畫(huà)、方法鏈接以及停止動(dòng)畫(huà)效果。五、教學(xué)基本內(nèi)容：9.1jQuery隱藏和顯示jQuery可以控制元素的隱藏和顯示，包括自定義變化效果的持續(xù)時(shí)間。其中hide()方法用于隱藏指定的元素，show()方法用于顯示指定的元素。9.1.1jQueryhide()jQueryhide()方法用于隱藏指定的HTML元素。其語(yǔ)法結(jié)構(gòu)如下：$(selector).hide([duration][,callback]);該方法中selector參數(shù)位置可以是任意有效的選擇器，hide()方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置隱藏動(dòng)作的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為隱藏動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。使用不帶任何參數(shù)的hide()方法，可實(shí)現(xiàn)無(wú)動(dòng)畫(huà)效果的隱藏動(dòng)作。該方法能立刻隱藏處于顯示狀態(tài)的元素，相當(dāng)于將指定元素的CSS屬性設(shè)置為“display:none”。例如：$("p").hide();該代碼表示立刻隱藏文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。帶有duration參數(shù)值的jQueryhide()方法擁有動(dòng)畫(huà)效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒。9.1.2jQueryshow()jQueryshow()方法用于顯示指定元素。其語(yǔ)法結(jié)構(gòu)如下：$(selector).show([duration][,callback]);同jQueryhide()方法類(lèi)似，該方法中selector參數(shù)位置可以是任意有效的選擇器，show()方法中的兩個(gè)參數(shù)均為可選，duration參數(shù)用于設(shè)置顯示的持續(xù)時(shí)間，可填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為顯示動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。使用不帶任何參數(shù)的show()方法，可實(shí)現(xiàn)無(wú)動(dòng)畫(huà)效果的顯示動(dòng)作。該方法能立刻顯示處于隱藏狀態(tài)的元素。例如：$("p").show();該代碼表示立刻顯示文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。帶有duration參數(shù)值的jQueryshow()方法擁有動(dòng)畫(huà)效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒?！纠?-1】jQuery隱藏和顯示的應(yīng)用分別使用無(wú)參數(shù)和帶有duration參數(shù)值的hide()和show()方法，測(cè)試元素的隱藏和顯示效果。9.1.3jQuerytoggle()jQuerytoggle()方法用于切換元素的隱藏和顯示。該方法可以替代hide()和show()方法單獨(dú)使用，用于顯示已隱藏的元素，或隱藏正在顯示的元素。【例9-2】jQuery隱藏/顯示切換的應(yīng)用使用toggle()方法切換元素的隱藏/顯示效果。9.2jQuery淡入和淡出jQuery可以控制元素的透明度，使元素顏色加深或者淡化。相關(guān)方法有如下4種：fadeIn()：通過(guò)更改元素的透明度逐漸加深元素顏色，直至元素完全顯現(xiàn)，又稱(chēng)為淡入。fadeOut()：通過(guò)更改元素的透明度逐漸淡化元素顏色，直至元素完全隱藏，又稱(chēng)為淡出。fadeToggle()：元素淡出淡入效果切換，可用于淡入隱藏的元素，也可用于淡出可見(jiàn)的元素fadeTo()：用于將元素變?yōu)橹付ǖ耐该鞫龋〝?shù)值介于0-1之間）9.2.1jQueryfadeIn()jQueryfadeIn()方法用于實(shí)現(xiàn)元素的淡入效果，即將原先隱藏的元素逐漸顯示出來(lái)。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeIn([duration][,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeIn()方法中的兩個(gè)參數(shù)均為可選參數(shù)。參數(shù)duration用于規(guī)定淡入效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeIn()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。9.2.2jQueryfadeOut()jQueryfadeOut()用于實(shí)現(xiàn)元素的淡出效果，即將原先存在的元素逐漸隱藏起來(lái)。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeOut([duration][,callback])與fadeIn()方法類(lèi)似，該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeOut()方法中的兩個(gè)參數(shù)也均為可選參數(shù)。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeOut()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。【例9-3】jQuery淡入和淡出的應(yīng)用分別使用無(wú)參數(shù)和帶有duration參數(shù)值的fadeIn()和fadeOut()方法，測(cè)試元素的淡入和淡出效果。9.2.3jQueryfadeToggle()jQueryfadeToggle()方法用于切換元素的淡出淡入效果。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeToggle([duration][,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)?！纠?-4】jQuery淡出/淡入切換的應(yīng)用使用fadeToggle()方法切換元素的淡出/淡入效果。9.2.4jQueryfadeTo()jQueryfadeTo()方法用于指定漸變效果的透明度，透明度的數(shù)值介于0至1之間。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeTo(duration,opacity[,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器。fadeTo()方法中的參數(shù)解釋如下：duration：該參數(shù)為必填內(nèi)容，表示透明度漸變的持續(xù)時(shí)間，其默認(rèn)單位為毫秒，可填入“fast”或“slow”分別代表200毫秒和600毫秒的持續(xù)時(shí)間，也可填入自定義的數(shù)值，填入的數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，因此動(dòng)畫(huà)效果越緩慢；opacity：該參數(shù)為必填內(nèi)容，用于設(shè)置元素的透明度。透明度的數(shù)值必須在0至1之間，數(shù)值越小透明度越高，0為完全透明，1為非透明；callback：該參數(shù)為可選內(nèi)容，用于指定當(dāng)前效果結(jié)束后的下一個(gè)函數(shù)名稱(chēng)，如果沒(méi)有可以省略不填?！纠?-5】jQuery設(shè)置淡入/淡出漸變值9.3jQuery滑動(dòng)jQuery的滑動(dòng)共有3種方法效果：slideDown()：向下滑動(dòng)元素slideUp()：向上滑動(dòng)元素slideToggle()：切換向上和向下滑動(dòng)元素9.3.1jQueryslideDown()jQueryslideDown()方法用于向下滑動(dòng)元素。其語(yǔ)法結(jié)構(gòu)如下：$(selector).slideDown([duration][,callback])該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向下滑動(dòng)效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動(dòng)動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。jQueryslideDown()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒。9.3.2jQueryslideUp()jQueryslideUp()方法用于向上滑動(dòng)元素。其語(yǔ)法結(jié)構(gòu)如下：$(selector).slideUp([duration][,callback])該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向上滑動(dòng)效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動(dòng)動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。jQueryslideUp()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒?！纠?-6】jQuery滑動(dòng)的應(yīng)用使用帶有duration參數(shù)值的slideUp()和slideDown()方法分別演繹投影幕上升和下降的滑動(dòng)效果。9.3.3jQueryslideToggle()jQueryslideToggle()方法用于切換滑動(dòng)方向，其語(yǔ)法結(jié)構(gòu)如下：$(selector).slideToggle([duration][,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是slideToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)?！纠?-7】jQuery滑動(dòng)方向切換的應(yīng)用修改例9-35中的部分代碼，使用slideToggle()方法代替slideUp()和slideDown()方法，用同一個(gè)按鈕切換投影幕上升和下降的滑動(dòng)效果。9.4jQuery動(dòng)畫(huà)jQueryanimate()方法通過(guò)更改元素的CSS屬性值實(shí)現(xiàn)動(dòng)畫(huà)效果。其語(yǔ)法結(jié)構(gòu)如下：$(selector).animate({params}[,duration][,callback])其中params參數(shù)為必填，duration和callback參數(shù)為可選。參數(shù)的具體解釋如下：params參數(shù)表示形成動(dòng)畫(huà)的CSS屬性，允許同時(shí)實(shí)現(xiàn)多個(gè)屬性的改變；duration參數(shù)表示規(guī)定的效果時(shí)長(zhǎng)，默認(rèn)單位為毫秒，可以填入”slow”、”fast”或具體數(shù)值。其中“fast”表示持續(xù)時(shí)間為200毫秒，“slow”表示為600毫秒。若填入具體數(shù)值，則數(shù)值越大動(dòng)畫(huà)效果越緩慢；callback參數(shù)表示動(dòng)畫(huà)完成后需要執(zhí)行的函數(shù)名稱(chēng)，若無(wú)下一步需執(zhí)行的函數(shù)可省略不填。9.4.1改變?cè)鼗緦傩詊Queryanimate()方法可以用于實(shí)現(xiàn)絕大部分CSS屬性的變化，例如元素的寬度、高度、透明度等。但是jQuery核心庫(kù)中并沒(méi)有包含色彩變化效果，因此如果要實(shí)現(xiàn)顏色動(dòng)畫(huà)，需要在jQuery的官方網(wǎng)站另外下載色彩動(dòng)畫(huà)的相關(guān)插件。當(dāng)CSS屬性名稱(chēng)中包含連字符“-”時(shí)，需要使用Camel標(biāo)記法（注：又稱(chēng)為駝峰標(biāo)記法，其特點(diǎn)是首個(gè)單詞小寫(xiě)、接下來(lái)的單詞都以首字母大寫(xiě)的一種形式。）進(jìn)行重新改寫(xiě)。例如，字體大小在CSS屬性中寫(xiě)為“font-size”，如需在jQueryanimate()中使用則必須改寫(xiě)為“fontSize”。jQueryanimate()方法可作用于各種HTML元素，如段落元素<p>、標(biāo)題元素<h1>、塊元素<div>等。以一個(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開(kāi)始動(dòng)畫(huà)效果</button><br><div>你好，jQuery動(dòng)畫(huà)！</div>為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫(xiě)法如下：<style>div{width:200px;height:200px;background-color:yellow}</style>這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為黃色。為<div>元素設(shè)置動(dòng)畫(huà)效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動(dòng)畫(huà)內(nèi)容。$("#btn").click(function(){$("div").animate({ width:"400px", fontSize:"30px", opacity:0.25 },2000);});此段代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫(huà)效果，在2秒的持續(xù)時(shí)間內(nèi)<div>元素的寬度從200像素變?yōu)?00像素，字體大小從默認(rèn)值變?yōu)?0像素，透明度從默認(rèn)值1變?yōu)?.25。完整代碼如例9-8所示?！纠?-8】jQuery簡(jiǎn)單動(dòng)畫(huà)效果【代碼說(shuō)明】jQueryanimate()方法中長(zhǎng)度的單位默認(rèn)為像素（px），因此本例中的寬度和字體大小直接寫(xiě)數(shù)值并省略默認(rèn)單位，效果完全一樣。9.4.2改變?cè)匚恢胘Queryanimate()方法也可以通過(guò)使用CSS屬性中的方位值left、right、top和bottom改變?cè)匚恢脤?shí)現(xiàn)移動(dòng)效果。由于這些屬性值均為相對(duì)值，而在HTML中所有元素的position屬性值均默認(rèn)為靜態(tài)（static）無(wú)法移動(dòng)的，因此需要事先設(shè)置指定元素的position為relative、absolute或者fixed方能生效。以一個(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開(kāi)始移動(dòng)</button><br><div>你好，jQuery動(dòng)畫(huà)！</div>為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫(xiě)法如下：<style>div{width:100px;height:100px;background-color:green;color:white;position:relative}</style>這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為綠色，元素初始位置為相對(duì)位置。為<div>元素設(shè)置動(dòng)畫(huà)效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動(dòng)畫(huà)內(nèi)容。$("#btn").click(function(){$("div").animate({ left:"+=200",top:"+=100" },2000);});});上述代碼表示當(dāng)點(diǎn)擊id為"btn"的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫(huà)效果。在2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，并且同時(shí)向下垂直移動(dòng)100像素。其中l(wèi)eft:"+=200"和top:"+=100"為相對(duì)值寫(xiě)法，表示相對(duì)于初始位置的移動(dòng)效果并省略了單位像素（px）。完整代碼如例9-9所示?！纠?-9】jQuery位置移動(dòng)動(dòng)畫(huà)效果9.4.3動(dòng)畫(huà)隊(duì)列jQuery可以為多個(gè)連續(xù)的animate()方法創(chuàng)建動(dòng)畫(huà)隊(duì)列，然后依次執(zhí)行隊(duì)列中的每一項(xiàng)動(dòng)畫(huà)從而實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫(huà)效果。在同一個(gè)animate()方法中描述的多個(gè)動(dòng)畫(huà)效果會(huì)同時(shí)發(fā)生，但在不同的animate()方法中描述的動(dòng)畫(huà)效果會(huì)按照動(dòng)畫(huà)隊(duì)列中的先后次序發(fā)生。以一個(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開(kāi)始移動(dòng)</button><br><div>你好，jQuery動(dòng)畫(huà)！</div>為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫(xiě)法如下：<style>div{width:100px;height:100px;color:white;background-color:purple;position:relative}</style>這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為紫色，元素初始位置為相對(duì)位置。為<div>元素設(shè)置多種動(dòng)畫(huà)效果，當(dāng)點(diǎn)擊按鈕時(shí)依次執(zhí)行這些動(dòng)畫(huà)內(nèi)容。$("#btn").click(function(){ $("div").animate({left:"+=200",opacity:0.25},2000); $("div").animate({top:"+=100",opacity:0.5},2000); $("div").animate({left:"-=200",opacity:0.75},2000); $("div").animate({top:"-=100",opacity:1},2000);});上述代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫(huà)效果，具體效果如下：在第1、2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，透明度變?yōu)?.25；在第3、4秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向下垂直移動(dòng)100像素，透明度變?yōu)?.5；在第5、6秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向左平移200像素，透明度變?yōu)?.75；在第7、8秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向上垂直移動(dòng)100像素，透明度變?yōu)?。完整代碼如例9-10所示?！纠?-10】jQuery動(dòng)畫(huà)隊(duì)列效果9.5jQuery方法鏈接jQuery允許在同一個(gè)元素上連續(xù)運(yùn)行多條jQuery命令，這種技術(shù)成為jQuery方法鏈接（Chaining）。對(duì)于同一個(gè)元素，如果有多個(gè)動(dòng)作需要依次執(zhí)行，只需要將新的動(dòng)作追加到上一個(gè)動(dòng)作后面，形成一個(gè)方法鏈，無(wú)需每次重復(fù)查找選擇相同的元素。其基本語(yǔ)法如下：$(selector).action1().action2().action3()......actionN();也可以每個(gè)動(dòng)作另起一行，寫(xiě)法如下：$(selector).action1().action2().action3().......actionN();前面的action動(dòng)作可以任意換行，只要最后一個(gè)動(dòng)作加上分號(hào)表示完成即可。jQuery會(huì)自動(dòng)過(guò)濾多余的空格和折行，并按照單行方法鏈接進(jìn)行執(zhí)行?！纠?-11】jQuery方法鏈接的應(yīng)用9.6jQuery停止動(dòng)畫(huà)在jQuery中stop()方法可用于停止動(dòng)畫(huà)或效果。其語(yǔ)法結(jié)構(gòu)如下：$(selector).stop([stopAll][,goToEnd]);該方法中selector參數(shù)位置可以是任意有效的選擇器。stop()方法中的兩個(gè)參數(shù)均為可選參數(shù)，參數(shù)具體解釋如下：stopAll：用于規(guī)定是否清除后續(xù)的所有動(dòng)畫(huà)內(nèi)容，可填入布爾值。其默認(rèn)值為false，表示僅停止當(dāng)前動(dòng)畫(huà)，允許動(dòng)畫(huà)隊(duì)列中的后續(xù)動(dòng)畫(huà)繼續(xù)執(zhí)行。goToEnd：用于規(guī)定是否立即完成當(dāng)前的動(dòng)畫(huà)內(nèi)容，可填入布爾值。其默認(rèn)值為false，表示直接終止當(dāng)前的動(dòng)畫(huà)效果。【例9-12】jQuerystop()方法的應(yīng)用自定義一段動(dòng)畫(huà)效果，并使用帶有不同參數(shù)內(nèi)容的stop()方法對(duì)比停止效果的不同之處?！敬a說(shuō)明】本示例包含了一個(gè)測(cè)試段落元素<p>，在CSS內(nèi)部樣式表中為其設(shè)置初始樣式：寬和高均為200像素，背景顏色為橙色，字體大小為18像素。并為其自定義了三組動(dòng)畫(huà)連續(xù)播放，分別是：寬度縮小至100像素、高度縮小至100像素、字體大小放大至30像素。設(shè)置了開(kāi)始按鈕用于啟動(dòng)動(dòng)畫(huà)，當(dāng)點(diǎn)擊該按鈕則開(kāi)始依次播放這三組動(dòng)畫(huà)效果。并設(shè)置了三個(gè)停止按鈕，分別是stop()方法無(wú)參數(shù)形式、stop(true,false)以及stop(true,true)的參數(shù)形式。其中圖(a)為頁(yè)面初始加載效果，后面三幅圖均為開(kāi)始播放第一段動(dòng)畫(huà)（寬度減少）時(shí)使用stop()方法的停止效果，不同之處在于stop()的參數(shù)形式。圖(b)為使用了stop()方法的停止效果，由圖可見(jiàn)無(wú)參數(shù)的stop()方法僅停止了寬度減少這一個(gè)動(dòng)畫(huà)內(nèi)容，后續(xù)減少高度與放大字體的動(dòng)畫(huà)均正常執(zhí)行。圖(c)為使用stop(true,false)方法的停止效果，由圖可見(jiàn)該方法立即停止了后續(xù)的所有動(dòng)畫(huà)，畫(huà)面定格在寬度減少的過(guò)程中。圖(d)為使用stop(true,true)方法的停止效果，由圖可見(jiàn)該方法立即停止了并完成了當(dāng)前第一段動(dòng)畫(huà)，即將寬度減少至100像素，然后停止了后續(xù)的所有動(dòng)畫(huà)內(nèi)容。9.7階段案例：動(dòng)態(tài)下拉菜單特效9.7.1案例需求背景介紹：動(dòng)態(tài)下拉菜單特效在很多高校、企業(yè)等單位的門(mén)戶網(wǎng)站上很受歡迎，當(dāng)用戶瀏覽網(wǎng)頁(yè)時(shí)將鼠標(biāo)擺放在菜單導(dǎo)航橫欄的一級(jí)欄目上，就會(huì)有各類(lèi)動(dòng)畫(huà)特效顯示出下方的二級(jí)菜單欄目列表。功能要求：使用jQuery制作一款動(dòng)態(tài)下拉菜單特效。9.7.2界面設(shè)計(jì)本案例使用無(wú)序列表<ul>和列表項(xiàng)<li>制作一級(jí)菜單，并為其中部分列表項(xiàng)制作二級(jí)菜單列表。創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如DynamicMenu.html。在HTML5中使用<nav>元素聲明菜單區(qū)域，在其中嵌套<divid="navWrap">容器實(shí)現(xiàn)主要內(nèi)容居中并限制寬度，其內(nèi)部使用<ul>和<li>元素制作一級(jí)菜單，相關(guān)代碼如下：1. <body>2. <!--菜單區(qū)域-->3. <nav>4. <!--內(nèi)部區(qū)域-->5. <divid="navWrap">6. <!--菜單列表-->7. <ul>8. <liclass="mainmenu"><ahref="#">網(wǎng)站首頁(yè)</a></li>9. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>10. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>11. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>12. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>13. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>14. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>15. </ul>16. </div>17. </nav>18. </body>使用<dl>和<dd>制作二級(jí)菜單列表項(xiàng)，開(kāi)發(fā)者可以自行把它加入到一個(gè)或多個(gè)一級(jí)菜單的<li>元素內(nèi)部，這里節(jié)選加到第2個(gè)<li>元素中查看效果，代碼片段如下：1. <!--菜單列表-->2. <ul>3. <liclass="mainmenu"><ahref="#">網(wǎng)站首頁(yè)</a></li>4. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a>5. <!--二級(jí)菜單-->6. <dlstyle="display:none;">7. <dd><ahref="#">選項(xiàng)一</a></dd>8. <dd><ahref="#">選項(xiàng)二</a></dd>9. <dd><ahref="#">選項(xiàng)三</a></dd>10. </dl>11. </li>12. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>13. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>14. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>15. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>16. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>17. </ul>為<dl>元素添加style屬性使其暫時(shí)隱藏。本示例使用CSS外部樣式表規(guī)定頁(yè)面樣式。在本地css文件夾中創(chuàng)建menu.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>我的菜單</title>4. <linkrel="stylesheet"href="css/menu.css">5. </head>在CSS外部樣式表中為所有元素清除內(nèi)外邊距，相關(guān)CSS代碼如下：1. /*公共樣式*/2. *{3. margin:0;/*清除外邊距*/4. padding:0;/*清除內(nèi)邊距*/5. }為<nav>和內(nèi)部容器設(shè)置樣式，相關(guān)CSS代碼如下：1. /*菜單區(qū)域*/2. nav{3. width:100%;/*寬度100%自適應(yīng)瀏覽器寬度*/4. height:56px;/*高度56px*/5. text-align:center;/*文本居中對(duì)齊*/6. background-color:#0b6cb8;/*背景顏色藍(lán)色*/7. }8. /*菜單內(nèi)部容器*/9. #navWrap{10. width:1200px;/*寬度1200px*/11. margin:0auto;/*外邊距上下0左右auto*/12. }菜單中的列表容器<ul>和一級(jí)菜單列表項(xiàng)<li>元素設(shè)置樣式，相關(guān)CSS代碼如下：1. /*菜單列表樣式*/2. navul{3. list-style:none;/*清除裝飾點(diǎn)*/4. }5. /*一級(jí)菜單樣式*/6. navulli{7. float:left;/*左浮動(dòng)*/8. }最后為菜單中的超鏈接<a>設(shè)置樣式，相關(guān)CSS代碼如下：1. /*超鏈接樣式*/2. nava{3. display:block;/*塊級(jí)元素*/4. width:160px;/*寬度160px*/5. color:white;/*文本顏色白色*/6. background-color:#0b6cb8;/*背景顏色藍(lán)色*/7. text-align:center;/*文本居中對(duì)齊*/8. text-decoration:none;/*清除下劃線效果*/9. padding:15px0;/*內(nèi)邊距上下15px左右0*/10. font-size:20px;/*字體大小20px*/11. }12. /*超鏈接樣式-鼠標(biāo)懸浮時(shí)*/13. nava:hover{14. background-color:#0a5894;/*背景顏色深藍(lán)色*/15. }此時(shí)CSS樣式設(shè)置就全部完成了。9.7.3邏輯實(shí)現(xiàn)下拉菜單效果需要使用到j(luò)Query的相關(guān)功能，因此首先在<head>標(biāo)簽中添加對(duì)于jQuery的調(diào)用。相關(guān)HTML5代碼修改后如下：1. <head>2. <metacharset="utf-8">3. <title>我的菜單</title>4. <linkrel="stylesheet"href="css/menu.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. </head>在<script>的文檔準(zhǔn)備就緒函數(shù)中監(jiān)聽(tīng)鼠標(biāo)進(jìn)入和離開(kāi)一級(jí)菜單區(qū)域，相關(guān)代碼如下：1. <script>2. //文檔準(zhǔn)備就緒3. $(document).ready(function(){4. //鼠標(biāo)進(jìn)入一級(jí)菜單區(qū)域5. $('.mainmenu').mouseover(function(){6. $(this).find("dl").slideDown(1000);//下滑特效7. });8. 9. //鼠標(biāo)離開(kāi)一級(jí)菜單區(qū)域10. $('.mainmenu').mouseleave(function(){11. $(this).find("dl").slideUp(1000);//上升特效12. }); 13. })14. </script>上述代碼表示，當(dāng)鼠標(biāo)進(jìn)入一級(jí)菜單時(shí)，如果該菜單包含了二級(jí)菜單<dl>元素則使用下滑特效在1秒內(nèi)下拉出現(xiàn)二級(jí)菜單列表；當(dāng)鼠標(biāo)離開(kāi)一級(jí)菜單時(shí)使用上升特效在1秒內(nèi)將二級(jí)菜單列表收起隱藏。此時(shí)本項(xiàng)目就已經(jīng)全部完成了。9.7.4案例思考【拓展練習(xí)】請(qǐng)借鑒真實(shí)高校主頁(yè)菜單風(fēng)格為菜單選項(xiàng)填上合適的文字，使其更加真實(shí)?！具M(jìn)階改造】嘗試使用fadeIn()和fadeOut()替換slideDown()和slideUp()，制作菜單的淡入淡出效果。9.8本章小結(jié)本章首先介紹了三組jQuery常用特效，包括元素的隱藏和顯示、淡入和淡出、上下滑動(dòng)和切換；其次介紹了jQuery動(dòng)畫(huà)效果，該效果是通過(guò)更改元素的CSS屬性值來(lái)實(shí)現(xiàn)的；然后介紹了jQuery方法鏈接技術(shù)，該技術(shù)允許在同一個(gè)元素上連續(xù)運(yùn)行多條jQuery命令；最后介紹了jQuerystop()方法用于停止動(dòng)畫(huà)或常用特效，開(kāi)發(fā)者可以根據(jù)自定義的參數(shù)值決定是僅停止當(dāng)前動(dòng)畫(huà)還是停止后續(xù)所有隊(duì)列中的動(dòng)畫(huà)效果。本章階段案例介紹了動(dòng)態(tài)下拉菜單特效，使用jQuery事件綁定技術(shù)為一級(jí)菜單綁定了mouseover和mouseleave的監(jiān)聽(tīng)，使用slideDown()和slideUp()實(shí)現(xiàn)了二級(jí)菜單列表的滑動(dòng)特效。六、課后習(xí)題1.jQuery特效中哪兩個(gè)函數(shù)分別用于元素的隱藏和顯示？答：隱藏是hide()，顯示是show()。2.jQuery特效中哪兩個(gè)函數(shù)分別用于元素的淡入和淡出？答：淡入是fadeIn()，淡出是fadeOut()。3.jQuery特效中哪兩個(gè)函數(shù)分別用于元素的向上和向下滑動(dòng)？答：向上滑動(dòng)是slideUp()，向下滑動(dòng)是slideDown()。4.試用jQuery方法鏈接對(duì)段落元素<p>依次執(zhí)行隱藏-顯示-淡入-淡出的系列動(dòng)作，每個(gè)動(dòng)作均要求持續(xù)3秒？答：參考代碼如下：$(“p”).hide(3000).show(3000).fadeIn(3000).fadeOut(3000);5.請(qǐng)問(wèn)stop(true,false)停止的是哪些狀態(tài)的動(dòng)畫(huà)效果？答：該方法立即停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà)片段，并且也會(huì)立即停止后續(xù)的所有動(dòng)畫(huà)。《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》教案第10章jQueryHTMLDOM一、教學(xué)目標(biāo)：掌握jQuery獲取和設(shè)置相關(guān)函數(shù)text()、html()、val()、attr()、css()的使用；掌握jQuery添加相關(guān)函數(shù)append()和prepend()、after()和before()的使用；掌握jQuery刪除相關(guān)函數(shù)remove()、empty()和removeAttr()的使用；掌握jQuery類(lèi)屬性設(shè)置相關(guān)函數(shù)addClass()、removeClass()和toggleClass()的使用；掌握jQuery尺寸相關(guān)width()、height()系列函數(shù)的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery常用DOM函數(shù)的用法（獲取/設(shè)置、添加、刪除）；難點(diǎn)：jQuery類(lèi)屬性設(shè)置相關(guān)函數(shù)的使用。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：DOM指的是DocumentObjectModel（文檔對(duì)象模型），jQuery提供了一系列與DOM相關(guān)的方法能讓用戶更方便的選擇和操作HTML文檔中的元素及其屬性。本章主要內(nèi)容是jQueryHTMLDOM技術(shù)的應(yīng)用，包括jQuery獲取和設(shè)置、添加、刪除、類(lèi)屬性設(shè)置以及尺寸相關(guān)函數(shù)的應(yīng)用。五、教學(xué)基本內(nèi)容：10.1jQuery獲取和設(shè)置jQuery能獲取或設(shè)置5種特定內(nèi)容，具體見(jiàn)表10-1所示。表10-SEQ表12-\*ARABIC1jQuery獲取或設(shè)置常見(jiàn)方法方法名稱(chēng)解釋text()獲取或設(shè)置選定元素標(biāo)簽之間的文本內(nèi)容。html()獲取或設(shè)置選定元素標(biāo)簽的全部?jī)?nèi)容，包括HTML標(biāo)記本身。val()獲取或設(shè)置選定表單元素字段的值。attr()獲取或設(shè)置選定元素的屬性值。css()獲取或設(shè)置選定元素的CSS屬性值。以上5種方法用于獲取特定內(nèi)容時(shí)，括號(hào)中不填寫(xiě)任何內(nèi)容；用于設(shè)置時(shí)，括號(hào)中需要添加用于設(shè)置的新內(nèi)容，并且用引號(hào)括住。10.1.1jQuerytext()jQuerytext()可用于獲取或設(shè)置選定元素標(biāo)簽之間的文本內(nèi)容，不包含元素標(biāo)簽本身。1. 獲取文本內(nèi)容當(dāng)使用不帶任何參數(shù)的text()方法，可以獲取選定元素標(biāo)簽之間所有的文本內(nèi)容。其語(yǔ)法格式如下：$(selector).text()該方法的返回結(jié)果為字符串類(lèi)型，包含了所有匹配元素內(nèi)部的文本內(nèi)容。例如id="test01"的段落元素<p>表示如下：<pid="test01">hello</p>使用$("p#test01").text()方法獲取其中的文本內(nèi)容，返回值為：hello返回值只包含文本內(nèi)容，不帶有前后的HTML標(biāo)簽。如果是元素內(nèi)部的后代元素中包含有文本，則使用text()也會(huì)獲取其中的文本內(nèi)容。例如以下情況：<divid="container"><p>element<i>1</i></p><p>element<strong>2</strong></p></div>上述代碼在id="container"的<div>元素中包含了兩個(gè)段落元素<p>，并且這兩個(gè)段落元素內(nèi)部的文本內(nèi)容還分別包括了格式標(biāo)簽<i>和<strong>。此時(shí)使用$("div#container").text()方法獲取該<div>元素的文本內(nèi)容，返回值為：element1element2返回值只包含文本內(nèi)容，其中的格式化標(biāo)簽<i>和<strong>均被忽略。需要注意的是，text()方法不能用于處理表單元素的文本內(nèi)容，如果需要獲取或設(shè)置表單中<textarea>或<input>元素的文本值需要使用val()方法。2. 設(shè)置文本內(nèi)容設(shè)置選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).text("新文本內(nèi)容")【例10-1】jQuerytext()方法獲取和設(shè)置文本內(nèi)容使用text()方法獲取和設(shè)置指定元素的文本內(nèi)容?！敬a說(shuō)明】需要注意的是，text()方法只能用于設(shè)置元素中的純文本內(nèi)容，無(wú)法帶有格式化標(biāo)簽。如果需要添加格式化標(biāo)簽或其他子元素標(biāo)簽，可以使用html()方法。10.1.2jQueryhtml()jQueryhtml()用于獲取或設(shè)置選定元素標(biāo)簽的全部?jī)?nèi)容，包括內(nèi)部的文本以及其他HTML標(biāo)記。該方法調(diào)用的是JavaScript原生屬性innerHTML。1. 獲取HTML內(nèi)容獲取選定元素標(biāo)簽之間HTML代碼內(nèi)容的方法如下：$(selector).html()作為獲取元素的HTML內(nèi)容時(shí)，該方法無(wú)需帶有參數(shù)。例如某段HTML代碼如下：<divclass="test"><div>這是一段內(nèi)容。</div></div>使用$("div.test").html()獲取到的結(jié)果如下：<div>這是一段內(nèi)容。</div>需要注意的是，如果符合要求的元素不止一個(gè)，該方法也只獲取第一個(gè)符合選擇器要求的元素內(nèi)部HTML代碼。例如：<divclass="test"><divclass="style01">這是第一段內(nèi)容。</div></div><divclass="test"><divclass="style02">這是第二段內(nèi)容。</div></div>上述代碼中有兩個(gè)<div>均具有相同屬性class="test"，其內(nèi)部HTML代碼不同。使用$("div.test").html()方法獲取的結(jié)果如下：<divclass="style01">這是第一段內(nèi)容。</div>該方法表示獲取屬性class="test"的<div>標(biāo)簽內(nèi)部HTML代碼。由于class屬性可以分配給任意元素，因此如果有多個(gè)<div>元素符合class="test"條件，也只獲取第一個(gè)符合的元素標(biāo)簽內(nèi)部的HTML代碼。2. 設(shè)置HTML內(nèi)容設(shè)置選定元素標(biāo)簽之間HTML內(nèi)容的方法如下：$(selector).html("新HTML內(nèi)容")【例10-2】jQueryhtml()方法獲取和設(shè)置HTML內(nèi)容使用html()方法獲取和設(shè)置指定元素的HTML內(nèi)容。10.1.3jQueryval()jQueryval()用于獲取或設(shè)置選定表單元素的value屬性值。1. 獲取表單元素值獲取選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).val()2. 設(shè)置表單元素值設(shè)置選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).val("新文本內(nèi)容")【例10-3】jQueryval()方法獲取和設(shè)置表單元素字段值使用val()方法獲取和設(shè)置表單元素的值。10.1.4jQueryattr()jQueryattr()用于獲取或設(shè)置選定元素的屬性值。1. 獲取元素屬性值獲取選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).attr(attributeName)該方法只能獲取符合條件的第一個(gè)元素的值。例如以下這種情況：<imgsrc="image/flower.jpg"/><imgsrc="image/balloon.jpg"/>如果使用$("img").attr("src")只能獲取第一個(gè)<img>元素的src屬性值，即image/flower.jpg。2. 設(shè)置元素屬性值設(shè)置選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).attr(attributeName,value)該方法可以將所有符合條件的元素屬性值全部設(shè)置。例如：$("a").attr("href","")上述代碼會(huì)將所有超鏈接元素<a>的href屬性更改為。【例10-4】jQueryattr()方法獲取和設(shè)置元素屬性值使用attr()方法獲取和設(shè)置圖像元素<img>的src屬性值。10.1.5jQuerycss()jQuerycss()用于獲取或設(shè)置選定元素的CSS屬性值。1. 獲取CSS屬性值獲取選定元素標(biāo)簽CSS屬性的方法如下：$(selector).css(propertyName)其中selector可以是任意有效的jQuery選擇器，propertyName參數(shù)位置為CSS屬性名稱(chēng)。該方法可以獲得符合條件的第一個(gè)元素的指定CSS屬性值。例如：varbgColor=$("p").css("background-color");上述代碼表示獲取頁(yè)面上第一個(gè)段落元素<p>的背景顏色。在jQuery1.9版本中新增了數(shù)組類(lèi)型的propertyName參數(shù)，用于批量獲取元素的多個(gè)屬性值。其語(yǔ)法格式如下：$(selector).css(propertyNames)其中selector參數(shù)位置可以是任意有效的選擇器，propertyNames參數(shù)位置為CSS屬性名稱(chēng)的數(shù)組。該方法返回值為數(shù)據(jù)形式，包含了符合條件的第一個(gè)元素的指定CSS屬性值。例如：varprops=$("p").css(["background-color","color","font-size"]);上述代碼的返回值包含了頁(yè)面上第一個(gè)段落元素<p>的背景顏色、字體顏色與字體大小。2. 設(shè)置CSS屬性值設(shè)置選定元素標(biāo)簽CSS屬性值的方法如下：$(selector).css(propertyName,value)其中selector參數(shù)位置可以是任意有效的選擇器，propertyName參數(shù)位置為CSS屬性名稱(chēng)，value參數(shù)位置為字符串或數(shù)值類(lèi)型的CSS屬性值。該方法可以批量設(shè)置所有符合條件元素的指定CSS屬性值。例如，將頁(yè)面上所有段落元素<p>的字體顏色更新為紅色，寫(xiě)法如下：$("p").css("color","red");如果有多個(gè)CSS屬性需要同時(shí)設(shè)置，語(yǔ)法結(jié)構(gòu)如下：$(selector).css({propertyName1:value1,propertyName2:value2...,propertyNameN:valueN});即在css()方法中填入一個(gè)自定義對(duì)象，該對(duì)象中的成員名稱(chēng)為CSS屬性名稱(chēng)，成員的值為對(duì)應(yīng)的CSS屬性值。此時(shí)屬性名稱(chēng)不需要加引號(hào)，并且需要寫(xiě)成Camel標(biāo)記法的形式（第一個(gè)單詞小寫(xiě)，后面每個(gè)單詞首字母大寫(xiě)的形式，例如testDemo）。例如字體粗細(xì)font-weight在這里需要改寫(xiě)成fontWeight。例如，將所有的段落元素設(shè)置為字體加粗、背景顏色為淺藍(lán)色，寫(xiě)法如下：$("p").css({fontWeight:"bold",backgroundColor:"lightblue"});【例10-5】jQuerycss()方法獲取和設(shè)置元素屬性值使用css()方法獲取和設(shè)置段落元素<p>的CSS屬性值。10.2jQuery添加jQuery可以快速在頁(yè)面上添加新元素或內(nèi)容，有四種常見(jiàn)用法如下：append()：在指定元素內(nèi)部的結(jié)尾插入內(nèi)容。prepend()：在指定元素內(nèi)部的開(kāi)頭插入內(nèi)容。after()：在指定元素之后添加內(nèi)容。before()：在指定元素之前添加內(nèi)容。10.2.1jQueryappend()和prepend()jQueryappend()方法用于在所有符合條件的元素內(nèi)部結(jié)尾處追加內(nèi)容。append()方法的語(yǔ)法格式如下：append(content[,content])其中content參數(shù)的類(lèi)型可以是文本、數(shù)組、HTML代碼或元素標(biāo)簽。jQueryprepend()與append()方法的參數(shù)完全相同，只不過(guò)追加位置從指定元素內(nèi)部的結(jié)尾處變更為開(kāi)頭處。prepend()方法的語(yǔ)法格式如下：prepend(content[,content])1. 追加文本使用append()或prepend()方法添加文本內(nèi)容允許帶有格式化標(biāo)簽。例如下面這段HTML代碼：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>對(duì)其使用jQueryappend()方法選定id="test"的<div>元素，并在其內(nèi)部追加文本內(nèi)容。相關(guān)jQuery代碼如下：$("div#test").append("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div>這段文本帶有<i>格式化</i>標(biāo)簽。</div>上述jQuery代碼相當(dāng)于下面這段JavaScript代碼：//創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)vartext=document.createTextNode("這段文本帶有<i>格式化</i>標(biāo)簽。");//獲取id="test"的<div>元素vardiv=document.getElementById("test");//將新建的文本內(nèi)容添加到指定的div元素中去div.appendChild(p);由此可見(jiàn)，jQuery化簡(jiǎn)了JavaScript關(guān)于文本內(nèi)容創(chuàng)建與添加的代碼。如果換成使用prepend()方法追加文本內(nèi)容，相關(guān)jQuery代碼如下：$("div#test").prepend("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：<divid="test">這段文本帶有<i>格式化</i>標(biāo)簽。<div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>2. 追加元素使用append()或prepend()方法添加新元素可以直接在參數(shù)位置填入相關(guān)HTML代碼。以append()為例，添加一個(gè)新的標(biāo)題元素<h1>的方法如下：append("<h1>這是一個(gè)標(biāo)題</h1>")例如，使用append()方法在指定元素的內(nèi)容結(jié)尾處添加段落元素<p>。相關(guān)HTML代碼片段如下：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>使用jQueryappend()方法選定id="test"的<div>元素，并在其內(nèi)部追加子元素。相關(guān)jQuery代碼如下：$("div#test").append("<p>這是新的子元素。</p>");HTML代碼片段更新如下：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div><p>這是新的子元素。</p></div>上述jQuery代碼相當(dāng)于下面這段JavaScript代碼：//創(chuàng)建一個(gè)新的段落元素<p>varp=document.createElement("p");//為該段落元素添加文本內(nèi)容p.innerHTML="這是新的子元素。";//獲取id="test"的<div>元素vardiv=document.getElementById("test");//將新建的段落元素<p>添加到指定的div元素中去div.appendChild(p);由此可見(jiàn)，jQuery大幅度化簡(jiǎn)了JavaScript中關(guān)于元素創(chuàng)建與添加的代碼。如果換成使用prepend()方法追加元素，相關(guān)jQuery代碼如下：$("div#test").prepend("<p>這是新的子元素。</p>");HTML代碼片段更新如下：<divid="test"><p>這是新的子元素。</p><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>如果在append()或prepend()方法的參數(shù)位置使用選擇器可以將已存在的其他元素對(duì)象移動(dòng)到指定元素中。例如以下這種情況：<h3>這是一個(gè)標(biāo)題</h3><divid="test"><p>這是一個(gè)段落</p></div>對(duì)其使用$("div#test").append($("h3"))會(huì)將標(biāo)題元素<h3>整個(gè)移動(dòng)到<div>元素中。運(yùn)行結(jié)果如下：<divid="test"><h3>這是一個(gè)標(biāo)題</h3><p>這是一個(gè)段落</p></div>3. 追加混合內(nèi)容如果有不同類(lèi)型的內(nèi)容（比如文本和HTML元素）需要同時(shí)添加，可以在參數(shù)位置添加若干個(gè)變量，其間用逗號(hào)隔開(kāi)即可。例如：//使用HTML代碼創(chuàng)建段落元素varp="<p>段落元素</p>";//使用JavaScript代碼創(chuàng)建標(biāo)題元素varh1=document.createElement("h1");h1.innerHTML="標(biāo)題元素";//創(chuàng)建文本內(nèi)容vartext="純文本內(nèi)容";//依次追加到id="test"的<div>元素中$("div#test").append(p,[h1,text]);上述代碼將分別創(chuàng)建新的段落元素、標(biāo)題元素和一段文本內(nèi)容，并按照先后順序添加到id="test"的<div>元素內(nèi)部的結(jié)尾處。【例10-6】jQueryappend()和prepend()方法追加內(nèi)容使用append()和prepend()方法為指定元素內(nèi)部開(kāi)頭和結(jié)尾處追加內(nèi)容。10.2.2jQueryafter()和before()jQueryafter()方法分別用于在選定元素之后加入新的內(nèi)容。after()方法的語(yǔ)法格式如下：after(content[,content])其中content參數(shù)的類(lèi)型可以是文本、數(shù)組、HTML代碼或元素標(biāo)簽。jQuerybefore()與after()方法的參數(shù)完全相同，只不過(guò)追加位置從指定元素之后變更為元素之前。before()方法的語(yǔ)法格式如下：before(content[,content])1. 追加文本使用after()或before()方法添加文本內(nèi)容允許帶有格式化標(biāo)簽。例如下面這段HTML代碼：<pid="test">這是測(cè)試用的段落元素</p>對(duì)其使用jQueryafter()方法在該元素后面追加文本內(nèi)容。相關(guān)jQuery代碼如下：$("p#test").append("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：<pid="test">這是測(cè)試用的段落元素</p>這段文本帶有<i>格式化</i>標(biāo)簽。如果換成使用before()方法追加文本內(nèi)容，相關(guān)jQuery代碼如下：$("div#test").before("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：這段文本帶有<i>格式化</i>標(biāo)簽。<pid="test">這是測(cè)試用的段落元素</p>2. 追加元素使用after()或before()方法添加新元素可以直接在參數(shù)位置填入相關(guān)HTML代碼。以after()為例，添加一個(gè)新的段落元素<p>的方法如下：after("<p>這是一個(gè)段落元素。</p>")例如以下情況：<divid="test">這是一個(gè)測(cè)試元素。</div>使用jQueryafter()方法選定id="test"的<div>元素，并在其后面追加段落元素。相關(guān)jQuery代碼如下：$("div#test").after("<p>這是一個(gè)段落元素。</p>");HTML代碼片段更新如下：<divid="test">這是一個(gè)測(cè)試元素。</div><p>這是一個(gè)段落元素。</p>如果換成使用before()方法追加元素，相關(guān)jQuery代碼如下：$("div#test").before("<p>這是一個(gè)段落元素。</p>");HTML代碼片段更新如下：<p>這是一個(gè)段落元素。</p><divid="test">這是一個(gè)測(cè)試元素。</div>如果在after()或before()方法的參數(shù)位置使用選擇器可以將已存在的其他元素對(duì)象移動(dòng)到指定位置。例如以下這種情況：<h3>這是一個(gè)標(biāo)題</h3><div><pid="test">這是一個(gè)段落</p></div>對(duì)其使用$("p#test").after($("h3"))會(huì)將標(biāo)題元素<h3>整個(gè)移動(dòng)到<p>元素后面。運(yùn)行結(jié)果如下：<divid="test"><p>這是一個(gè)段落</p><h3>這是一個(gè)標(biāo)題</h3></div>3. 追加混合內(nèi)容如果有不同類(lèi)型的內(nèi)容（比如文本和HTML元素）需要同時(shí)添加，可以在參數(shù)位置添加若干個(gè)變量，其間用逗號(hào)隔開(kāi)即可。例如：//使用HTML代碼創(chuàng)建段落元素varp="<p>段落元素</p>";//使用JavaScript代碼創(chuàng)建標(biāo)題元素varh1=document.createElement("h1");h1.innerHTML="標(biāo)題元素";//創(chuàng)建文本內(nèi)容vartext="純文本內(nèi)容";//依次追加到id="test"的<div>元素中$("div#test").after(p,[h1,text]);上述代碼將分別創(chuàng)建新的段落元素、標(biāo)題元素和一段文本內(nèi)容，并按照先后順序添加到id="test"的<div>元素內(nèi)部的結(jié)尾處。【例10-7】jQueryafter()和before()方法追加內(nèi)容使用after()和before()方法為指定元素內(nèi)部開(kāi)頭和結(jié)尾處追加內(nèi)容。10.3jQuery刪除10.3.1jQueryremove()jQueryremove()用于刪除指定元素及其子元素，其語(yǔ)法格式如下：$(selector).remove();其中selector可以是任意有效的jQuery選擇器。例如，刪除頁(yè)面上所有段落元素<p>的寫(xiě)法如下：$("p").remove();jQueryremove()方法也可以在括號(hào)中填入一個(gè)參數(shù)，用于篩選出特定的元素進(jìn)行刪除。該參數(shù)可以是任何jQuery選擇器的語(yǔ)法。例如，刪除所有class="style01"的段落元素<p>的寫(xiě)法如下：$("p").remove(".style01");【例10-8】jQueryremove()方法的簡(jiǎn)單應(yīng)用使用remove()方法刪除指定元素及其內(nèi)部的所有子元素。10.3.2jQueryempty()jQueryempty()用于清空元素，即從指定元素中刪除其子元素和文本內(nèi)容。其語(yǔ)法格式如下：$(selector).empty();該方法僅用于清空元素內(nèi)部的內(nèi)容，但保留元素本身的結(jié)構(gòu)。例如下面這種情況：<h1>這是標(biāo)題</h1><p>這是段落</p>使用$("h1").empty()方法清空標(biāo)題元素<h1>，運(yùn)行結(jié)果如下：<h1></h1><p>這是段落</p>由此可見(jiàn)，指定元素的首尾標(biāo)簽仍保留在頁(yè)面結(jié)構(gòu)中。【例10-9】jQueryempty()方法的簡(jiǎn)單應(yīng)用使用empty()方法清空指定元素內(nèi)部的所有子元素。10.3.3jQueryremoveAttr()jQueryremoveAttr()用于刪除元素的指定屬性，其語(yǔ)法格式如下：$(selector).removeAttr(propertyName);例如下面這種情況：<pid="test">這是段落</p>使用$("p").removeAttr("id")方法可以清除段落元素的id屬性，運(yùn)行結(jié)果如下：<p>這是段落</p>【例10-10】jQueryremoveAttr()方法的簡(jiǎn)單應(yīng)用使用removeAttr()方法清除元素的指定屬性。10.4jQuery類(lèi)屬性jQuery中還有一系列操作CSS類(lèi)的方法，這里主要介紹其中三種：addClass()：為元素添加指定名稱(chēng)的class屬性。removeClass()：為元素刪除指定名稱(chēng)的class屬性。toggleClass()：為元素添加/刪除（切換）指定名稱(chēng)的class屬性。10.4.1jQueryaddClass()當(dāng)需要為元素設(shè)置多項(xiàng)CSS樣式屬性時(shí)，除了使用css()方法逐行添加還可以使用addClass()方法直接為元素添加CSS樣式表中的類(lèi)名稱(chēng)。例如：<style>.style01{color:red;background-color:yellow;font-size:20px;margin:20px;padding:20px;}</style>上述代碼為CSS樣式表內(nèi)容，表示聲明了一種類(lèi)名稱(chēng)為style01的樣式集合，包括字體顏色為紅色，背景顏色為黃色，字體大小為20像素，各邊內(nèi)外邊距為20像素。如果使用css()方法為指定元素添加這些屬性，需要寫(xiě)大量的代碼。但若使用addClass()方法只需一行代碼，如下：$("p").addClass("style01");如果有多個(gè)CSS類(lèi)需要同時(shí)添加，可以都寫(xiě)在addClass()方法的參數(shù)位置，之間用空格隔開(kāi)即可。例如：$("p").addClass("style01style02");上述代碼表示為段落元素添加class="style01style02"屬性。10.4.2jQueryremoveClass()如果需要為元素取消某個(gè)CSS樣式的類(lèi)名稱(chēng)，只要使用removeClass()方法即可。其語(yǔ)法格式如下：$(selector).removeClass(className)其中selector為任意有效的jQuery選擇器，className參數(shù)位置需要填入CSS樣式的類(lèi)名稱(chēng)。例如：$("p").removeClass("style01");上述代碼表示為段落元素<p>刪除class="style01"屬性?！纠?0-11】jQuery添加和刪除CSS類(lèi)使用addClass()和removeClass()方法為元素添加和刪除指定名稱(chēng)的CSS類(lèi)。10.4.3jQuerytoggleClass()如果需要為元素切換（輪流刪除/添加）某個(gè)CSS樣式的類(lèi)名稱(chēng)，只要使用toggleClass()方法即可。其語(yǔ)法格式如下：$(selector).toggleClass(className)其中selector為任意有效的jQuery選擇器，className參數(shù)位置需要填入CSS樣式的類(lèi)名稱(chēng)。例如：$("p").toggleClass("style01");上述代碼表示為段落元素<p>刪除或添加class="style01"屬性。同樣可以一次性添加或刪除多個(gè)class屬性。例如：$("p").toggleClass("style01style02");上述代碼表示為段落元素<p>刪除或添加class="style01style02"屬性。這里的CSS類(lèi)名稱(chēng)可以填入任意數(shù)量。【例10-12】jQuery添加/刪除CSS類(lèi)的切換使用toggleClass()方法為元素切換添加/刪除指定名稱(chēng)的CSS類(lèi)。10.5jQuery尺寸jQuery還提供了一系列方法用于獲取和設(shè)置元素或?yàn)g覽器窗口的尺寸。如表10-2所示。表10-SEQ表12-\*ARABIC2jQuery尺寸相關(guān)用法示例方法名稱(chēng)解釋width()獲取或設(shè)置元素的寬度（不包括內(nèi)外邊距和邊框?qū)挾龋eight()獲取或設(shè)置元素的高度（不包括內(nèi)外邊距和邊框?qū)挾龋nnerWidth()獲取或設(shè)置元素的寬度（包括內(nèi)邊距）。innerHeight()獲取或設(shè)置元素的高度（包括內(nèi)邊距）。outerWidth()獲取或設(shè)置元素的寬度（包括內(nèi)邊距和邊框?qū)挾龋?。outerHeight()獲取或設(shè)置元素的高度（包括內(nèi)邊距和邊框?qū)挾龋．?dāng)以上這些方法不帶任何參數(shù)值時(shí)，表示獲取元素的尺寸。例如：varwidth=$("div").width();上述代碼表示獲取<div>元素的寬度（不包含內(nèi)外邊距和邊框?qū)挾龋?。?dāng)width()或height()方法的參數(shù)值為數(shù)值時(shí)，可以用于設(shè)置元素的尺寸。例如：varwidth=$("div").width(300);上述代碼表示將<div>元素的寬度（不包含內(nèi)外邊距和邊框?qū)挾龋┰O(shè)置為300像素。如果需要獲取帶有外邊距的尺寸，可以使用outerWidth()或outerHeight()方法加上參數(shù)值true來(lái)表示。例如：varwidth=$("div").outerWidth(true);上述代碼表示獲取<div>元素的寬度（包含內(nèi)外邊距和邊框?qū)挾龋！纠?0-13】jQuery獲取元素尺寸使用jQuery的系列方法獲取元素的尺寸。【代碼說(shuō)明】本示例包含了一個(gè)<div>元素用于測(cè)試獲取其尺寸效果。在CSS內(nèi)部樣式表中為其設(shè)置樣式：寬高均為200像素，各邊的內(nèi)外邊距均為20像素，帶有7像素寬的銀色實(shí)線邊距，背景顏色為淺藍(lán)色。在<div>元素下方添加一個(gè)<button>按鈕，并在其click點(diǎn)擊事件的回調(diào)函數(shù)中獲取<div>元素的尺寸，然后將數(shù)據(jù)顯示在<div>元素內(nèi)部的段落中。由圖可見(jiàn)，其中width和height值就是CSS內(nèi)部樣式表中設(shè)置的元素寬與高，不包含內(nèi)外邊距和邊框的寬度；innerWidth與innerHeight值是包含了元素內(nèi)邊距寬度后的數(shù)值，因此是200+20*2=240px；outerWidth與outerHeight值是包含了元素內(nèi)邊距與邊框?qū)挾群蟮臄?shù)值，因此是200+20*2+7*2=254px；outerWidth(true)與outerHeight(true)值是在之前的基礎(chǔ)上包含了外邊距的數(shù)值，因此是200+20*2+7*2+20*2=294px。10.6階段案例：仿公眾號(hào)留言板10.6.1案例需求背景介紹：留言板又被稱(chēng)為留言簿或留言本，也是目前互聯(lián)網(wǎng)上使用最廣泛的一種用戶互相溝通交流的方式，例如日常的微博留言、微信公眾號(hào)留言、微信朋友圈評(píng)論留言等。很多主流媒體、地方政府網(wǎng)站也開(kāi)設(shè)了留言或咨詢(xún)版塊傾聽(tīng)人民心聲、解決實(shí)際問(wèn)題，例如人民日?qǐng)?bào)在其官網(wǎng)上開(kāi)設(shè)了領(lǐng)導(dǎo)留言板,是專(zhuān)門(mén)為中央部委和地方各級(jí)黨委政府主要負(fù)責(zé)同志搭建的網(wǎng)上群眾工作平臺(tái),走好網(wǎng)上群眾路線,開(kāi)展網(wǎng)上群眾工作。功能要求：使用jQuery制作一款仿公眾號(hào)風(fēng)格的簡(jiǎn)易留言板。10.6.2界面設(shè)計(jì)1. 整體布局本案例主要分成寫(xiě)留言和精選留言?xún)蓚€(gè)區(qū)域，其中寫(xiě)留言區(qū)域內(nèi)部包含標(biāo)題、多行文本框和按鈕，精選留言區(qū)域包含標(biāo)題、若干個(gè)留言列表豎著排列，每個(gè)列表項(xiàng)里面均包含用戶的頭像圖片、用戶昵稱(chēng)和具體留言?xún)?nèi)容。創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如MessageCenter.html。在HTML5中使用<divid="msgCenter">元素聲明留言板區(qū)域，在其中嵌套<divid="msgLeave">和<divid="msgList">分別表示寫(xiě)留言區(qū)域和精選留言區(qū)域，相關(guān)代碼如下：1. <body>2. <!--標(biāo)題-->3. <h3>簡(jiǎn)易留言板效果</h3>4. <!--水平線-->5. <hr/>6. <!--留言板區(qū)域-->7. <divid="msgCenter">8. <!--1寫(xiě)留言區(qū)域-->9. <divid="msgLeave">10. <!--1-1標(biāo)題-->11. <h4>寫(xiě)留言</h4>12. </div>13. <!--2精選留言區(qū)域-->14. <divid="msgList">15. <!--2-1標(biāo)題-->16. <h4>精選留言</h4>17. </div>18. </div>19. </body>本示例使用CSS外部樣式表規(guī)定頁(yè)面樣式。在本地css文件夾中創(chuàng)建message.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>簡(jiǎn)易留言板效果</title>4. <linkrel="stylesheet"href="css/message.css">5. </head>在CSS外部樣式表中設(shè)置公共樣式，相關(guān)CSS代碼如下：1. /*公共樣式*/2. *{3. box-sizing:border-box;/*盒子尺寸包含了邊框和內(nèi)邊距*/4. }5. body{6. background-color:#f5f5f5;/*背景顏色灰白色*/7. text-align:center;/*文本居中*/8. }為留言板區(qū)域和通用標(biāo)題設(shè)置樣式，相關(guān)CSS代碼如下：1. /*留言板區(qū)域*/2. #msgCenter{3. width:600px;/*寬度600px*/4. background-color:white;/*背景顏色白色*/5. border-radius:20px;/*圓角邊框*/6. margin:0auto;/*外邊距上下0左右auto*/7. padding:20px;/*內(nèi)邊距20px*/8. 9. }10. /*留言板區(qū)域-h4標(biāo)題*/11. #msgCenterh4{12. text-align:left;/*文本左對(duì)齊*/13. }2. 寫(xiě)留言區(qū)域使用多行文本框<textarea>和按鈕<button>完善寫(xiě)留言區(qū)域，代碼片段如下：1. <!--留言板區(qū)域-->2. <divid="msgCenter">3. <!--1寫(xiě)留言區(qū)域-->4. <divid="msgLeave">5. <!--1-1標(biāo)題-->6. <h4>寫(xiě)留言</h4>7. <!--1-2多行文本框-->8. <textareaid="txtArea"rows="7"></textarea>9. <!--1-3提交按鈕-->10. <buttonid="submitBtn">提交</button>11. </div>12. </div>為多行文本框<textarea>和按鈕<button>分別添加了id屬性方便后續(xù)定位，其中多行文本框使用了rows屬性表示默認(rèn)至少顯示7行。在CSS外部樣式表中為多行文本框設(shè)置樣式，相關(guān)CSS代碼如下：1. /*寫(xiě)留言區(qū)域-多行文本框*/2. #msgLeave#txtArea{3. width:100%;/*寬度100%*/4. font