jQuery頁(yè)面特效jquery頁(yè)面特效

第10章jQuery頁(yè)面特效jQuery是一個(gè)基于JavaScript的開源框架。與JavaScript相比，jQuery具有代碼高效、瀏覽器兼容性更好等特征，極大地簡(jiǎn)化了對(duì)DOM對(duì)象、事件處理、動(dòng)畫效果的操作。本章學(xué)習(xí)jQuery的基本知識(shí)，并運(yùn)用jQueryUI以及jQuerymobile進(jìn)行頁(yè)面特效制作。了解jQuery和jQueryUI以及jQuerymobile的基本特點(diǎn)和基本應(yīng)用理解jQuerymobile的移動(dòng)互聯(lián)網(wǎng)基本應(yīng)用方法掌握各種jQueryUI常用插件的的基本功能能熟練使用jQuery制作頁(yè)面特效。內(nèi)容安排jQuery基礎(chǔ)10.1jQueryUI10.2jQuerymobile10.3小試牛刀10.410.1jQuery基礎(chǔ)jQuery的設(shè)計(jì)理念是“寫得更少，做得更多”（TheWriteLess，DoMore），是一種將JavaScript、CSS、DOM等特征集于一體的強(qiáng)大框架，通過簡(jiǎn)單的代碼來實(shí)現(xiàn)各種頁(yè)面特效。用戶可以在jQuery的官方網(wǎng)站/下載最新的jQuery庫(kù)。jQuery有兩個(gè)版本的庫(kù)可供下載：一個(gè)版本用于實(shí)際的網(wǎng)站中，是已被精簡(jiǎn)和壓縮的min版；另一個(gè)版本用于測(cè)試和開發(fā)，是未壓縮的。本書采用的是jquery-3.6.0.min.js?！?.6.0”是版本號(hào)。jQuery不需要安裝，把下載的jQuery庫(kù)存入網(wǎng)站上的一個(gè)公共位置（通常保存在一個(gè)獨(dú)立的文件夾js中），想要在某個(gè)頁(yè)面中使用jQuery時(shí)，要事先引入該jQuery庫(kù)文件（也可以直接引用互聯(lián)網(wǎng)的地址）。jQuery基礎(chǔ)10.110.1.1jQuery工廠函數(shù)與選擇器jQuery中被譽(yù)為工廠函數(shù)的是“$()”。在jQuery中，無(wú)論我們使用哪種類型的選擇器，都需要從一個(gè)“$”符號(hào)和一對(duì)“()”開始。例如，$("div")表示文檔中全部的div元素對(duì)象；$("#tt")表示文檔中id屬性值為tt的一個(gè)元素對(duì)象；$(".red")表示文檔中使用CSS類名為red的所有元素對(duì)象。$(document)選中的是整個(gè)html所有元素的集合，也就是整個(gè)網(wǎng)頁(yè)文檔對(duì)象。1.jQuery入口函數(shù)jQuery使用$(document).ready()方法代替?zhèn)鹘y(tǒng)JavaScript的window.onload事件，表示獲取文檔對(duì)象就緒的時(shí)候。jQuery庫(kù)只建立一個(gè)名為jQuery的對(duì)象，其所有函數(shù)都在該對(duì)象之下，該函數(shù)稱為jQuery入口函數(shù)。jQuery入口函數(shù)有兩種寫法，分別是：（1）入口函數(shù)完整寫法：$(document).ready(function(){程序代碼段…})（2）入口函數(shù)簡(jiǎn)略寫法：$(function(){程序代碼段…})2.jQuery語(yǔ)法結(jié)構(gòu)jQuery語(yǔ)法是為HTML元素的選取而編制的，可以對(duì)元素執(zhí)行某些操作。其基礎(chǔ)語(yǔ)法是：$(selector).action()（1）美元符號(hào)$定義jQuery；（2）選擇器（selector）用于“選擇”HTML元素；（3）jQuery的action()用于執(zhí)行對(duì)元素的操作。jQuery基礎(chǔ)10.13.jQuery選擇器在頁(yè)面中要為某個(gè)元素添加屬性或事件時(shí)，第一步必須先準(zhǔn)確地找到這個(gè)元素。在jQuery中可以通過選擇器來實(shí)現(xiàn)這一重要功能。（1）selector為CSS選擇器，列表如表10-1所示。選擇器舉例說明標(biāo)簽選擇器$('a')選擇所有的<a>標(biāo)簽群選擇器$('h1,h2,h3')選擇所有的<h1>標(biāo)簽、<h2>標(biāo)簽和<h3>標(biāo)簽id選擇器$('#myId')選擇id為myId的網(wǎng)頁(yè)元素類選擇器$('.myClass')選擇class為myClass的元素屬性選擇器$('input[name=tt]')選擇name屬性等于tt的input元素后代選擇器$("diva")選擇div里面的a元素父子選擇器$("div>a")選擇div里面的子元素為a元素兄弟選擇器$("div+img")選擇div元素后的img元素偽類選擇器$("div:first-child")選擇div元素，該div元素位于父元素下的第一元素jQuery基礎(chǔ)10.1（2）selector為jQuery過濾選擇器，列表如表10-2所示：選擇器舉例說明:first$('a:first')選擇網(wǎng)頁(yè)中第1個(gè)a元素:odd$('tr:odd')選擇表格的奇數(shù)行:even$('tr:even')選擇表格的偶數(shù)行:input$('#myForm:input')選擇表單中的input元素:visible$('div:visible')選擇可見的div元素

:hidden$('div:hidden')選擇不可見的div元素

:enabled$(":enabled")所有啟用的元素:disabled$(":disabled")所有禁用的元素:selected$(":selected")所有選定的下拉列表元素:checked$(":checked")所有選中的復(fù)選框選項(xiàng):eq(index)$("ulli:eq(3)")列表中的第四個(gè)元素（index值從0開始）:gt(no)$("ulli:gt(3)")列舉index大于3的元素:lt(no)$("ulli:lt(3)")列舉index小于3的元素:animated$(":animated")所有動(dòng)畫元素:focus$(":focus")當(dāng)前具有焦點(diǎn)的元素:contains(text)$(":contains('Hello')")所有包含文本"Hello"的元素:has(selector)$("div:has(p)")所有包含有<p>元素在其內(nèi)的<div>元素:empty$(":empty")所有空元素:parent$(":parent")匹配所有含有子元素或者文本的父元素。jQuery基礎(chǔ)10.110.1.2jQuery基本操作jQuery的基本操作是由一系列函數(shù)構(gòu)成的針對(duì)所選擇對(duì)象的操作方法，包括對(duì)元素的操作、對(duì)樣式的操作、對(duì)內(nèi)容和值的操作、DOM的操作和對(duì)表單的操作等。元素的操作jQuery提供了attr()方法和prop()方法來獲取元素屬性。這兩種方法都是用于獲取所匹配元素的集合中第一個(gè)元素的屬性，或設(shè)置所匹配元素的屬性。（1）attr()方法attr()方法語(yǔ)法格式如下（其中key和name都代表元素的屬性名稱，properties代表一個(gè)集合）：attr(“屬性名”)：返回屬性值attr(“屬性名”,屬性值)：設(shè)置屬性值（2）prop()方法prop()方法的參數(shù)說明與attr()方法的參數(shù)說明相同，多用于boolean類型的屬性操作，例如checked、selected和disabled等。例如，下面的代碼設(shè)置第一個(gè)復(fù)選框?yàn)檫x中狀態(tài)：$("input[type='checkbox']").prop("checked");（3）removeAttr()方法removeAttr()方法用于刪除匹配元素的指定屬性。（4）removeProp()方法removeProp()方法用于刪除由prop()方法設(shè)置的屬性集。jQuery基礎(chǔ)10.1樣式的操作在Web前端開發(fā)中，設(shè)計(jì)者如果想改變一個(gè)元素的整體外觀，例如給網(wǎng)站換膚，就可以通過修改該元素所使用的CSS類來實(shí)現(xiàn)。（1）

