Web前端開(kāi)發(fā)第15章：jQuery編程1本章主要內(nèi)容jQuery概述jQuery基礎(chǔ)應(yīng)用jQuery中的DOM操作jQuery插件案例：使用jQuery進(jìn)行表單驗(yàn)證案例：使用JQueryMobile快速開(kāi)發(fā)手機(jī)網(wǎng)站21.jQuery概述jQuery是一個(gè)集JavaScript、CSS、DOM、Ajax于一體的強(qiáng)大框架體系。它是眾多JavaScript類(lèi)庫(kù)中的一種。31.1jQuery簡(jiǎn)介1.jQuery概述發(fā)展歷程jQuery是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript類(lèi)庫(kù)，是由美國(guó)人JohnResig于2006年1月創(chuàng)建的一個(gè)開(kāi)源項(xiàng)目，它的主旨是：用更少的代碼，實(shí)現(xiàn)更多的功能（Writeless,domore）。41.1jQuery簡(jiǎn)介1.jQuery概述2006年8月jQuery的第一個(gè)穩(wěn)定版本，已經(jīng)可以支持CSS選擇符，時(shí)間交互以及Ajax交互。到了2007年7月，jQuery1.1.3版本發(fā)布，這次小版本的變化包含了對(duì)jQuery選擇符引擎執(zhí)行速度的顯著提升，也是從這個(gè)版本開(kāi)始，jQuery的性能達(dá)到了Prototype、Mootools以及Dojo等同類(lèi)JavaScript類(lèi)庫(kù)的水平。jQuery隨著被人們熟知，越來(lái)越多的程序高手加入其中，完善并壯大其項(xiàng)目?jī)?nèi)容，現(xiàn)在已成為一個(gè)深受Web前端開(kāi)發(fā)者喜愛(ài)的JavaScript類(lèi)庫(kù)。51.1jQuery簡(jiǎn)介1.jQuery概述主要特點(diǎn)便捷操作DOM元素jQuery可以很方便的獲取和修改頁(yè)面中的某些元素，無(wú)論是刪除、移動(dòng)還是復(fù)制，jQuery都提供了一整套方便、便捷的方法，既減少了代碼的編寫(xiě)，又大大提高了頁(yè)面的體驗(yàn)度?？刂祈?yè)面樣式j(luò)Query可以十分方便的控制頁(yè)面中的CSS樣式，瀏覽器對(duì)頁(yè)面文件的兼容性一直都是Web前端開(kāi)發(fā)者最為頭疼的事情，而使用jQuery操作頁(yè)面的樣式卻可以很好的兼容各種瀏覽器。61.1jQuery簡(jiǎn)介1.jQuery概述對(duì)頁(yè)面事件的處理引用jQuery之后，可以使頁(yè)面的表現(xiàn)層與功能開(kāi)發(fā)分離，開(kāi)發(fā)者更多的專(zhuān)注于程序的邏輯與功效；頁(yè)面設(shè)計(jì)人員側(cè)重于頁(yè)面的優(yōu)化與用戶(hù)體驗(yàn)。然后通過(guò)事件綁定機(jī)制，輕松的將二者結(jié)合起來(lái)。大量的插件在頁(yè)面中的運(yùn)用在引用jQuery庫(kù)之后，還可以使用大量的插件來(lái)完善頁(yè)面的功能和效果，如表單插件、UI插件等，這些插件的使用不會(huì)與jQuery造成沖突，還會(huì)極大的豐富頁(yè)面的展示效果，簡(jiǎn)化代碼的開(kāi)發(fā)成本、降低開(kāi)發(fā)難度。71.1jQuery簡(jiǎn)介1.jQuery概述與Ajax技術(shù)完美結(jié)合Ajax的異步讀取服務(wù)器數(shù)據(jù)的方法，極大地方便了程序的開(kāi)發(fā)，提升了用戶(hù)的頁(yè)面體驗(yàn)度；而引用jQuery庫(kù)后，不僅完善了原有的功能，而且減少了代碼的書(shū)寫(xiě)量，通過(guò)其內(nèi)部對(duì)象或函數(shù)，就可以實(shí)現(xiàn)復(fù)雜的Ajax功能。81.1jQuery簡(jiǎn)介1.jQuery概述JavaScript與jQueryJavaScript是一種為網(wǎng)站添加互動(dòng)以及自定義行為的客戶(hù)端腳本語(yǔ)言，有關(guān)JavaScript的信息我們?cè)谇罢轮幸呀?jīng)詳細(xì)的介紹過(guò)了。JavaScript的出現(xiàn)使得網(wǎng)頁(yè)與用戶(hù)之間實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的和交互的關(guān)系。使得網(wǎng)頁(yè)包含更多活躍的元素和更加精彩的內(nèi)容。JavaScript本身存在三個(gè)弊端，即復(fù)雜的文檔對(duì)象模型（DOM）、不一致的瀏覽器實(shí)現(xiàn)和缺乏便捷的開(kāi)發(fā)、調(diào)試工具。而jQuery則是JavaScript的一個(gè)類(lèi)庫(kù)，jQuery封裝了很多預(yù)定義的對(duì)象和使用函數(shù)，能幫助使用者很輕松的建立有高難度交互的頁(yè)面，并兼容各大瀏覽器，以方便Web前端開(kāi)發(fā)者直接使用，而不需要再使用JavaScript語(yǔ)句書(shū)寫(xiě)大量的代碼，是當(dāng)前最流行的JavaScript類(lèi)庫(kù)之一。91.1jQuery簡(jiǎn)介1.jQuery概述jQuery強(qiáng)調(diào)的理念是用更少的代碼，實(shí)現(xiàn)更多的功能。jQuery獨(dú)特的選擇器、鏈?zhǔn)讲僮?、事件處理機(jī)制和封裝完整的Ajax都是其他JavaScript類(lèi)庫(kù)難以企及的，總結(jié)起來(lái)jQuery共有以下幾種優(yōu)勢(shì)：輕量級(jí)、強(qiáng)大的選擇器、出色的DOM操作封裝、可靠的事件處理機(jī)制、完善的Ajax、不污染頂級(jí)變量、出色的瀏覽器兼容性、鏈?zhǔn)讲僮鞣绞?、隱式迭代、行為層與結(jié)構(gòu)層的分離、豐富的插件支持、完善的文檔、開(kāi)源。101.2為什么要使用jQuery1.jQuery概述輕量級(jí)jQuery非常輕巧，總大小只有30KB左右。強(qiáng)大的選擇器jQuery允許開(kāi)發(fā)者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨(dú)創(chuàng)的高級(jí)而又復(fù)雜的選擇器。另外還可以加入插件使其支持更多的選擇器，甚至網(wǎng)頁(yè)Web前端開(kāi)發(fā)者可以編寫(xiě)屬于自己的選擇器。由于jQuery的這一特性，因此有一定CSS經(jīng)驗(yàn)的Web前端開(kāi)發(fā)者可以很容易的切入到j(luò)Query的學(xué)習(xí)中來(lái)。111.2為什么要使用jQuery1.jQuery概述出色的DOM操作封裝jQuery封裝了大量常用的DOM操作，使Web前端開(kāi)發(fā)者在編寫(xiě)DOM操作相關(guān)程序的時(shí)候能夠更加得心應(yīng)手。jQuery可以輕松的完成各種原本十分復(fù)雜的操作，讓JavaScript新手也能寫(xiě)出優(yōu)秀的程序?？煽康氖录幚頇C(jī)制jQuery在預(yù)留退路、循序漸進(jìn)以及非入侵式編程思想方面，做的十分出色。完善的AjaxjQuery將所有的Ajax操作封裝在一個(gè)函數(shù)里面，使得Web前端開(kāi)發(fā)者處理Ajax的時(shí)候能夠更加專(zhuān)心的處理業(yè)務(wù)邏輯，而無(wú)需考慮關(guān)系復(fù)雜的瀏覽器兼容性與Ajax使用問(wèn)題。121.2為什么要使用jQuery1.jQuery概述不污染頂級(jí)變量jQuery只創(chuàng)建一個(gè)名為jQuery的對(duì)象，其所有的函數(shù)方法都在該對(duì)象下，其別名$也可以隨時(shí)交出控制權(quán)，絕不會(huì)污染其它的對(duì)象。該特性使jQuery可以與其它JavaScript類(lèi)庫(kù)共存，而不用考慮后期可能沖突的問(wèn)題。出色的瀏覽器兼容性作為一個(gè)流行的JavaScript類(lèi)庫(kù)，瀏覽器的兼容性是必須具備的條件之一。jQuery能夠在IE6.0+、EF2+、Safari2.0+和Opera9.0+下正常運(yùn)行，同時(shí)修復(fù)了一些瀏覽器之間的表現(xiàn)差異性問(wèn)題，使Web前端開(kāi)發(fā)者不必在為瀏覽器兼容性問(wèn)題而苦惱。131.2為什么要使用jQuery1.jQuery概述鏈?zhǔn)讲僮鞣绞絡(luò)Query中最有特色的莫過(guò)于它的鏈?zhǔn)讲僮?，即?duì)發(fā)生在同一個(gè)jQuery對(duì)象上的一組動(dòng)作，可以直接連寫(xiě)而無(wú)需重復(fù)獲取對(duì)象。隱式迭代jQuery里的方法都被設(shè)計(jì)成自動(dòng)操作對(duì)象集合，而不是單獨(dú)的對(duì)象，這使得大量的循環(huán)結(jié)構(gòu)變得不再必要，從而大幅的減少了代碼量。行為層與結(jié)構(gòu)層的分離Web前端開(kāi)發(fā)者可以使用jQuery選擇器選中元素，然后直接給元素添加事件。這種將行為層與結(jié)構(gòu)完全分離的思想，可以使jQuery開(kāi)發(fā)人員和HTML或其它頁(yè)面開(kāi)發(fā)人員的工作職能相分離，擺脫過(guò)去開(kāi)發(fā)沖突或個(gè)人單干的開(kāi)發(fā)模式。141.2為什么要使用jQuery1.jQuery概述豐富的插件支持jQuery的易擴(kuò)展性，吸引了來(lái)自全球的開(kāi)發(fā)者來(lái)編寫(xiě)jQuery的擴(kuò)展插件。目前已經(jīng)有超過(guò)幾百種的官方插件支持。而且還不斷有新插件面世。完善的文檔jQuery的文檔非常豐富，減少了學(xué)習(xí)成本。開(kāi)源jQuery是一個(gè)開(kāi)源的產(chǎn)品，允許所有Web前端開(kāi)發(fā)者自由的使用與修改。151.2為什么要使用jQuery2.jQuery基礎(chǔ)應(yīng)用jQuery不需要安裝，要使用它只需要該文件的一個(gè)副本，該副本可以放在外部站點(diǎn)上，也可以放在自己的服務(wù)器上。以下代碼為引用jQuery庫(kù)的方法：<scriptsrc="jquery/jquery.js"></script>在引用樣式表文件的代碼之后，是包含JavaScript文件的代碼，這里需要注意的是，引用jQuery庫(kù)文件的<script>標(biāo)簽，必須放在引用自定義腳本文件的<script>標(biāo)簽之前。否則，在編寫(xiě)的代碼中將引用不到j(luò)Query框架。162.1調(diào)用方法2.jQuery基礎(chǔ)應(yīng)用在jQuery程序中，使用最多的莫過(guò)于“$”美元符了，$就是jQuery的一個(gè)簡(jiǎn)寫(xiě)格式，無(wú)論是頁(yè)面元素的選擇，還是功能函數(shù)的前綴都必須使用該符號(hào)，可以說(shuō)它是jQuery程序的標(biāo)志。172.2基本語(yǔ)法2.jQuery基礎(chǔ)應(yīng)用在上面的例子中，用到了$(document).ready其類(lèi)似于JavaScript中的window.onload，不同之處主要有兩點(diǎn)：一是執(zhí)行時(shí)間不同，$(document).ready在頁(yè)面框架加載完畢后就執(zhí)行；而window.onload必須在頁(yè)面全部加載完畢后（包含圖片下載）后才能執(zhí)行，明顯是前者執(zhí)行效率更快一點(diǎn)。二是執(zhí)行數(shù)量不同，$(document).ready可以重復(fù)寫(xiě)多個(gè)，并且每次執(zhí)行結(jié)果不同；但是window.onload盡管可以執(zhí)行多個(gè)，但是僅輸出最后一個(gè)的執(zhí)行結(jié)果，無(wú)法完成多個(gè)結(jié)果的輸出。182.2基本語(yǔ)法2.jQuery基礎(chǔ)應(yīng)用選擇器是jQuery的根基，在jQuery中無(wú)論是對(duì)事件處理、遍歷DOM還是Ajax操作都依賴(lài)于選擇器，熟練的使用選擇器不僅能簡(jiǎn)化代碼，而且可以達(dá)到事半功倍的效果。根據(jù)所獲取頁(yè)面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過(guò)濾選擇器、表單選擇器四大類(lèi)。而過(guò)濾選擇器又可分為：簡(jiǎn)單過(guò)濾選擇器、內(nèi)容過(guò)濾選擇器、可見(jiàn)性過(guò)濾選擇器、屬性過(guò)濾選擇器、子元素過(guò)濾選擇器、表單對(duì)象過(guò)濾選擇器六種。192.3選擇器202.jQuery基礎(chǔ)應(yīng)用基本選擇器基本選擇器是jQuery中使用最頻繁的選擇器，它由元素id、class、元素名、多個(gè)選擇符組成，通過(guò)基本選擇器可以實(shí)現(xiàn)大多數(shù)頁(yè)面元素的查找，其具體使用說(shuō)明如下表15-01所示：212.3選擇器2.jQuery基礎(chǔ)應(yīng)用層次選擇器層次選擇器通過(guò)DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包含后代、父子、相鄰、兄弟關(guān)系，通過(guò)其中某類(lèi)關(guān)系可以方便快捷的定位元素，其具體使用說(shuō)明如下表15-02所示：222.3選擇器2.jQuery基礎(chǔ)應(yīng)用層次選擇器層次選擇器通過(guò)DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包含后代、父子、相鄰、兄弟關(guān)系，通過(guò)其中某類(lèi)關(guān)系可以方便快捷的定位元素，其具體使用說(shuō)明如下表15-02所示：232.3選擇器2.jQuery基礎(chǔ)應(yīng)用簡(jiǎn)單過(guò)濾選擇器過(guò)濾選擇器根據(jù)某類(lèi)過(guò)濾規(guī)則進(jìn)行元素的匹配，書(shū)寫(xiě)時(shí)都以冒號(hào)（:）開(kāi)頭，而簡(jiǎn)單過(guò)濾器便是過(guò)濾器當(dāng)中使用最為廣泛的一種，其具體使用說(shuō)明如下表15-03所示：242.3選擇器252.jQuery基礎(chǔ)應(yīng)用內(nèi)容過(guò)濾選擇器內(nèi)容過(guò)濾選擇器根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對(duì)匹配進(jìn)行元素定位，其具體使用說(shuō)明如下表15-04所示：262.3選擇器2.jQuery基礎(chǔ)應(yīng)用可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器根據(jù)元素是否可見(jiàn)的特征獲取元素，其具體使用說(shuō)明如下表15-05所示：272.3選擇器2.jQuery基礎(chǔ)應(yīng)用屬性過(guò)濾選擇器屬性過(guò)濾選擇器根據(jù)元素的某個(gè)屬性獲取元素，如id屬性值或匹配屬性值的內(nèi)容，并用中括號(hào)包裹，其具體使用說(shuō)明如下表15-06所示：282.3選擇器2.jQuery基礎(chǔ)應(yīng)用子元素過(guò)濾選擇器在頁(yè)面開(kāi)發(fā)過(guò)程中，常常遇到突出指定某行的需求。雖然使用基本過(guò)濾選擇器:eq(index)可實(shí)現(xiàn)單個(gè)表格的顯示，但并不能滿(mǎn)足大量數(shù)據(jù)和多個(gè)表格的選擇需求。為了實(shí)現(xiàn)這樣的需求，jQuery中可以通過(guò)子元素過(guò)濾選擇器十分輕松的獲取所有父元素中的某個(gè)元素，其具體使用說(shuō)明如下表15-07所示：292.3選擇器2.jQuery基礎(chǔ)應(yīng)用表單對(duì)象屬性過(guò)濾選擇器表單對(duì)象屬性過(guò)濾選擇器通過(guò)表單中的某個(gè)對(duì)象屬性特征獲取該元素，其具體使用說(shuō)明如下表15-08所示：302.3選擇器2.jQuery基礎(chǔ)應(yīng)用表單選擇器無(wú)論是提交還是傳遞數(shù)據(jù)，表單在頁(yè)面中的作用是顯而易見(jiàn)的。通過(guò)表單進(jìn)行數(shù)據(jù)的提交或處理，在前端頁(yè)面開(kāi)發(fā)中占據(jù)重要地位。因此，為了使用戶(hù)能夠更加方便的、高效的使用表單，在jQuery選擇器中引入了表單選擇器，該選擇器專(zhuān)為表單量身打造，通過(guò)它可以在頁(yè)面中快速定位某表單對(duì)象，其具體使用說(shuō)明如下表15-09所示：312.3選擇器322.jQuery基礎(chǔ)應(yīng)用表單選擇器無(wú)論是提交還是傳遞數(shù)據(jù)，表單在頁(yè)面中的作用是顯而易見(jiàn)的。通過(guò)表單進(jìn)行數(shù)據(jù)的提交或處理，在前端頁(yè)面開(kāi)發(fā)中占據(jù)重要地位。因此，為了使用戶(hù)能夠更加方便的、高效的使用表單，在jQuery選擇器中引入了表單選擇器，該選擇器專(zhuān)為表單量身打造，通過(guò)它可以在頁(yè)面中快速定位某表單對(duì)象，其具體使用說(shuō)明如下表15-09所示：332.3選擇器2.jQuery基礎(chǔ)應(yīng)用當(dāng)用戶(hù)瀏覽頁(yè)面時(shí)，瀏覽器會(huì)對(duì)頁(yè)面代碼進(jìn)行解釋或編譯，這個(gè)過(guò)程實(shí)質(zhì)上是通過(guò)事件來(lái)驅(qū)動(dòng)的，即頁(yè)面在加載時(shí)，執(zhí)行一個(gè)load事件，在這個(gè)事件中實(shí)現(xiàn)瀏覽器編譯頁(yè)面代碼的過(guò)程。事件無(wú)論在頁(yè)面元素本身還是在元素與人機(jī)交互中，都占有十分重要的地位。342.4事件2.jQuery基礎(chǔ)應(yīng)用頁(yè)面載入事件在前面的章節(jié)中我們簡(jiǎn)單的介紹了jQuery中的頁(yè)面載入事件ready()方法，除了簡(jiǎn)化的$(function(){})方法外，ready()方法還有以下幾種不同的寫(xiě)法，但它們執(zhí)行的效果是一樣的。$(document).ready(function(){//代碼部分});$(function(){//代碼部分});jQuery(document).ready(function(){//代碼部分});jQuery(function(){//代碼部分});352.4事件2.jQuery基礎(chǔ)應(yīng)用綁定事件在進(jìn)行事件的綁定時(shí)，我們?cè)谇懊媸褂昧?click(function(){})綁定按鈕的點(diǎn)擊事件，除了這種寫(xiě)法之外，在jQuery中我們還可以使用bind()方法進(jìn)行事件的綁定，bind()功能是為每個(gè)選擇元素的事件綁定處理函數(shù)，其語(yǔ)法結(jié)構(gòu)如下所示：bind(type,[data],fn);362.4事件2.jQuery基礎(chǔ)應(yīng)用切換事件在jQuery中，有兩個(gè)方法用于事件的切換，一個(gè)是hover()，另一個(gè)是方法toggle()。所謂的切換事件，就是有兩個(gè)以上的事件綁定于一個(gè)元素，在元素的行為動(dòng)作間進(jìn)行切換。調(diào)用jQuery中的hover()方法可以使元素在鼠標(biāo)懸停與鼠標(biāo)移出的事件中進(jìn)行切換，該方法在實(shí)現(xiàn)運(yùn)用中，也可以通過(guò)jQuery中的事件mousenter與mouseleave進(jìn)行替換。372.4事件2.jQuery基礎(chǔ)應(yīng)用移除事件在DOM對(duì)象的實(shí)際操作中，既然存在用于綁定事件的bind方法，那么相應(yīng)的也存在用于移除綁定事件的方法，在jQuery中，可以通過(guò)unbind()方法移除綁定的所有事件或指定某一個(gè)事件，其語(yǔ)法結(jié)構(gòu)如下所示：unbind([type],[fn])382.4事件2.jQuery基礎(chǔ)應(yīng)用其它事件除了以上的幾種事件外，在jQuery中還有很多的事件處理方法，我們這里主要介紹一下最為實(shí)用的兩種處理事件的方法：one()和trigger()。one()方法的功能是為所選的元素綁定一個(gè)僅觸發(fā)一次的處理函數(shù)，其語(yǔ)法結(jié)構(gòu)如下所示：one(type,[data],fn)trigger()方法的功能是在所選擇的元素上觸發(fā)指定類(lèi)型的事件，其語(yǔ)法結(jié)構(gòu)如下所示：trigger(type,[data])392.4事件2.jQuery基礎(chǔ)應(yīng)用隱藏/顯示在jQuery中show()方法與hide()方法實(shí)現(xiàn)隱藏與顯示效果。其語(yǔ)法結(jié)構(gòu)如下所示：show(speed,[callback]);//動(dòng)畫(huà)效果的顯示功能hide(speed,[callback]);//動(dòng)畫(huà)效果的隱藏功能402.5常用效果2.jQuery基礎(chǔ)應(yīng)用淡入/淡出在jQuery中我們可以通過(guò)實(shí)現(xiàn)元素漸漸變幻背景色的動(dòng)畫(huà)效果來(lái)顯示或隱藏元素，也就是所謂的淡入淡出效果。show()、hide()方法與fadeIn()、fadeOut()方法相比較，相同之處是都切換元素的顯示狀態(tài)，不同之處在于，前者的動(dòng)畫(huà)效果使元素的寬高屬性都發(fā)生了變化，而后者僅僅是改變了元素的透明度，并不修改其它的屬性。fadeIn()與fadeOut()方法語(yǔ)法結(jié)構(gòu)如下所示：fadeIn(speed,[callback])fadeOut(speed,[callback])412.5常用效果2.jQuery基礎(chǔ)應(yīng)用動(dòng)畫(huà)前面介紹的動(dòng)畫(huà)效果都是元素局部屬性發(fā)生變化，如高度、寬度、可見(jiàn)性等。在jQuery中，也允許用戶(hù)自定義動(dòng)畫(huà)效果，通過(guò)使用animate()方法，可以制作出更復(fù)雜、更好的動(dòng)畫(huà)效果。animate()方法給Web前端開(kāi)發(fā)者自定義各種復(fù)雜、高級(jí)的動(dòng)畫(huà)提供了極大的方便和空間，其語(yǔ)法格式如下所示：animate(params,[duration],[easing],[callback])422.5常用效果2.jQuery基礎(chǔ)應(yīng)用滑動(dòng)在jQuery中，還有一種滑動(dòng)的動(dòng)畫(huà)效果改變?cè)氐母叨?，要?shí)現(xiàn)元素的滑動(dòng)效果，需要調(diào)用jQuery中的兩個(gè)方法，一個(gè)是slideDown()，另一個(gè)是slideUp()，其語(yǔ)法結(jié)構(gòu)如下所示：slideDown(speed,[callback])432.5常用效果44現(xiàn)場(chǎng)演示：案例15-01：簡(jiǎn)單的動(dòng)畫(huà)45現(xiàn)場(chǎng)演示：案例15-02：移動(dòng)位置的動(dòng)畫(huà)46現(xiàn)場(chǎng)演示：案例15-03：隊(duì)列中的動(dòng)畫(huà)47現(xiàn)場(chǎng)演示：案例15-04：動(dòng)畫(huà)的停止和延時(shí)48現(xiàn)場(chǎng)演示：案例15-05：使用jQuery實(shí)現(xiàn)圖片輪轉(zhuǎn)3.jQuery中的DOM操作與DOM密不可分的是JavaScript腳本技術(shù)，DOM在Web前端的應(yīng)用也是基于JavaScript實(shí)現(xiàn)的，在前面的章節(jié)中我們已經(jīng)講到了在JavaScript中是如何進(jìn)行DOM操作的，單詞Document即文檔，當(dāng)我們創(chuàng)建一個(gè)頁(yè)面并加載到Web瀏覽器時(shí)，DOM模型則根據(jù)該頁(yè)面的內(nèi)容創(chuàng)建了一個(gè)文檔文件；Object即對(duì)象，是指具有獨(dú)立特性的一組數(shù)據(jù)集合，比如我們把新創(chuàng)建的頁(yè)面文檔稱(chēng)之為文檔對(duì)象，與對(duì)象相關(guān)聯(lián)的特征稱(chēng)之為對(duì)象屬性，訪(fǎng)問(wèn)對(duì)象的函數(shù)稱(chēng)之為對(duì)象方法；Model即模型，在頁(yè)面文檔中，通過(guò)樹(shù)狀模型展示頁(yè)面的元素和內(nèi)容，而其展示方式是通過(guò)節(jié)點(diǎn)（node）來(lái)實(shí)現(xiàn)的。493.1DOM操作基礎(chǔ)3.jQuery中的DOM操作結(jié)點(diǎn)操作查找結(jié)點(diǎn)使用jQuery在文檔樹(shù)上查找節(jié)點(diǎn)十分容易，我們可以通過(guò)前面介紹到的選擇器來(lái)完成指定節(jié)點(diǎn)的查找，比如我們想要得到元素節(jié)點(diǎn)并輸出其文本內(nèi)容，那么我們可以使用下面的代碼實(shí)現(xiàn)：varhtml_node=$("ulli:eq(1)");alert(html_node.text());創(chuàng)建結(jié)點(diǎn)函數(shù)$()用于動(dòng)態(tài)創(chuàng)建頁(yè)面元素，其語(yǔ)法結(jié)構(gòu)如下所示：$(html)503.2結(jié)點(diǎn)操作3.jQuery中的DOM操作插入結(jié)點(diǎn)在jQuery中，有很多的方法可以實(shí)現(xiàn)該功能，我們前面例子中用到的append()方法僅僅是其中的一種，按照插入元素的順序類(lèi)劃分，可以將插入節(jié)點(diǎn)分為內(nèi)部和外部?jī)煞N插入方法。513.2結(jié)點(diǎn)操作52533.jQuery中的DOM操作刪除結(jié)點(diǎn)在DOM操作頁(yè)面時(shí)，刪除多余或指定的頁(yè)面元素時(shí)非常必要的，jQuery提供了兩種可以刪除元素的方法，即remove()和empty()，嚴(yán)格的說(shuō)empty()方法并非真正意義上的刪除，使用該方法，僅僅可以清空全部的節(jié)點(diǎn)或節(jié)點(diǎn)所包含的所有后代元素，并非刪除節(jié)點(diǎn)與元素。remove()方法的語(yǔ)法結(jié)構(gòu)如下所示：remove([expr])empty()方法語(yǔ)法結(jié)構(gòu)如下所示：empty()543.2結(jié)點(diǎn)操作3.jQuery中的DOM操作復(fù)制節(jié)點(diǎn)在頁(yè)面中，有時(shí)候需要將某個(gè)元素節(jié)點(diǎn)復(fù)制到另外一個(gè)節(jié)點(diǎn)后，在jQuery中可以通過(guò)clone()方法來(lái)實(shí)現(xiàn)節(jié)點(diǎn)的復(fù)制，其語(yǔ)法結(jié)構(gòu)如下所示：clone();553.2結(jié)點(diǎn)操作3.jQuery中的DOM操作替換節(jié)點(diǎn)在頁(yè)面中，有時(shí)候需要將某個(gè)元素節(jié)點(diǎn)復(fù)制到另外一個(gè)節(jié)點(diǎn)后，在jQuery中可以通過(guò)clone()方法來(lái)實(shí)現(xiàn)節(jié)點(diǎn)的復(fù)制，其語(yǔ)法結(jié)構(gòu)如下所示：clone()在jQuery中，如果要替換元素中的節(jié)點(diǎn)，可以使用replaceWith()和replaceAll()這兩種方法，其語(yǔ)法結(jié)構(gòu)如下所示：replaceWith(content)replaceAll(selector)563.2結(jié)點(diǎn)操作3.jQuery中的DOM操作包裹結(jié)點(diǎn)在jQuery中，不僅可以通過(guò)方法替換元素節(jié)點(diǎn)，還可以根據(jù)需求包裹某個(gè)指定的節(jié)點(diǎn)，對(duì)節(jié)點(diǎn)的包裹也是DOM對(duì)象操作中很重要的一項(xiàng)，其與包裹節(jié)點(diǎn)相關(guān)的全部方法如下表15-12所示：573.2結(jié)點(diǎn)操作583.jQuery中的DOM操作遍歷結(jié)點(diǎn)在DOM元素操作中，有時(shí)需要對(duì)統(tǒng)一標(biāo)記的全部元素進(jìn)行統(tǒng)一操作。在JavaScript中，需要先獲取元素的總長(zhǎng)度，然后用for循環(huán)語(yǔ)句，循環(huán)處理。而在jQuery中可以直接使用each()方法輕松實(shí)現(xiàn)元素的遍歷，其語(yǔ)法結(jié)構(gòu)如下所示：each(callback)593.2結(jié)點(diǎn)操作3.jQuery中的DOM操作在jQuery中，可以對(duì)元素的屬性執(zhí)行獲取、設(shè)置、刪除操作，通過(guò)attr()方法可以對(duì)元素屬性執(zhí)行獲取與設(shè)置操作，通過(guò)removeAttr()則可以執(zhí)行刪除元素屬性操作。603.3屬性操作3.jQuery中的DOM操作獲取元素屬性我們可以通過(guò)attr()方法獲取元素的屬性，其語(yǔ)法結(jié)構(gòu)如下所示：attr(name)613.3屬性操作3.jQuery中的DOM操作設(shè)置元素的屬性在頁(yè)面中，attr()方法不僅可以用來(lái)獲取元素的屬性值，還可以設(shè)置元素的屬性，其設(shè)置元素屬性的語(yǔ)法格式如下所示：attr(key,value)attr({key0:value0,key1:value1})623.3屬性操作3.jQuery中的DOM操作刪除元素屬性jQuery中通過(guò)attr()方法設(shè)置元素的屬性后，使用removeAttr()方法可以將元素的屬性刪除，其語(yǔ)法結(jié)構(gòu)如下所示：removeAttr(name)633.3屬性操作3.jQuery中的DOM操作直接設(shè)置元素樣式在jQuery中可以通過(guò)css()方法直接為某個(gè)指定的元素設(shè)置樣式值，其語(yǔ)法結(jié)構(gòu)如下所示：css(name,value)643.4樣式操作3.jQuery中的DOM操作增加CSS類(lèi)別通過(guò)addClass()方法增加元素類(lèi)別的名稱(chēng)，其語(yǔ)法結(jié)構(gòu)如下所示：addClass(class)addClass(class0class1…)653.4樣式操作3.jQuery中的DOM操作類(lèi)別切換通過(guò)toggleClass()方法切換不同的元素類(lèi)別，其語(yǔ)法結(jié)構(gòu)如下所示：toggleClass(class)663.4樣式操作3.jQuery中的DOM操作刪除類(lèi)別與增加CSS類(lèi)別的addClass()方法相對(duì)應(yīng)，removeClass()方法則用于刪除類(lèi)別，其語(yǔ)法結(jié)構(gòu)如下所示：removeClass([class])673.4樣式操作3.jQuery中的DOM操作在jQuery中，操作元素內(nèi)容的方法包含html()和text()，前者與JavaScript中的innerHTML屬性相似，即獲取和設(shè)置元素的HTML內(nèi)容；而后者類(lèi)似于JavaScript中的innerText屬性，即獲取或設(shè)置元素的文本內(nèi)容。二者的格式和功能的區(qū)別如下表15-13所示：683.5內(nèi)容操作69現(xiàn)場(chǎng)演示：案例15-06：使用jQuery實(shí)現(xiàn)表格排序4.jQuery插件jQuery插件是以jQuery的核心代碼為基礎(chǔ)，編寫(xiě)出符合一定規(guī)范的應(yīng)用程序。目前有超過(guò)近百種的各類(lèi)插件被應(yīng)用到全球的各種項(xiàng)目中。插件的使用，充分展示了jQuery中又一核心功能：強(qiáng)大的擴(kuò)展性。704.1什么是jQuery插件4.jQuery插件使用方法插件一般使用時(shí)，僅需要包含該插件的JS文件即可，按照如下步驟即可實(shí)現(xiàn)插件的調(diào)用：在頁(yè)面中導(dǎo)入包含插件的JS文件，并確定它的引用在主jQuery庫(kù)之后，其代碼如下所示：<scripttype="text/javascript"src="jquery/jquery.js"></script><scripttype="text/javascript"src="jquery/jquery.pl.js"></script>在JS文件或頁(yè)面JS代碼中，使用插件定義的語(yǔ)法進(jìn)行書(shū)寫(xiě)，即可完成該插件的調(diào)用。714.1什么是jQuery插件4.jQuery插件常用插件驗(yàn)證插件validatevalidate是一個(gè)十分優(yōu)秀的表單驗(yàn)證插件之一，它廣泛的使用在全球各個(gè)的項(xiàng)目中，并得到廣大Web前端開(kāi)發(fā)者的認(rèn)可，該插件具有如下幾個(gè)功能：自帶驗(yàn)證規(guī)則：其中包含必填、數(shù)字、URL等眾多驗(yàn)證規(guī)則。驗(yàn)證信息提示：可以使用默認(rèn)的提示信息，也可以自定義提示信息，覆蓋默認(rèn)內(nèi)容。多種事件觸發(fā)：不僅在表單提交時(shí)觸發(fā)驗(yàn)證，而且在“keyup”或者“blur”事件中也能進(jìn)行觸發(fā)。允許自定義驗(yàn)證規(guī)則：除使用自帶的驗(yàn)證規(guī)則外，Web前端開(kāi)發(fā)者還可以很方便的自定義驗(yàn)證規(guī)則。724.1什么是jQuery插件4.jQuery插件表單插件form插件是專(zhuān)門(mén)為頁(yè)面的表單而設(shè)計(jì)的，引入該插件后，通過(guò)調(diào)用ajaxForm()或ajaxSubmit()兩個(gè)方法，可以很容易的實(shí)現(xiàn)Ajax方式提交數(shù)據(jù)，并通過(guò)方法中的options對(duì)象，設(shè)置參數(shù)、獲取服務(wù)器返回的數(shù)據(jù)，同時(shí)，該插件還包含如下一些重要方法：formSerialize()：用于格式化表單中有用的數(shù)據(jù)，并將其自動(dòng)調(diào)整成適合Ajax異步請(qǐng)求的URL地址格式。clearForm()：清除表單中所有輸入值得內(nèi)容。restForm()：重置表單中所有的字段內(nèi)容，即將所有表單中的字段內(nèi)容都恢復(fù)到頁(yè)面加載時(shí)的默認(rèn)值。734.1什么是jQuery插件4.jQuery插件Cookie插件cookie在jQuery中，引用cookie插件后，可以很方便的定義某個(gè)cookie對(duì)象，并設(shè)置cookie值。通過(guò)設(shè)置好的cookie，可以很便利的保存用戶(hù)的頁(yè)面瀏覽記錄，在用戶(hù)選擇保存的情況下，還可以保存用戶(hù)的登錄信息。744.1什么是jQuery插件4.jQuery插件搜索插件AutoCompleteAutoComplete為自動(dòng)填充、展示之意。在jQuery中，引入該插件后，用戶(hù)在使用文本框搜索信息時(shí)，使用插件中的autocomplete方法綁定文本框。當(dāng)在文本框中輸入某個(gè)字符時(shí)，通過(guò)該方法中的指定的數(shù)據(jù)URL，返回相匹配的數(shù)據(jù)，自動(dòng)顯示在文本框下，提醒用戶(hù)進(jìn)行選擇。754.1什么是jQuery插件4.jQuery插件圖片燈箱插件notesforlightboxNoteforlightbox是一個(gè)基于jQuery基礎(chǔ)開(kāi)發(fā)的圖片放大瀏覽插件，它支持絕大部分瀏覽器，廣泛應(yīng)用在圖片查看的項(xiàng)目中，該插件具有以下幾個(gè)強(qiáng)大的功能：以圓角的方式展示選中的圖片。以按鈕式查看“上一張”或“下一張”圖片。加載圖片時(shí)帶有進(jìn)度條，顯示加載速度。可以采用自動(dòng)播放的方式瀏覽圖片。多個(gè)樣式屬性可以隨意設(shè)置。764.1什么是jQuery插件4.jQuery插件右鍵菜單插件contextmenucontextmenu是一款輕量型、功能完善的插件，利用該插件可以在頁(yè)面的任何位置，設(shè)置一個(gè)觸發(fā)右鍵事件的元素，當(dāng)選中該元素，單擊鼠標(biāo)右鍵時(shí)，通過(guò)插件中的contextMenu方法，彈出一個(gè)設(shè)計(jì)精美的快捷菜單。該插件具有以下幾個(gè)顯著的特點(diǎn)：可以在同一個(gè)頁(yè)面中設(shè)置多個(gè)不同樣式的菜單。一個(gè)菜單可以綁定頁(yè)面中的多個(gè)元素。可隨意設(shè)置菜單樣式。輕松訪(fǎng)問(wèn)與綁定菜單中的各選項(xiàng)。774.1什么是jQuery插件4.jQuery插件圖片放大鏡插件jqzoomjqzoom是一款基于jQuery庫(kù)的圖片放大插件，在頁(yè)面中實(shí)現(xiàn)放大的方法是：先準(zhǔn)備2張一大一小的相同圖片，在頁(yè)面打開(kāi)時(shí)，展示小圖片，當(dāng)鼠標(biāo)在小圖片的任意位置移動(dòng)時(shí)，調(diào)用插件中的jqzoom()方法，綁定另外一張相同的大圖片，在指定位置顯示與小圖片所選區(qū)域相同的大圖片區(qū)域，從而實(shí)現(xiàn)逼真的放大效果。該插件十分適合在展示類(lèi)的頁(yè)面中使用。784.1什么是jQuery插件4.jQuery插件jQueryUI是一個(gè)以jQuery為基礎(chǔ)的用戶(hù)體驗(yàn)?zāi)卮a庫(kù)，它的本質(zhì)源于一個(gè)名為interface的jQuery插件，后來(lái)對(duì)該插件內(nèi)部的API進(jìn)行重構(gòu)，并升級(jí)了版本，重新取名為jQueryUI，由于jQuery庫(kù)注重于后臺(tái)，沒(méi)有很好的前臺(tái)界面，而jQueryUI很好的彌補(bǔ)了其不足之處，兩者互相交織。794.2jQueryUI4.jQuery插件主要特性jQueryUI側(cè)重于用戶(hù)界面的體驗(yàn)，根據(jù)其體驗(yàn)角度的不同，主要分為以下三個(gè)部分：交互：在該部分中，展示一些與鼠標(biāo)操作相關(guān)的插件內(nèi)容，如拖動(dòng)、放置、縮放、復(fù)選、排序等。微件：該部分包含一些可視化的細(xì)小控件，通過(guò)這些小控件，可以極大地優(yōu)化用戶(hù)在頁(yè)面中的體驗(yàn)度，如折疊面板、日歷、對(duì)話(huà)框、進(jìn)度條、滑動(dòng)模塊等。效果或動(dòng)畫(huà)：該部分包含一些動(dòng)畫(huà)效果插件，使我們的動(dòng)畫(huà)不再拘泥于animate()方法，可以通過(guò)該部分的插件，實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫(huà)效果，在該部分中，改進(jìn)后的動(dòng)畫(huà)方法有show()、hide()、toggle()等。804.2jQueryUI4.jQuery插件拖動(dòng)插件draggable（拖動(dòng)）插件能使請(qǐng)求的對(duì)象拖動(dòng)，通過(guò)這個(gè)插件，可以使用DOM元素跟隨鼠標(biāo)進(jìn)行移動(dòng)，通過(guò)設(shè)置方法中的option選項(xiàng)，實(shí)現(xiàn)各種各樣的拖動(dòng)需求，其使用語(yǔ)法結(jié)構(gòu)如下所示：draggle(options)其中選項(xiàng)options接受各種各樣的參數(shù)值，用于控制拖動(dòng)時(shí)的頁(yè)面效果，其常用的參數(shù)值如下表15-14所示：814.2jQueryUI824.jQuery插件排序插件在jQueryUI中，除了拖動(dòng)、放置指定元素外，還可以通過(guò)sortable（排序）插件將有序列的標(biāo)記，按照用戶(hù)自己的想法任意拖動(dòng)其位置，形成一個(gè)新的序列，從而實(shí)現(xiàn)拖動(dòng)排序的功能，其使用語(yǔ)法格式如下所示：sortable(options)834.2jQueryUI4.jQuery插件折疊面板插件jQueryUI插件折疊面板可以實(shí)現(xiàn)頁(yè)面中指定區(qū)域的折疊效果，也就是通過(guò)單擊某塊面板中的標(biāo)題欄，就會(huì)展開(kāi)相應(yīng)的內(nèi)容，當(dāng)單擊其它面板標(biāo)題欄時(shí)，展開(kāi)的內(nèi)容會(huì)自動(dòng)關(guān)閉，其語(yǔ)法格式如下所示：accordion(options)844.2jQueryUI4.jQuery插件折疊面板插件jQueryUI插件折疊面板可以實(shí)現(xiàn)頁(yè)面中指定區(qū)域的折疊效果，也就是通過(guò)單擊某塊面板中的標(biāo)題欄，就會(huì)展開(kāi)相應(yīng)的內(nèi)容，當(dāng)單擊其它面板標(biāo)題欄時(shí)，展開(kāi)的內(nèi)容會(huì)自動(dòng)關(guān)閉，其語(yǔ)法格式如下所示：accordion(options)854.2jQueryUI4.jQuery插件日歷在jQueryUI中可以使用datepicker（日歷）插件來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)中的選擇日期效果，其語(yǔ)法格式如下所示：$(".selector").datepicker(options)864.2jQueryUI874.jQuery插件選項(xiàng)卡插件選項(xiàng)卡（tabs）在網(wǎng)頁(yè)中十分常見(jiàn)，在jQueryUI中，通過(guò)在頁(yè)面中導(dǎo)入tabs插件，并調(diào)用插件中的tabs()方法直接針對(duì)列表生成對(duì)應(yīng)菜單，輕松的實(shí)現(xiàn)選項(xiàng)卡功能，其語(yǔ)法結(jié)構(gòu)如下所示：tabs(options)884.2jQueryUI4.jQuery插件對(duì)話(huà)框插件在jQueryUI中，通過(guò)dialog（對(duì)話(huà)）插件，不僅完成可以實(shí)現(xiàn)傳統(tǒng)JavaScript語(yǔ)言中alert()和confirm()函數(shù)的功能，而且界面更加精致，功能豐富，操作簡(jiǎn)便，其語(yǔ)法結(jié)構(gòu)如下所示：$(".selector").dialog(options)894.2jQueryUI904.jQuery插件對(duì)于Web開(kāi)發(fā)者來(lái)說(shuō)，jQuery是非常流行的JavaScript類(lèi)庫(kù)，而且一直以來(lái)它都是為Web瀏覽器設(shè)計(jì)的，并沒(méi)有特別為移動(dòng)應(yīng)用程序設(shè)計(jì)。jQueryMobile則是用來(lái)填補(bǔ)jQuery在移動(dòng)設(shè)備應(yīng)用上的缺憾的一個(gè)新項(xiàng)目。它基于jQuery框架并使用HTML5、CSS3這些新技術(shù)，除了能提供很多基礎(chǔ)的移動(dòng)頁(yè)面元素開(kāi)發(fā)功能外，框架自身還提供很多可擴(kuò)展的API，以便于Web前端開(kāi)發(fā)者在移動(dòng)應(yīng)用上使用，使用該框架可以節(jié)省大量的JavaScript代碼開(kāi)發(fā)時(shí)間以及代碼量。914.3jQueryMobile4.jQuery插件主要特性基于jQuery構(gòu)建它采用與jQuery一致的核心和語(yǔ)法，減小了學(xué)習(xí)曲線(xiàn)。兼容絕大部分手機(jī)平臺(tái)jQueryMobile以“WriteLess,DoMore”作為目標(biāo)，為所有的主流移動(dòng)操作系統(tǒng)平臺(tái)提供了高度統(tǒng)一的UI框架，而不必為每個(gè)移動(dòng)設(shè)備編寫(xiě)?yīng)毺氐膽?yīng)用程序。它兼容iOS、Android、Blackberry、PalmWebOS、Nokia/Symbian、WindowsMobile、bada和MeeGo等，只要是能解釋標(biāo)準(zhǔn)HTML的設(shè)備就能提供最基木的支持。924.3jQueryMobile4.jQuery插件輕量級(jí)的庫(kù)基于速度考慮整個(gè)庫(kù)非常輕量級(jí)，同時(shí)對(duì)圖片的依賴(lài)也降到最小。模決化結(jié)構(gòu)創(chuàng)建定制版本只包括應(yīng)用所需的功能，而不需要修改應(yīng)用的結(jié)構(gòu)。HTML5標(biāo)記驅(qū)動(dòng)的配置快速開(kāi)發(fā)頁(yè)面，把對(duì)Web前端開(kāi)發(fā)者的腳本能力需求降到最小化。漸進(jìn)增強(qiáng)原則jQueryMobile完全采用漸進(jìn)增強(qiáng)原則：通過(guò)一個(gè)全功能的標(biāo)準(zhǔn)HTML網(wǎng)頁(yè)和額外的JavaScript功能層，提供頂級(jí)的在線(xiàn)體驗(yàn)。這意味著即使移動(dòng)瀏覽器不支持JavaScript，基于jQueryMobile的移動(dòng)應(yīng)用程序仍能正常的使用，而較新的移動(dòng)平臺(tái)能獲取更優(yōu)秀的用戶(hù)體驗(yàn)。934.3jQueryMobile4.jQuery插件響應(yīng)設(shè)計(jì)通過(guò)靈敏的技術(shù)設(shè)計(jì)和工具，使得相同的基礎(chǔ)代碼庫(kù)可以在不同屏幕大小中自動(dòng)縮放。強(qiáng)大的Ajax導(dǎo)航系統(tǒng)它使得頁(yè)面之間跳轉(zhuǎn)變得更加流暢，同時(shí)保持按鈕，書(shū)簽和地址欄的簡(jiǎn)潔。易用性一些輔助功能，比如WAI-ARIA，以確保頁(yè)面可以在一些屏幕閱讀器或者其他手持設(shè)備中正常工作。944.3jQueryMobile4.jQuery插件支持觸摸和鼠標(biāo)操作讓觸摸、鼠標(biāo)、光標(biāo)用戶(hù)都能通過(guò)簡(jiǎn)單的API來(lái)流暢使用。統(tǒng)一的UI組件在觸摸體驗(yàn)和主體化方面，jQueryMobile加強(qiáng)和統(tǒng)一了本地控制。強(qiáng)大的主體化框架主題編輯器能很容易的進(jìn)行高度個(gè)性化和品牌化的界面定制。954.3jQueryMobile4.jQuery插件目前jQueryMobile的最新版本可在其官網(wǎng)（下載地址為/download）的頁(yè)面中進(jìn)行下載。我們需要用到j(luò)QueryMobile中的CSS樣式文件以及jQueryMobile的JS文件并將jQueryMobile的JS文件引用在jQuery庫(kù)的后面，其引用代碼如下所示：<linkrel="stylesheet"href="style/jquery.mobile.css"><scripttype="text/javascript"src="jquery/jquery.js"> </script><scripttype="text/javascript"src="jquery/jquery.mobile.js"></script>964.3jQueryMobile4.jQuery插件jQueryMobile頁(yè)面模板對(duì)于jQueryMobile來(lái)說(shuō)，這個(gè)一個(gè)推薦的視圖配置。device-width值表示，我們希望讓內(nèi)容擴(kuò)展到屏幕的整個(gè)寬度。initial-scale設(shè)置了用來(lái)查看Web頁(yè)面的初識(shí)縮放百分比或縮放因數(shù)。值為1，則顯示一個(gè)未縮放的文檔。data-role=“page”為一個(gè)jQueryMobile頁(yè)面定義了頁(yè)面容器，只有在構(gòu)建多頁(yè)面設(shè)置時(shí)，才會(huì)用到該元素。data-role=“header”是頁(yè)眉（header）或標(biāo)題欄，該屬性是可選的。data-role=”content”是內(nèi)容主體的包裝容器（wrappingcontainer），該屬性也是可選的。data-role=”footer”包含頁(yè)腳欄，該屬性同樣是可選的。974.3jQueryMobile4.jQuery插件多頁(yè)面模板jQueryMobile支持在一個(gè)HTML文檔中嵌入多個(gè)頁(yè)面，該策略可以用來(lái)預(yù)先獲取最前面的多個(gè)頁(yè)面，當(dāng)載入子頁(yè)面時(shí)，其響應(yīng)時(shí)間會(huì)縮短。984.3jQueryMobile4.jQuery插件單頁(yè)面文檔與多頁(yè)面