jQuery頁面特效jquery頁面特效

第10章jQuery頁面特效jQuery是一個基于JavaScript的開源框架。與JavaScript相比，jQuery具有代碼高效、瀏覽器兼容性更好等特征，極大地簡化了對DOM對象、事件處理、動畫效果的操作。本章學習jQuery的基本知識，并運用jQueryUI以及jQuerymobile進行頁面特效制作。了解jQuery和jQueryUI以及jQuerymobile的基本特點和基本應用理解jQuerymobile的移動互聯(lián)網(wǎng)基本應用方法掌握各種jQueryUI常用插件的的基本功能能熟練使用jQuery制作頁面特效。內容安排jQuery基礎10.1jQueryUI10.2jQuerymobile10.3小試牛刀10.410.1jQuery基礎jQuery的設計理念是“寫得更少，做得更多”（TheWriteLess，DoMore），是一種將JavaScript、CSS、DOM等特征集于一體的強大框架，通過簡單的代碼來實現(xiàn)各種頁面特效。用戶可以在jQuery的官方網(wǎng)站/下載最新的jQuery庫。jQuery有兩個版本的庫可供下載：一個版本用于實際的網(wǎng)站中，是已被精簡和壓縮的min版；另一個版本用于測試和開發(fā)，是未壓縮的。本書采用的是jquery-3.6.0.min.js。“3.6.0”是版本號。jQuery不需要安裝，把下載的jQuery庫存入網(wǎng)站上的一個公共位置（通常保存在一個獨立的文件夾js中），想要在某個頁面中使用jQuery時，要事先引入該jQuery庫文件（也可以直接引用互聯(lián)網(wǎng)的地址）。jQuery基礎10.110.1.1jQuery工廠函數(shù)與選擇器jQuery中被譽為工廠函數(shù)的是“$()”。在jQuery中，無論我們使用哪種類型的選擇器，都需要從一個“$”符號和一對“()”開始。例如，$("div")表示文檔中全部的div元素對象；$("#tt")表示文檔中id屬性值為tt的一個元素對象；$(".red")表示文檔中使用CSS類名為red的所有元素對象。$(document)選中的是整個html所有元素的集合，也就是整個網(wǎng)頁文檔對象。1.jQuery入口函數(shù)jQuery使用$(document).ready()方法代替?zhèn)鹘y(tǒng)JavaScript的window.onload事件，表示獲取文檔對象就緒的時候。jQuery庫只建立一個名為jQuery的對象，其所有函數(shù)都在該對象之下，該函數(shù)稱為jQuery入口函數(shù)。jQuery入口函數(shù)有兩種寫法，分別是：（1）入口函數(shù)完整寫法：$(document).ready(function(){程序代碼段…})（2）入口函數(shù)簡略寫法：$(function(){程序代碼段…})2.jQuery語法結構jQuery語法是為HTML元素的選取而編制的，可以對元素執(zhí)行某些操作。其基礎語法是：$(selector).action()（1）美元符號$定義jQuery；（2）選擇器（selector）用于“選擇”HTML元素；（3）jQuery的action()用于執(zhí)行對元素的操作。jQuery基礎10.13.jQuery選擇器在頁面中要為某個元素添加屬性或事件時，第一步必須先準確地找到這個元素。在jQuery中可以通過選擇器來實現(xiàn)這一重要功能。（1）selector為CSS選擇器，列表如表10-1所示。選擇器舉例說明標簽選擇器$('a')選擇所有的<a>標簽群選擇器$('h1,h2,h3')選擇所有的<h1>標簽、<h2>標簽和<h3>標簽id選擇器$('#myId')選擇id為myId的網(wǎng)頁元素類選擇器$('.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基礎10.1（2）selector為jQuery過濾選擇器，列表如表10-2所示：選擇器舉例說明:first$('a:first')選擇網(wǎng)頁中第1個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")所有選中的復選框選項:eq(index)$("ulli:eq(3)")列表中的第四個元素（index值從0開始）:gt(no)$("ulli:gt(3)")列舉index大于3的元素:lt(no)$("ulli:lt(3)")列舉index小于3的元素:animated$(":animated")所有動畫元素:focus$(":focus")當前具有焦點的元素:contains(text)$(":contains('Hello')")所有包含文本"Hello"的元素:has(selector)$("div:has(p)")所有包含有<p>元素在其內的<div>元素:empty$(":empty")所有空元素:parent$(":parent")匹配所有含有子元素或者文本的父元素。jQuery基礎10.110.1.2jQuery基本操作jQuery的基本操作是由一系列函數(shù)構成的針對所選擇對象的操作方法，包括對元素的操作、對樣式的操作、對內容和值的操作、DOM的操作和對表單的操作等。元素的操作jQuery提供了attr()方法和prop()方法來獲取元素屬性。這兩種方法都是用于獲取所匹配元素的集合中第一個元素的屬性，或設置所匹配元素的屬性。（1）attr()方法attr()方法語法格式如下（其中key和name都代表元素的屬性名稱，properties代表一個集合）：attr(“屬性名”)：返回屬性值attr(“屬性名”,屬性值)：設置屬性值（2）prop()方法prop()方法的參數(shù)說明與attr()方法的參數(shù)說明相同，多用于boolean類型的屬性操作，例如checked、selected和disabled等。例如，下面的代碼設置第一個復選框為選中狀態(tài)：$("input[type='checkbox']").prop("checked");（3）removeAttr()方法removeAttr()方法用于刪除匹配元素的指定屬性。（4）removeProp()方法removeProp()方法用于刪除由prop()方法設置的屬性集。jQuery基礎10.1樣式的操作在Web前端開發(fā)中，設計者如果想改變一個元素的整體外觀，例如給網(wǎng)站換膚，就可以通過修改該元素所使用的CSS類來實現(xiàn)。（1）

addClass()

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

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

text()

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

10.3.1jQuerymobile的內核使用jQuerymobile需要在網(wǎng)頁中引入jQuerymobile樣式jquery.mobile-1.4.5.css文件，加載jQuery庫jquery.js文件，加載jQuerymobile庫jquery.mobile-1.4.5.js文件。以上3個文件是jQuerymobile的內核文件。1.4.5是版本號。樣式簡版后綴為min.css。庫文件簡版后綴為min.js。此外還要在meta元素中使用viewport以確保頁面可自由縮放（關于viewport的詳細介紹見11.1.1）。1.從互聯(lián)網(wǎng)中加載jQuerymobile在網(wǎng)頁中加載以下層疊樣式(.css)和JavaScript庫(.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放于主機中,可以從/download/下載jquery.mobile-1.4.5.zip文件jQuerymobile10.3

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

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

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

3.按鈕組件在jQuerymobile中，按鈕可通過三種方式創(chuàng)建：使用button元素、使用input元素以及使用帶有class="ui-btn"類的a元素。默認情況下，按鈕占滿整個屏幕寬度。如果想要一個與內容一樣寬的按鈕，或者想要并排顯示兩個或多個按鈕，需添加data-inline="true"屬性或使用“.ui-btn-inline”類。使用data-role="controlgroup"屬性和data-type="horizontal|vertical"屬性可以把多個按鈕組合在一起，形成水平或垂直組合按鈕。例如，下面的代碼將三個按鈕水平組合在一起，效果如圖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.導航欄組件導航欄組件使用data-role="navbar"屬性來定義，導航欄中的鏈接將自動變成按鈕。下面的代碼產(chǎn)生一個導航欄，效果如圖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.按鈕圖標類按鈕圖標類是以class類的形式展示按鈕圖標。按鈕圖標類要與.ui-btn類搭配使用，并且要指定按鈕圖標的顯示位置。按鈕圖標類如表10-8所列。類名作用ui-icon-arrow-l左箭頭ui-icon-arrow-r右箭頭ui-icon-info信息ui-icon-delete刪除ui-icon-back后退ui-icon-audio揚聲器ui-icon-lock掛鎖ui-icon-search搜索ui-icon-alert警告ui-icon-grid網(wǎng)格ui-icon-home主頁按鈕圖標位置是以四個class類進行控制：.ui-btn-icon-top類（頂部）、.ui-btn-icon-right類（右側）、.ui-btn-icon-bottom類（底部）、.ui-btn-icon-left類（左側）。如果未指定按鈕圖標的位置，圖標將不顯示。例如，下面的代碼將在a元素左側位置產(chǎn)生左箭頭，效果如圖10-24所示：<ahref="#"class="ui-btnui-icon-arrow-lui-btn-icon-leftui-btn-inline">鏈接</a>如果要去掉按鈕圖標的圓圈，需添加“.ui-nodisc-icon”類。jQuerymobile10.3

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

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

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