addClass()

方法addClass()方法向被選元素添加一個(gè)或多個(gè)類名，如需添加多個(gè)類，使用空格來分隔類名。該方法不會(huì)移除已存在的class屬性，僅僅添加一個(gè)或多個(gè)類名到class屬性。（2）removeClass()

方法removeClass()方法從被選元素移除一個(gè)或多個(gè)類。如果沒有規(guī)定參數(shù)，則該方法將從被選元素中刪除所有類。（3）toggleClass()方法toggleClass()方法對(duì)添加和移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。該方法檢查每個(gè)元素中指定的類。如果不存在則添加類，如果已設(shè)置則刪除之。這就是所謂的切換效果。（4）css()方法css()方法為被選元素設(shè)置或返回一個(gè)或多個(gè)樣式屬性。當(dāng)用于返回屬性：該方法返回第一個(gè)匹配元素的指定CSS屬性值。然而，簡(jiǎn)寫的CSS屬性（比如"background"和"border"）不被完全支持。當(dāng)用于設(shè)置屬性：該方法為所有匹配元素設(shè)置指定CSS屬性。例如，下面的jQuery代碼將所有p元素的文字顏色改為紅色：$("p").css("color","red");jQuery基礎(chǔ)10.1內(nèi)容和值的操作元素的內(nèi)容是指定義元素的起始標(biāo)記和結(jié)束標(biāo)記之間的部分，又可以分為文本內(nèi)容和HTML內(nèi)容。（1）text()方法jQuery提供了text()和text(val)兩個(gè)方法用于對(duì)文本內(nèi)容操作，其中text()用于獲取全部匹配元素的文本內(nèi)容，text(val)用于設(shè)置全部匹配元素的文本內(nèi)容。（2）html()方法html()方法設(shè)置或返回被選元素的內(nèi)容（innerHTML）。當(dāng)該方法用于返回內(nèi)容時(shí)，則返回第一個(gè)匹配元素的內(nèi)容。當(dāng)該方法用于設(shè)置內(nèi)容時(shí)，則重寫所有匹配元素的內(nèi)容。如只需設(shè)置或返回被選元素的文本內(nèi)容，請(qǐng)使用

text()

方法。例如，下面的代碼將所有p元素的內(nèi)容改為"Hello<b>world</b>!"：$("p").html("Hello<b>world</b>!");（3）val()方法val()方法返回或設(shè)置被選元素的value屬性。val()方法通常與HTML表單元素一起使用。當(dāng)用于返回值時(shí)該方法返回第一個(gè)匹配元素的value屬性的值。當(dāng)用于設(shè)置值時(shí)該方法設(shè)置所有匹配元素的value屬性的值。例如，獲取id值為“myid”的文本框的值，代碼如下：vartextCon=$("input#myid").val();如果要設(shè)置id值為“myid”的文本框的值為“Hello”，代碼如下：vartextCon=$("input#myid").val(“hello”);jQuery基礎(chǔ)10.14.DOM的操作（1）append()方法append()方法在被選元素的內(nèi)部的結(jié)尾處插入內(nèi)容。例如，在所有<p>元素結(jié)尾插入內(nèi)容，代碼如下：$("p").append("<b>插入文本</b>.");（2）appendTo()方法appendTo()方法在被選元素內(nèi)部的結(jié)尾插入HTML元素。效果與append()方法相同，只是寫法不同。例如，在每個(gè)<p>元素的結(jié)尾插入<span>元素，代碼如下：$("<span>HelloWorld!</span>").appendTo("p");（3）prepend()方法prepend()方法在被選元素的內(nèi)部的開頭處插入內(nèi)容。例如，在所有<p>元素開頭插入內(nèi)容，代碼如下：$("p").prepend("<b>插入的內(nèi)容</b>");（4）prependTo()方法prependTo()方法在被選元素的內(nèi)部的開頭插入元素。效果與prepend()方法相同，只是寫法不同。例如，在每個(gè)<p>元素的開頭插入<span>元素，代碼如下：$("<span>HelloWorld!</span>").prependTo("p");jQuery基礎(chǔ)10.1（5）beforer()方法before()方法在被選元素之前插入指定的內(nèi)容。（6）after()方法after()方法在被選元素之后插入指定的內(nèi)容。（7）remove()方法remove()方法用于從DOM中刪除所有匹配的元素，包括所有的文本和子節(jié)點(diǎn)。該方法也會(huì)移除被選元素的數(shù)據(jù)和事件。（8）detach()方法detach()方法和remove()方法一樣，也是刪除DOM中匹配的元素。但所有綁定的事件或附加的數(shù)據(jù)都會(huì)保留下來。（9）empty()方法empty()方法用于清空元素的內(nèi)容（包括所有文本和子節(jié)點(diǎn)），但不刪除該元素。（10）find()方法使用jQuery選擇器可以很方便地匹配滿足一定條件的HTML元素，并對(duì)其進(jìn)行操作。但有時(shí)候需要根據(jù)HTML元素的具體情況對(duì)其進(jìn)行個(gè)性化處理，此時(shí)可以使用find()方法遍歷元素，查找到滿足條件的節(jié)點(diǎn)。jQuery基礎(chǔ)10.1（11）next()方法next()方法返回被選元素的后一個(gè)同級(jí)元素。同級(jí)元素是共享相同父元素的元素。該方法只返回一個(gè)元素。（12）prev()方法prev()方法返回被選元素的前一個(gè)同級(jí)元素。（13）parent()方法parent()方法返回被選元素的直接父元素。（14）children()方法children()方法返回被選元素的所有直接子元素jQuery基礎(chǔ)10.110.1.3jQuery動(dòng)畫效果jQuery的動(dòng)畫效果由4類方法組成：基本動(dòng)畫方法、滑動(dòng)動(dòng)畫方法、淡入淡出動(dòng)畫方法、自定義動(dòng)畫方法。利用這些動(dòng)畫方法，jQuery可以很方便地在HTML元素上實(shí)現(xiàn)動(dòng)畫效果，表10-3列出了用于創(chuàng)建動(dòng)畫效果的jQuery方法。方法描述animate()對(duì)被選元素應(yīng)用"自定義"的動(dòng)畫clearQueue()對(duì)被選元素移除所有排隊(duì)函數(shù)（仍未運(yùn)行的）delay()對(duì)被選元素的所有排隊(duì)函數(shù)（仍未運(yùn)行）設(shè)置延遲dequeue()移除下一個(gè)排隊(duì)函數(shù)，然后執(zhí)行函數(shù)fadeIn()逐漸改變被選元素的不透明度，從隱藏到可見fadeOut()逐漸改變被選元素的不透明度，從可見到隱藏fadeTo()把被選元素逐漸改變至給定的不透明度f(wàn)adeToggle()在fadeIn()和fadeOut()方法之間進(jìn)行切換finish()對(duì)被選元素停止、移除并完成所有排隊(duì)動(dòng)畫hide()隱藏被選元素queue()顯示被選元素的排隊(duì)函數(shù)show()顯示被選元素slideDown()通過調(diào)整高度來滑動(dòng)顯示被選元素slideToggle()slideUp()和slideDown()方法之間的切換slideUp()通過調(diào)整高度來滑動(dòng)隱藏被選元素stop()停止被選元素上當(dāng)前正在運(yùn)行的動(dòng)畫toggle()hide()和show()方法之間的切換jQuery基礎(chǔ)10.110.1.4jQuery事件方法事件處理程序是當(dāng)HTML頁(yè)面中發(fā)生某些事件時(shí)所調(diào)用的方法。有別于JavaScript需要在標(biāo)簽中設(shè)置動(dòng)作屬性，jQuery直接在腳本中通過事件處理方法進(jìn)行處理。jQuery事件處理方法是jQuery中的核心函數(shù)，jQuery通過DOM為元素添加事件。在jQuery中，對(duì)于各種不同的事件定義了不同的事件處理方法，如表10-4所示。方法描述bind()向元素添加事件處理程序進(jìn)行事件綁定，blur()添加/觸發(fā)失去焦點(diǎn)事件change()添加/觸發(fā)change事件，當(dāng)表單元素的值改變時(shí)發(fā)生change事件click()添加/觸發(fā)click事件，點(diǎn)擊鼠標(biāo)時(shí)被觸發(fā)dblclick()添加/觸發(fā)doubleclick事件，雙擊鼠標(biāo)時(shí)被觸發(fā)focus()添加/觸發(fā)focus事件，當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生focus事件hover()添加兩個(gè)事件處理程序到hover事件，語(yǔ)法結(jié)構(gòu)為hover(over,out)keydown()添加/觸發(fā)keydown事件，當(dāng)鍵盤鍵被按下時(shí)發(fā)生keydown事件keyup()添加/觸發(fā)keyup事件，當(dāng)鍵盤鍵松開時(shí)發(fā)生keyup事件mouseenter()添加/觸發(fā)mouseenter事件，鼠標(biāo)進(jìn)入被選元素時(shí)被觸發(fā)mouseleave()添加/觸發(fā)mouseleave事件，鼠標(biāo)指針離開被選元素時(shí)被觸發(fā)mousemove()添加/觸發(fā)mousemove事件，鼠標(biāo)在元素上移動(dòng)時(shí)觸發(fā)mouseout()添加/觸發(fā)mouseout事件，鼠標(biāo)從元素上離開時(shí)觸發(fā)，鼠標(biāo)指針離開任意子元素時(shí)也會(huì)被觸發(fā)mouseover()添加/觸發(fā)mouseover事件，鼠標(biāo)移入對(duì)象時(shí)觸發(fā)，鼠標(biāo)指針進(jìn)入任意子元素時(shí)也會(huì)被觸發(fā)submit()添加/觸發(fā)submit事件10.1.5下拉菜單制作案例10.1案例10-1：運(yùn)用jQuery制作下拉菜單頁(yè)面，效果如圖10-1所示。鼠標(biāo)經(jīng)過菜單項(xiàng)時(shí)會(huì)在其下方出現(xiàn)二級(jí)菜單，鼠標(biāo)離開時(shí)二級(jí)菜單自動(dòng)收回。10.1.5下拉菜單制作案例10.1頁(yè)面一級(jí)菜單為li.mainlevel元素，共有7個(gè)，其中“方寸神游”、“詩(shī)行天下”、“行攝天涯”、“沿途有文”、“景點(diǎn)攻略”帶有二級(jí)菜單。二級(jí)菜單為li.mainlevel元素內(nèi)嵌套的ul元素，在外部樣式表文件css.css中用display:none;定義了其初始狀態(tài)為不顯示狀態(tài)。樣式代碼如下：#menu.mainlevelul{ z-index:10; border-top:1pxsolid#fff; background-image:url(../images/daohang.jpg); display:none; position:absolute; top:38px; left:0px;}10.1.5下拉菜單制作案例10.1在jQuery腳本中用hover()方法定義li.mainlevel元素在鼠標(biāo)經(jīng)過和鼠標(biāo)離開的事件。hover()方法有兩個(gè)參數(shù)，用逗號(hào)分割。第1個(gè)參數(shù)是鼠標(biāo)經(jīng)過對(duì)象時(shí)的事件處理函數(shù)，第2個(gè)參數(shù)是鼠標(biāo)離開對(duì)象時(shí)的事件處理函數(shù)。其格式為：hover（鼠標(biāo)經(jīng)過事件處理函數(shù)，鼠標(biāo)離開事件處理函數(shù)）事件處理函數(shù)用function(){事件處理程序代碼段}去定義。由于一級(jí)菜單項(xiàng)共有7個(gè)，鼠標(biāo)經(jīng)過和離開只是發(fā)生在其中一個(gè)li.mainlevel元素上面，故用$(this)去表示當(dāng)前具體操作的那個(gè)li.mainlevel元素，然后用find('ul')方法去尋找該li.mainlevel元素下是否有二級(jí)菜單ul元素。鼠標(biāo)經(jīng)過時(shí)用slideDown()方法將原本隱藏的二級(jí)菜單展開；鼠標(biāo)離開時(shí)用slideUp(200)方法在0.2秒內(nèi)將二級(jí)菜單收縮。10.1.6任務(wù)10-1：運(yùn)用jQuery制作動(dòng)畫頁(yè)面10.11.任務(wù)描述本任務(wù)用jQuery制作一個(gè)帶動(dòng)畫的網(wǎng)頁(yè)。網(wǎng)頁(yè)中的文字在加載過程中旋轉(zhuǎn)飛入；與此同時(shí)，小鴨子圖像慢慢淡入；小天使圖像在3秒鐘內(nèi)逐漸顯示，然后上下來回跳動(dòng)。網(wǎng)頁(yè)加載中的效果如圖10-2所示，網(wǎng)頁(yè)加載完成之后的效果如圖10-3所示。鼠標(biāo)在小鴨子圖像上懸停的時(shí)候，小鴨子圖像原地旋轉(zhuǎn)720度；鼠標(biāo)點(diǎn)擊左上角的按鈕，能對(duì)小天使圖像進(jìn)行隱藏顯示切換。10.1.6任務(wù)10-1：運(yùn)用jQuery制作動(dòng)畫頁(yè)面10.12.任務(wù)要求通過本任務(wù)的練習(xí)，要熟練掌握各種jQuery動(dòng)畫效果的用法；掌握jQuery事件方法的基本程序編寫；掌握運(yùn)用jQuery選擇指定對(duì)象進(jìn)行樣式操作的方法和技巧。3.任務(wù)分析本任務(wù)中旋轉(zhuǎn)飛入的文字為div#rotate_word元素。首先在樣式表中設(shè)計(jì)一個(gè)“.hot1”類去定義transform旋轉(zhuǎn)和位移；然后在jQuery腳本中用addClass()方法給div#rotate_word元素加上“.hot1”類，就實(shí)現(xiàn)了文字在加載時(shí)旋轉(zhuǎn)飛入的效果。小鴨子圖像為div#duck元素。在jQuery腳本中用fadeIn()方法使小鴨子圖像淡入出現(xiàn)。在樣式表中設(shè)計(jì)一個(gè)“.hot2”類去定義1秒鐘原地旋轉(zhuǎn)的動(dòng)畫，然后在jQuery腳本中設(shè)計(jì)鼠標(biāo)在小鴨子圖像懸停時(shí)的mouseover事件，通過addClass()方法給div#duck元素加上“.hot2”類，實(shí)現(xiàn)旋轉(zhuǎn)；再設(shè)計(jì)鼠標(biāo)離開小鴨子圖像時(shí)的mouseout事件，通過removeClass()方法將加在div#duck元素的“.hot2”類去掉，以便下次在鼠標(biāo)經(jīng)過小鴨子圖像時(shí)可以重新加上“.hot2”類實(shí)現(xiàn)旋轉(zhuǎn)效果。小天使圖像為img#imgp元素；在jQuery腳本中用show(3000)方法使小天使圖像在3秒內(nèi)逐漸顯示。然后連續(xù)用兩個(gè)animate()方法去定義上下兩個(gè)位置移動(dòng)的動(dòng)畫，每個(gè)位置的時(shí)間為0.5秒；再通過循環(huán)語(yǔ)句讓小天使在這兩個(gè)位置反復(fù)往返；循環(huán)語(yǔ)句中變量n起到計(jì)數(shù)的作用，初值為0，每循環(huán)一次通過n++語(yǔ)句都會(huì)加1。當(dāng)變量n的值為1000時(shí)循環(huán)結(jié)束，小天使也就不再上下跳動(dòng)了。input#angel按鈕元素通過定義其click事件的toggle()方法，實(shí)現(xiàn)對(duì)小天使圖像進(jìn)行隱藏顯示切換。10.1.6任務(wù)10-1：運(yùn)用jQuery制作動(dòng)畫頁(yè)面10.14.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁(yè)，設(shè)置<title>為“任務(wù)10-1”；將網(wǎng)頁(yè)命名為task10-1.html保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁(yè)的基本結(jié)構(gòu)（1）網(wǎng)頁(yè)task10-1.html里最外層插入div#container元素，在div#container內(nèi)插入div#rotate_wor元素、div#duck元素、img#imgp元素以及input#angel按鈕元素；（2）設(shè)置網(wǎng)頁(yè)的基本樣式，其中div#duck元素與img#imgp元素的初始樣式為不顯示狀態(tài)；10.1.6任務(wù)10-1：運(yùn)用jQuery制作動(dòng)畫頁(yè)面10.1步驟3制作旋轉(zhuǎn)飛入的文字（1）在樣式表中設(shè)計(jì)一個(gè)“.hot1”類去定義transform旋轉(zhuǎn)和位移.hov1{transform:rotate(360deg)translate(20px,200px);transition-duration:2s;}（2）在頭元素中引入jquery-3.6.0.min.js，然后插入一個(gè)腳本。在jQuery入口函數(shù)中用addClass()方法給div#rotate_word元素加上“.hot1”類，就實(shí)現(xiàn)了文字在加載時(shí)旋轉(zhuǎn)飛入的效果。<scriptsrc="../js/jquery-3.6.0.min.js"></script><script> $(function(){ $('#rotate_word').addClass('hov1'); });</script>10.1.6任務(wù)10-1：運(yùn)用jQuery制作動(dòng)畫頁(yè)面10.1步驟4制作小鴨子動(dòng)畫（1）在樣式表中設(shè)計(jì)一個(gè)“.hot2”類去定義1秒鐘原地旋轉(zhuǎn)的動(dòng)畫，樣式代碼如下：.hov2{transform:rotate(360deg);transition-duration:1s;}（2）在腳本的jQuery入口函數(shù)中用fadeIn()方法給div#duck元素添加淡入效果。代碼如下：$('#duck').fadeIn(5000);（3）在jQuery腳本中設(shè)計(jì)鼠標(biāo)在小鴨子圖像懸停時(shí)的mouseover事件，通過addClass()方法給div#duck元素加上“.hot2”類，實(shí)現(xiàn)旋轉(zhuǎn)，效果如圖10-4所示；再設(shè)計(jì)鼠標(biāo)離開小鴨子圖像時(shí)的mouseout事件，通過removeClass()方法將加在div#duck元素的“.hot2”類去掉，以便下次在鼠標(biāo)經(jīng)過小鴨子圖像時(shí)可以重新加上“.hot2”類實(shí)現(xiàn)旋轉(zhuǎn)效果。代碼如下：$('#duck').mouseover(function(){$('#duck').addClass('hov2');});$('#duck').mouseout(function(){$('#duck').removeClass('hov2');});10.1.6任務(wù)10-1：運(yùn)用jQuery制作動(dòng)畫頁(yè)面10.1步驟5制作小天使動(dòng)畫（1）在jQuery入口函數(shù)中用show(3000)方法使小天使圖像在3秒內(nèi)逐漸顯示；（2）連續(xù)用兩個(gè)animate()方法去定義上下兩個(gè)位置移動(dòng)的動(dòng)畫，每個(gè)位置的時(shí)間為0.5秒；再通過循環(huán)語(yǔ)句讓小天使在這兩個(gè)位置反復(fù)往返；循環(huán)語(yǔ)句中變量n起到計(jì)數(shù)的作用，初值為0，每循環(huán)一次通過n++語(yǔ)句都會(huì)加1。當(dāng)變量n的值為1000時(shí)循環(huán)結(jié)束，小天使也就不再上下跳動(dòng)了。（3）定義input#angel按鈕元素的click事件，用toggle()方法實(shí)現(xiàn)對(duì)小天使圖像進(jìn)行隱藏顯示切換。$('#imgp').show(3000);n=0;while(n<1000){$('#imgp').animate({left:'100px',top:'30px'},500).animate({left:'100px',top:'150px',},500);n++;};$('#ange1').click(function(){$('#imgp').toggle();});步驟6保存文件，完成制作。10.2jQueryUIjQueryUI是以jQuery為基礎(chǔ)的開源JavaScript網(wǎng)頁(yè)用戶界面代碼庫(kù)。jQueryUI主要分為3個(gè)部分：可更換主題的小部件（Widget）、動(dòng)畫特效和用戶交互。jQueryUI10.210.2.1jQueryUI的內(nèi)核文件jQueryUI的內(nèi)核文件包括jquery-ui.css文件、jquery-ui.js文件及jquery.js文件。jQueryUI的內(nèi)核文件可以直接通過網(wǎng)絡(luò)引用，也可以在使用jQueryUI之前，先下載準(zhǔn)備好jQueryUI庫(kù)，然后在網(wǎng)頁(yè)中引用jQueryUI內(nèi)核文件。1.下載jQueryUI2.引用jQueryUI內(nèi)核文件jQueryUI下載完成后，將得到一個(gè)包含所選組件的自定義zip文件（jquery-ui-1.13.2.custom.zip），解壓該文件。在網(wǎng)頁(yè)中使用jQueryUI插件時(shí)，需要將解壓后的所有文件及文件夾（即解壓之后的jquery-ui-1.13.2.custom文件夾）復(fù)制到站點(diǎn)下，然后在網(wǎng)頁(yè)的head元素內(nèi)添加jquery-ui.css文件、jquery-ui.js文件以及external/jquery文件夾下jquery.js文件的引用，代碼如下：<linkrel="stylesheet"href="jquery-ui-1.13.2.custom/jquery-ui.css"/><scriptsrc="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script><scriptsrc="jquery-ui-1.13.2.custom/jquery-ui.js"></script>以上三個(gè)文件是jquery-ui的內(nèi)核文件，一旦引用了上面3個(gè)文件，開發(fā)人員即可向網(wǎng)頁(yè)中添加jQueryUI插件。jQueryUI10.210.2.2jQueryUI小部件jQueryUI中提供了許多實(shí)用性的部件（Widget），包括常用的按鈕、對(duì)話框、進(jìn)度條、日期選擇器等。所有的jQueryUI小部件使用相同的模式，只要學(xué)會(huì)使用其中一個(gè)，就知道如何使用其他的小部件。跟小部件相關(guān)的類列表見表10-5所示。類名描述.ui-widget對(duì)所有小部件的外部容器應(yīng)用的Class。對(duì)小部件應(yīng)用字體和字體尺寸。.ui-widget-header對(duì)標(biāo)題容器應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用標(biāo)題容器樣式。.ui-widget-content對(duì)內(nèi)容容器應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用內(nèi)容容器樣式。jQueryUI10.21.按鈕（button）與按鈕集（buttonset）按鈕部件（ButtonWidget）使用button()方法進(jìn)行實(shí)施；針對(duì)input元素、button元素、a元素，可使用按鈕集部件。按鈕集使用buttonset()方法進(jìn)行實(shí)施。例如，下面的代碼將class="bu"的兩個(gè)div元素以按鈕的樣式呈現(xiàn)，并將div#tt內(nèi)的input元素、button元素、a元素組成一個(gè)按鈕集，效果如圖10-8所示。<divclass="bu">按鈕1</div><divclass="bu">按鈕2</div><divid="tt"><inputtype="checkbox"id="check1"><labelfor="check1">按鈕組</label><aid="bu1"href="#">按鈕組</a><buttonid="bu3">按鈕組</button></div><script> $(".bu").button(); $("#tt").buttonset();</script>jQueryUI10.22.自動(dòng)完成（Autocomplete）自動(dòng)完成（Autocomplete）部件用來根據(jù)用戶輸入的值進(jìn)行搜索和過濾，讓用戶快速?gòu)念A(yù)設(shè)值列表中選擇。自動(dòng)完成部件使用autocomplete()方法進(jìn)行實(shí)施，其格式為：autocomplete({source:[“填充項(xiàng)1”,“填充項(xiàng)2”,“填充項(xiàng)3”,…]})下面的代碼在文本框中實(shí)現(xiàn)自動(dòng)完成功能。如圖10-9所示，在文本框中輸入字母j，會(huì)自動(dòng)顯示source列表中含有j字符的預(yù)輸入項(xiàng)。<labelfor="tags">你最擅長(zhǎng)的編程語(yǔ)言：</label><inputid="tags"><script>$("#tags").autocomplete({source:["c++","java","php","coldfusion","javascript","asp","ruby"]});</script>jQueryUI10.23.進(jìn)度條（progressbar）進(jìn)度條（progressbar）用來顯示一個(gè)確定的或不確定的進(jìn)程狀態(tài)。進(jìn)度條部件使用progressbar()方法進(jìn)行實(shí)施，參數(shù)value:為進(jìn)程狀態(tài)。下面的代碼產(chǎn)生如圖10-10所示進(jìn)度條。<divid="progressbar"></div>><script> $("#progressbar").progressbar({value:40});</script>4.滑塊（Slider）滑塊（Slider）主要用來拖動(dòng)手柄選擇一個(gè)數(shù)值，可以用鼠標(biāo)或箭頭鍵進(jìn)行左右移動(dòng)。滑塊部件使用slider()方法進(jìn)行實(shí)施。下面的代碼產(chǎn)生如圖10-11所示的滑塊。<divid="slider"></div><script> $("#slider").slider();</script>jQueryUI10.24.旋轉(zhuǎn)器（Spinner）旋轉(zhuǎn)器（Spinner）允許用戶直接輸入一個(gè)值，或通過鍵盤、鼠標(biāo)、滾輪旋轉(zhuǎn)改變一個(gè)已有的值。旋轉(zhuǎn)器（Spinner）使用兩個(gè)按鈕將文本輸入覆蓋為當(dāng)前值的遞增值和遞減值，使用slider()方法進(jìn)行實(shí)施。下面的代碼產(chǎn)生如圖10-12所示的旋轉(zhuǎn)器。<inputid="spinner"><script> $("#spinner").spinner();</script>5.日期選擇器（Datepicker）日期選擇器（Datepicker）主要用來從彈出框或在線日歷中選擇一個(gè)日期。日期選擇器部件使用datepicker()方法進(jìn)行實(shí)施。下面的代碼產(chǎn)生如圖10-13所示的日期選擇器。<divid="datepicker"></div><script> $("#datepicker").datepicker();</script>jQueryUI10.26.折疊面板（Accordion）折疊面板（Accordion）用來在一個(gè)有限的空間內(nèi)顯示用于呈現(xiàn)信息的可折疊的內(nèi)容面板，單擊頭部，展開或者折疊被分為各個(gè)邏輯部分的內(nèi)容。折疊面板部件使用accordion()方法進(jìn)行實(shí)施，支持任意標(biāo)記。下面的代碼產(chǎn)生如圖10-14所示的折疊面板。<divid="accordion"><h3>標(biāo)題1</h3><div>內(nèi)容1</div><h3>標(biāo)題2</h3><div>內(nèi)容2</div><h3>標(biāo)題3</h3><div>內(nèi)容3</div></div><script> $("#accordion").accordion({heightStyle:"fill"});</script>accordion()方法中heightStyle為可選參數(shù)，控制accordion和每個(gè)面板的高度。可能的值有："auto"：所有的面板將會(huì)被設(shè)置為最高的面板的高度。"fill"：基于accordion的父元素的高度，擴(kuò)展到可用的高度。"content"：每個(gè)面板的高度取決于它的內(nèi)容。jQueryUI10.27.標(biāo)簽頁(yè)（Tabs）標(biāo)簽頁(yè)（Tabs）是一種多面板的單內(nèi)容區(qū)，每個(gè)面板與列表中的標(biāo)題相關(guān)，單擊標(biāo)簽頁(yè)，可以切換顯示不同的邏輯內(nèi)容。標(biāo)簽頁(yè)部件使用tabs()方法進(jìn)行實(shí)施。下面的代碼產(chǎn)生如圖10-15所示的標(biāo)簽頁(yè)。<divid="tabs"><ul><li><ahref="#frag1"><span>1</span></a></li><li><ahref="#frag2"><span>2</span></a></li><li><ahref="#frag3"><span>3</span></a></li></ul><divid="frag1">內(nèi)容1</div><divid="frag2">內(nèi)容2</div><divid="frag3">內(nèi)容3</div></div><script> $("#tabs").tabs();</script>8.對(duì)話框（dialog）對(duì)話框（dialog）由一個(gè)標(biāo)題欄和一個(gè)內(nèi)容區(qū)域組成，且可以移動(dòng)，調(diào)整尺寸，默認(rèn)可通過'x'圖標(biāo)關(guān)閉。對(duì)話框部件使用dialog()方法進(jìn)行實(shí)施。下面的代碼產(chǎn)生一個(gè)對(duì)話框：<divid="dialog"title="對(duì)話框">你好！</div><script>$(function(){$("#dialog").dialog();});</script>jQueryUI10.210.2.3jQueryUI特效jQueryUI在jQuery內(nèi)置的特效上添加了一些功能，如百葉窗特效、反彈特效、剪輯特效、降落特效、爆炸特效、淡入淡出、折疊特效、突出顯示、膨脹特效、跳動(dòng)特效、縮放特效、震動(dòng)特效、滑動(dòng)特效等。jQueryUI的一般格式為：$(選擇器).toggle({effect:"特效名",direction:"方向",tims:次數(shù),duration:持續(xù)時(shí)間,speed:速度});以上格式中effect:"特效名"是必選項(xiàng)，其它參數(shù)為可選項(xiàng)。effect參數(shù)、duration參數(shù)和speed參數(shù)是各種特效都有的通用參數(shù)，可以直接寫成值的形式。其格式如下：$(選擇器).toggle("特效名",{direction:"方向",tims:次數(shù)},持續(xù)時(shí)間,速度);1.百葉窗特效百葉窗特效采用"拉百葉窗"效果來隱藏或顯示元素，名稱為blind。例如對(duì)一個(gè)id為box的元素實(shí)施百葉窗效果，jQueryUI腳本代碼如下：$("#box").toggle("blind",{direction:"horizontal"});參數(shù)direction表示百葉窗的拉動(dòng)方向，可選值有up、down、left、right、vertical、horizontal，默認(rèn)值為up。jQueryUI10.22.反彈特效反彈特效名稱為bounce，例如對(duì)一個(gè)id為box的元素實(shí)施反彈特效，jQueryUI腳本代碼如下：$("#box").toggle("bounce",{times:4,distance:300},"slow");參數(shù)times表示反彈次數(shù)；參數(shù)distance表示反彈距離。3.剪輯特效剪輯特效名稱為clip，通過垂直或水平方向剪輯元素來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施剪輯特效，jQueryUI腳本代碼如下：$("#box").toggle("clip",{direction:"vertical"});參數(shù)direction為剪輯特效隱藏或顯示元素的方向，其可選值vertical為剪輯上下邊緣，horizontal為剪輯左右邊緣。4.降落特效降落特效名稱為drop，通過單個(gè)方向滑動(dòng)的淡入淡出來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施降落特效，jQueryUI腳本代碼如下：$("#box").toggle("drop",{direction:"down"});參數(shù)Direction為元素降落的方向，可選值為：up、down、left、right。jQueryUI10.25.爆炸特效爆炸特效名稱為explode，通過把元素裂成碎片來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施爆炸特效，jQueryUI腳本代碼如下：$("#box").toggle("explode",{pieces:400});參數(shù)pieces為爆炸的塊數(shù)，是一個(gè)平方數(shù)。6.淡入淡出淡入淡出特效名稱為fade，通過淡入淡出元素來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施淡入淡出特效，jQueryUI腳本代碼如下：$("#box").toggle("fade");7.折疊特效折疊特效名稱為fold，通過折疊元素來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施折疊特效，jQueryUI腳本代碼如下：$("#box").toggle("fold",{size:8,horizFirst:true});參數(shù)size表示被折疊元素的尺寸；參數(shù)horizFirst表示是不是先水平折疊。jQueryUI10.28.滑動(dòng)特效滑動(dòng)特效名稱為slide，用來把元素滑動(dòng)出視區(qū)。例如對(duì)一個(gè)id為box的元素實(shí)施滑動(dòng)特效，jQueryUI腳本代碼如下：$("#box").toggle("slide",{direction:"right",distance:400},4000);參數(shù)direction為滑動(dòng)方向，可能的值："left"、"right"、"up"、"down"；參數(shù)distance為滑動(dòng)距離。9.膨脹特效膨脹特效名稱為puff，通過在縮放元素的同時(shí)隱藏元素來創(chuàng)建膨脹特效。例如對(duì)一個(gè)id為box的元素實(shí)施膨脹特效，jQueryUI腳本代碼如下：$("#box").toggle("puff",{percent:200});參數(shù)percent為要膨脹到的百分比。10.突出特效突出特效名稱為highlight，通過首先改變背景顏色來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施突出特效，jQueryUI腳本代碼如下：$("#box").toggle("highlight");jQueryUI10.211.縮放特效縮放特效名稱為scale，按照某個(gè)百分比縮放元素。例如對(duì)一個(gè)id為box的元素實(shí)施縮放特效，jQueryUI腳本代碼如下：$("#box").toggle({effect:"scale",direction:"both",percent:50});參數(shù)direction為特效的方向。可能的值有"both"、"vertical"或"horizontal"；參數(shù)percent為縮放到的比例。12.震動(dòng)特效震動(dòng)特效名稱為shake，在垂直或水平方向多次震動(dòng)元素。例如對(duì)一個(gè)id為box的元素實(shí)施震動(dòng)特效，jQueryUI腳本代碼如下：$("#box").toggle("shake",{direction:"right",distance:5,times:50});參數(shù)direction為震動(dòng)方向，可能的值有"left"、"right"、"up"、"down"；參數(shù)distance為震動(dòng)距離；參數(shù)times為震動(dòng)次數(shù)。13.閃爍顯示閃爍特效名稱為pulsate，通過閃爍來隱藏或顯示一個(gè)元素。例如對(duì)一個(gè)id為box的元素實(shí)施閃爍特效，jQueryUI腳本代碼如下：$("#box").toggle("pulsate");jQueryUI10.210.2.4jQueryUI交互jQueryUI交互包括拖拽、放置和調(diào)整尺寸。1.拖拽draggable()方法讓被選元素可被鼠標(biāo)拖拽。例如對(duì)一個(gè)元素實(shí)施拖拽，放置在id為box的div中，放置完成后顯示“OK”，jQueryUI腳本代碼如下：$("#box").draggable();2.放置droppable()方法讓被拖拽的元素可放置。例如對(duì)div#draggable元素實(shí)施拖拽,并放置在div#box中，jQueryUI腳本代碼如下：drop(event,ui)事件：當(dāng)一個(gè)可接受的draggable被放置在droppable（基于tolerance選項(xiàng)）上時(shí)觸發(fā)。<style>#draggable{width:200px;}#box{width:200px;height:200px;}</style><script> $(function(){ $("#draggable").draggable(); $("#box").droppable({ drop:function(event,ui){ alert("ok");} }); });</script>jQueryUI10.23.調(diào)整尺寸resizable()方法可讓元素直接在瀏覽器中調(diào)整尺寸。例如對(duì)div#box元素實(shí)施調(diào)整尺寸，jQueryUI腳本代碼如下：<style> #box{width:100px;height:100px;background:#ccc;}</style><script>$(function(){ $("#box").resizable();});</script>drop(event,ui)事件：當(dāng)一個(gè)可接受的draggable被放置在droppable（基于tolerance選項(xiàng)）上時(shí)觸發(fā)。10.2.5jQueryUI應(yīng)用案例10.2案例10-2：在如圖10-16所示的效果中，上方為一排jQueryUI按鈕組，13個(gè)按鈕包含在div#tt中，通過$("#tt").buttonset()呈現(xiàn)按鈕組效果。下方是div#box元素，使用jQueryUI的.ui-widget-header類進(jìn)行修飾。div#box元素通過$("#box").draggable().resizable();實(shí)現(xiàn)拖拽和可變尺寸。上方按鈕用jQueryUI編寫click事件。當(dāng)單擊鼠標(biāo)發(fā)生時(shí)，在div#box元素上分別產(chǎn)生百葉窗特效、反彈特效、剪輯特效、降落特效、爆炸特效、淡入淡出、折疊特效、滑動(dòng)特效、膨脹特效、閃爍特效、縮放特效、震動(dòng)特效、突出顯示效果。10.2.6任務(wù)10-2：運(yùn)用jQueryUI制作頁(yè)面特效10.21.任務(wù)描述運(yùn)用jQueryUI制作頁(yè)面特效，效果如圖10-17所示。頁(yè)面包含標(biāo)題、左側(cè)折疊面板和右側(cè)標(biāo)簽頁(yè)三部分。右側(cè)標(biāo)簽頁(yè)有9個(gè)標(biāo)簽，在鼠標(biāo)滑過標(biāo)簽時(shí)，會(huì)在內(nèi)容區(qū)顯示相應(yīng)的圖片。2.任務(wù)要求通過本任務(wù)的練習(xí)，要熟練掌握jQueryUI的基本用法；掌握jQueryUI折疊面板和標(biāo)簽頁(yè)的基本程序結(jié)構(gòu)；掌握運(yùn)用jQueryUI制作頁(yè)面特效的方法和技巧。3.任務(wù)分析頁(yè)面標(biāo)題使用h1元素，通過ui-widget-shadow類給標(biāo)題加上陰影；左側(cè)導(dǎo)航采用jQueryUI折疊面板部件,在jQueryUI腳本中使用accordion()方法。在accordion()方法中加上{heightStyle:"fill"}參數(shù)，以控制折疊面板中每個(gè)面板的高度基于父元素的高度；頁(yè)面右側(cè)為標(biāo)簽頁(yè)部件，在jQueryUI腳本中使用tabs()方法。在tabs()方法中加上{event:"mouseover"}參數(shù)，將默認(rèn)的單擊激活事件設(shè)置為鼠標(biāo)經(jīng)過標(biāo)簽頁(yè)激活。10.2.6任務(wù)10-2：運(yùn)用jQueryUI制作頁(yè)面特效10.2步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁(yè)，設(shè)置<title>為“任務(wù)10-2”；將網(wǎng)頁(yè)命名為task10-2.html保存在站點(diǎn)所在的目錄。（3）準(zhǔn)備好jQueryUI基本文件，在網(wǎng)頁(yè)task10-2.html中引用jQueryUI基本文件，方法參照“10.2.1jQueryUI的使用”；步驟2建立網(wǎng)頁(yè)的基本結(jié)構(gòu)（1）網(wǎng)頁(yè)task10-2.html里最外層插入div#container元素，在div#container內(nèi)插入h1元素、div#left元素、div#right元素。（2）設(shè)置網(wǎng)頁(yè)的基本樣式，通過float:left;使div#left元素和div#right元素并排；（3）給h1元素加上ui-widget-shadow類，給標(biāo)題加上陰影。<head><title>任務(wù)10-2</title><linkrel="stylesheet"href="../jquery-ui-1.13.2.custom/jquery-ui.css"/><styletype="text/css"> #container{width:1020px;text-align:center;} #left{width:300px;float:left;} #right{width:700px;height:520px;float:left;margin-left:5px;}</style><scriptsrc="../jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script><scriptsrc="../jquery-ui-1.13.2.custom/jquery-ui.js"></script></head><body><divid="container"> <h1class="ui-widget-shadow">我的神游</h1> <divid="left"></div> <divid="right"></div></div></body>10.2.6任務(wù)10-2：運(yùn)用jQueryUI制作頁(yè)面特效10.2步驟3制作左側(cè)折疊面板（1）在div#left元素內(nèi)插入帶嵌套的項(xiàng)目列表ul#ac；（2）選擇對(duì)ul#ac元素實(shí)施accordion()方法，在accordion()方法中加上{heightStyle:"fill"}參數(shù)，以控制折疊面板中每個(gè)面板的高度基于父元素的高度。<script>$(function(){$("#ac").accordion({heightStyle:"fill"});});</script>（3）設(shè)置div#left元素的基本樣式，給div#left元素加上ui-widget-content類，并在樣式表中設(shè)置折疊面板的總高度為525px10.2.6任務(wù)10-2：運(yùn)用jQueryUI制作頁(yè)面特效10.2步驟4制作頁(yè)面右側(cè)標(biāo)簽頁(yè)（1）在div#right元素內(nèi)插入項(xiàng)目列表ul作標(biāo)簽頁(yè)的標(biāo)題。列表項(xiàng)li內(nèi)的超級(jí)鏈接分別鏈接到9個(gè)內(nèi)容區(qū)所在的id。這9個(gè)內(nèi)容區(qū)分別為div#tabs-1元素、div#tabs-2元素…div#tabs-9元素,在9個(gè)內(nèi)容區(qū)內(nèi)分別插入圖像作為內(nèi)容（2）在jQueryUI腳本中選擇div#right元素，使用tabs()方法。在tabs()方法中加上{event:"mouseover"}參數(shù)，將默認(rèn)的單擊激活事件設(shè)置為鼠標(biāo)經(jīng)過標(biāo)簽頁(yè)激活。腳本代碼如下： $("#right").tabs({event:"mouseover" });步驟5保存文件，完成制作。10.3jQuerymobilejQuerymobile構(gòu)建于jQuery以及jQueryUI類庫(kù)之上，是一個(gè)用于創(chuàng)建移動(dòng)端web應(yīng)用的前端框架。此框架簡(jiǎn)單易用，頁(yè)面開發(fā)主要使用html5標(biāo)記，僅需很少JavaScript。jQuerymobile兼容所有的移動(dòng)設(shè)備，但是并不能完全兼容PC瀏覽器，本教材建議使用GoogleChrome瀏覽器，瀏覽時(shí)按下F12進(jìn)行移動(dòng)端模擬。jQuerymobile10.3

10.3.1jQuerymobile的內(nèi)核使用jQuerymobile需要在網(wǎng)頁(yè)中引入jQuerymobile樣式j(luò)query.mobile-1.4.5.css文件，加載jQuery庫(kù)jquery.js文件，加載jQuerymobile庫(kù)jquery.mobile-1.4.5.js文件。以上3個(gè)文件是jQuerymobile的內(nèi)核文件。1.4.5是版本號(hào)。樣式簡(jiǎn)版后綴為min.css。庫(kù)文件簡(jiǎn)版后綴為min.js。此外還要在meta元素中使用viewport以確保頁(yè)面可自由縮放（關(guān)于viewport的詳細(xì)介紹見11.1.1）。1.從互聯(lián)網(wǎng)中加載jQuerymobile在網(wǎng)頁(yè)中加載以下層疊樣式(.css)和JavaScript庫(kù)(.js)就能夠使用jQuerymobile，代碼如下:<metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><scriptsrc="/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>2.下載jQuerymobile如果想將jQuerymobile放于主機(jī)中,可以從/download/下載jquery.mobile-1.4.5.zip文件jQuerymobile10.3

10.3.2jQuerymobile常用組件jQuerymobile通過HTML5data-*屬性來支持頁(yè)面結(jié)構(gòu)、頁(yè)面過渡和各種UI元素。1.頁(yè)面結(jié)構(gòu)組件jQuerymobile主要使用屬性data-role-*去定義頁(yè)面的各個(gè)結(jié)構(gòu)。此外，在鏈接中添加data-rel="dialog"屬性，可以讓用戶點(diǎn)擊鏈接時(shí)彈出對(duì)話框。表10-6為jQuerymobile頁(yè)面結(jié)構(gòu)組件。HTML5屬性描述data-role="page"是在瀏覽器中顯示的頁(yè)面。data-role="header"是在頁(yè)面頂部創(chuàng)建的工具條(通常用于標(biāo)題或者搜索按鈕)。data-role="main"定義了頁(yè)面的內(nèi)容，比如文本，圖片，表單，按鈕等data-role="footer"用于創(chuàng)建頁(yè)面底部工具條。data-dialog="true"頁(yè)面作為對(duì)話框使用jQuerymobile10.3

下面的HTML5代碼是一個(gè)典型的jQuerymobile頁(yè)面結(jié)構(gòu)，效果如圖10-19所示。<body><divdata-role="page"><divdata-role="header">頁(yè)頭文本</div><divdata-role="main"class="ui-content">頁(yè)面主要內(nèi)容</div><divdata-role="footer">頁(yè)腳文本</div></div></body>jQuerymobile10.3

2.頁(yè)面過渡組件jQuerymobile可以在單個(gè)HTML文件中創(chuàng)建多個(gè)不同id的頁(yè)面。頁(yè)面之間的切換通過a元素的href屬性鏈接到不同的id上。在頁(yè)面切換過程中，可以呈現(xiàn)多種頁(yè)面過渡效果。表10-7列出了各種頁(yè)面過渡效果實(shí)現(xiàn)的HTML5屬性。HTML5屬性描述data-transition="fade"data-transition默認(rèn)值。淡入到下一頁(yè)data-transition="flip"從后向前翻轉(zhuǎn)到下一頁(yè)data-transition="flow"拋出當(dāng)前頁(yè)，進(jìn)入下一頁(yè)data-transition="pop"像彈出窗口那樣轉(zhuǎn)到下一頁(yè)。data-transition="slide"從右向左滑動(dòng)到下一頁(yè)data-transition="slidefade"從右向左滑動(dòng)并淡入到下一頁(yè)。data-transition="slideup"從下到上滑動(dòng)到下一頁(yè)。data-transition="slidedown"從上到下滑動(dòng)到下一頁(yè)。data-transition="turn"轉(zhuǎn)向下一頁(yè)。data-transition="none"頁(yè)面無(wú)過渡效果data-direction="reverse"頁(yè)面朝相反方向過渡退回上一頁(yè)，一般與data-transition="slide"等帶方向的過渡搭配使用jQuerymobile10.3

3.按鈕組件在jQuerymobile中，按鈕可通過三種方式創(chuàng)建：使用button元素、使用input元素以及使用帶有class="ui-btn"類的a元素。默認(rèn)情況下，按鈕占滿整個(gè)屏幕寬度。如果想要一個(gè)與內(nèi)容一樣寬的按鈕，或者想要并排顯示兩個(gè)或多個(gè)按鈕，需添加data-inline="true"屬性或使用“.ui-btn-inline”類。使用data-role="controlgroup"屬性和data-type="horizontal|vertical"屬性可以把多個(gè)按鈕組合在一起，形成水平或垂直組合按鈕。例如，下面的代碼將三個(gè)按鈕水平組合在一起，效果如圖10-22所示：<divdata-role="controlgroup"data-type="horizontal"> <ahref="#anylink"data-role="button">按鈕1</a> <ahref="#anylink"data-role="button">按鈕2</a> <ahref="#anylink"data-role="button">按鈕3</a></div>jQuerymobile10.3

4.導(dǎo)航欄組件導(dǎo)航欄組件使用data-role="navbar"屬性來定義，導(dǎo)航欄中的鏈接將自動(dòng)變成按鈕。下面的代碼產(chǎn)生一個(gè)導(dǎo)航欄，效果如圖10-23所示。<divdata-role="navbar"><ul> <li><ahref="#">1</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li></ul></div>jQuerymobile10.3

5.按鈕圖標(biāo)類按鈕圖標(biāo)類是以class類的形式展示按鈕圖標(biāo)。按鈕圖標(biāo)類要與.ui-btn類搭配使用，并且要指定按鈕圖標(biāo)的顯示位置。按鈕圖標(biāo)類如表10-8所列。類名作用ui-icon-arrow-l左箭頭ui-icon-arrow-r右箭頭ui-icon-info信息ui-icon-delete刪除ui-icon-back后退ui-icon-audio揚(yáng)聲器ui-icon-lock掛鎖ui-icon-search搜索ui-icon-alert警告ui-icon-grid網(wǎng)格ui-icon-home主頁(yè)按鈕圖標(biāo)位置是以四個(gè)class類進(jìn)行控制：.ui-btn-icon-top類（頂部）、.ui-btn-icon-right類（右側(cè)）、.ui-btn-icon-bottom類（底部）、.ui-btn-icon-left類（左側(cè)）。如果未指定按鈕圖標(biāo)的位置，圖標(biāo)將不顯示。例如，下面的代碼將在a元素左側(cè)位置產(chǎn)生左箭頭，效果如圖10-24所示：<ahref="#"class="ui-btnui-icon-arrow-lui-btn-icon-leftui-btn-inline">鏈接</a>如果要去掉按鈕圖標(biāo)的圓圈，需添加“.ui-nodisc-icon”類。jQuerymobile10.3

6.面板組件面板組件使用data-role="panel"屬性來定義。jQuerymobile中的面板會(huì)在屏幕的左側(cè)向右側(cè)劃出。要訪問面板，需要?jiǎng)?chuàng)建一個(gè)指向面板div元素id的鏈接，點(diǎn)擊該鏈接即可打開面板。下面的代碼產(chǎn)生一個(gè)面板，并創(chuàng)建一個(gè)鏈接進(jìn)行面板打開與關(guān)閉的切換。效果如圖10-25所示。<divdata-role="page"><divdata-role="panel"id="myPanel"><p>面板內(nèi)容…</p></div><divclass="ui-content"><ahref="#myPanel"class="ui-btnui-btn-inline">面板</a></div></div>jQuerymobile10.3

7.折疊組件折疊組件使用data-role="collapsible"屬性來定義，在容器（div）內(nèi)，添加一個(gè)標(biāo)題元素（H1-H6）。默認(rèn)情況下，內(nèi)容是被折疊起來的。如需在頁(yè)面加載時(shí)展開內(nèi)容，請(qǐng)使用data-collapsed="false"屬性。如果把若干可折疊組件用帶有data-role="collapsible-set"的新容器包圍起來，可以形成可折疊集合。下面的代碼產(chǎn)生一個(gè)折疊面板并展開。效果如圖10-26所示。<divdata-role="collapsible"data-collapsed="false"> <h1>折疊標(biāo)題</h1> <p>內(nèi)容...</p></div>jQuerymobile10.3

8.彈窗組件創(chuàng)建一個(gè)彈窗，需要使用a元素和div元素。div元素中的內(nèi)容為彈窗顯示的內(nèi)容，在div元素添加data-role="popup"屬性，并指定id；在a元素上添加data-rel="popup"屬性，并設(shè)置<a>標(biāo)簽的href值為<div>標(biāo)簽指定的id。例如，單擊如圖10-27所示的彈窗鏈接，會(huì)產(chǎn)生如圖10-28所示的彈窗內(nèi)容。代碼如下：<divclass="ui-content"><ahref="#myPopup"data-rel="popup"class="ui-btnui-btn-inlineui-corner-all">彈窗</a><divdata-role="popup"id="myPopup"><p>彈窗內(nèi)容...</p></div></div>jQ