jQuery網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）課件 第7、8單元 AJAX 在jQuery 中的應(yīng)用；使用jQuery UI 插件

第7單元AJAX在jQuery中的應(yīng)用jQuery網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）工業(yè)和信息化精品系列教材人民郵電出版社了解AJAX技術(shù)以及它的優(yōu)點(diǎn)、缺點(diǎn)。了解并安裝Web運(yùn)行環(huán)境。了解通過JavaScript應(yīng)用AJAX技術(shù)。掌握jQuery中的AJAX應(yīng)用。掌握AJAX的全局事件的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠熟練使用jQuery中的AJAX應(yīng)用。能夠熟練使用jQuery中的AJAX全局事件。加深對異步技術(shù)的理解與應(yīng)用，提升數(shù)據(jù)交互設(shè)計(jì)的邏輯性與敏銳度，增強(qiáng)技術(shù)與實(shí)際需求結(jié)合的能力。目錄導(dǎo)航7.1AJAX技術(shù)簡介7.3通過JavaScript應(yīng)用AJAX7.5AJAX的全局事件7.2安裝Web運(yùn)行環(huán)境——AppServ7.4jQuery中的AJAX應(yīng)用7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新7.1.1AJAX概述AJAX是AsynchronousJavaScriptandXML的縮寫，它的意思是異步的JavaScript和XML。AJAX并不是一門新的語言或技術(shù)，它是JavaScript、XML、CSS、DOM等多種已有語言或技術(shù)的組合，可以實(shí)現(xiàn)客戶端的異步請求操作，從而實(shí)現(xiàn)在不需要刷新頁面的情況下與服務(wù)器進(jìn)行通信，減少了用戶的等待時間，減輕了服務(wù)器和帶寬的負(fù)擔(dān)，提供了更好的服務(wù)響應(yīng)。Web應(yīng)用的傳統(tǒng)模型Web應(yīng)用的AJAX模型7.1.2AJAX技術(shù)的優(yōu)點(diǎn)AJAX可以把一部分以前由服務(wù)器承擔(dān)的工作轉(zhuǎn)移到客戶端，利用客戶端閑置的資源進(jìn)行處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和成本。AJAX實(shí)現(xiàn)無刷新更新頁面，從而使用戶不用再像以前一樣在服務(wù)器處理數(shù)據(jù)時，只能在白屏前焦急地等待。AJAX使用XMLHttpRequest對象發(fā)送請求并得到服務(wù)器響應(yīng)，在不需要重新載入整個頁面的情況下，就可以通過DOM及時將更新的內(nèi)容顯示在頁面中。AJAX可以調(diào)用XML等外部數(shù)據(jù)。AJAX基于標(biāo)準(zhǔn)化并被廣泛支持的技術(shù)，不需要下載插件或者小程序，即可輕松實(shí)現(xiàn)桌面應(yīng)用程序的效果。AJAX沒有平臺限制。AJAX把服務(wù)器的工作由原本的傳輸內(nèi)容轉(zhuǎn)變?yōu)閭鬏敂?shù)據(jù)，而數(shù)據(jù)格式可以是純文本格式和XML格式，這兩種數(shù)據(jù)格式?jīng)]有平臺限制。7.1.3AJAX技術(shù)的缺點(diǎn)瀏覽器對XMLHttpRequest對象的支持不足破壞瀏覽器“前進(jìn)”“后退”按鈕的正常行為IE從5.0版本開始才支持XMLHttpRequest對象，Mozilla、Netscape等瀏覽器支持XMLHttpRequest對象的時間晚于IE。為使AJAX在各個瀏覽器中都能夠正常運(yùn)行，開發(fā)人員必須花費(fèi)大量精力編碼，從而實(shí)現(xiàn)各個瀏覽器兼容XMLHttpRequest對象，這樣就使AJAX開發(fā)難度高于普通Web開發(fā)難度。在傳統(tǒng)頁面中，用戶會習(xí)慣性地使用瀏覽器自帶的“前進(jìn)”“后退”按鈕，但使用AJAX破壞了瀏覽器“前進(jìn)”“后退”按鈕的正常行為。在更新動態(tài)頁面的情況下，用戶無法回到前一個頁面的狀態(tài)，因?yàn)闉g覽器僅能記錄歷史記錄中的靜態(tài)頁面。用戶通常希望單擊“后退”按鈕取消前一次操作，在AJAX中用戶可能無法這樣做。目錄導(dǎo)航7.1AJAX技術(shù)簡介7.3通過JavaScript應(yīng)用AJAX7.5AJAX的全局事件7.2安裝Web運(yùn)行環(huán)境——AppServ7.4jQuery中的AJAX應(yīng)用7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新7.2安裝Web運(yùn)行環(huán)境——AppServ①同意AppServ安裝協(xié)議②選擇安裝路徑③設(shè)置安裝選項(xiàng)④設(shè)置Apache端口號⑤MySQL設(shè)置⑥完成安裝⑦AppServ目錄結(jié)構(gòu)⑧AppServ測試頁面目錄導(dǎo)航7.1AJAX技術(shù)簡介7.3通過JavaScript應(yīng)用AJAX7.5AJAX的全局事件7.2安裝Web運(yùn)行環(huán)境——AppServ7.4jQuery中的AJAX應(yīng)用7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新7.3通過JavaScript應(yīng)用AJAX【例7-1】通過傳統(tǒng)的JavaScript應(yīng)用AJAX從服務(wù)器端獲取文本。（1）聲明一個空對象來保存XMLHttpRequest對象，代碼如下：varxmlhttp=null;（2）創(chuàng)建XMLHttpRequest對象，代碼如下：functioncreateXMLHttpRequest(){ if(window.ActiveXObject){//瀏覽器為IE xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }elseif(window.XMLHttpRequest){//瀏覽器非IE xmlhttp=newXMLHttpRequest(); }}編寫startRequest()方法，使用open()方法初始化XMLHttpRequest對象，指定要使用的服務(wù)器URL。代碼如下：varurl="index.php";//要使用的服務(wù)器URL7.3通過JavaScript應(yīng)用AJAX【例7-1】通過傳統(tǒng)的JavaScript應(yīng)用AJAX從服務(wù)器端獲取文本。（4）XMLHttpRequest對象提供了用于指定狀態(tài)改變時所觸發(fā)的事件處理器的屬性onreadystatechange。在AJAX中，每個狀態(tài)改變時都會觸發(fā)指定的事件處理器，通常會調(diào)用一個JavaScript函數(shù)。當(dāng)請求狀態(tài)改變時，XMLHttpRequest對象觸發(fā)onreadystatechange屬性指定的事件處理器。因此在處理該事件之前，事件處理器應(yīng)該首先檢查readyState屬性值和HTTP狀態(tài)值。當(dāng)請求完成（readyState屬性值為4）并且事件已經(jīng)成功（HTTP狀態(tài)值為200）時，就可以調(diào)用一個JavaScript函數(shù)來處理該事件內(nèi)容。代碼如下：xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ alert(xmlhttp.responseText); }}（5）調(diào)用send()方法提交請求。因?yàn)檎埱笫褂玫氖荋TTP的get方式，所以可以在不指定參數(shù)或使用null參數(shù)的情況下調(diào)用send()方法。代碼如下：xmlhttp.send(null);7.3通過JavaScript應(yīng)用AJAX【例7-1】通過傳統(tǒng)的JavaScript應(yīng)用AJAX從服務(wù)器端獲取文本。（6）將源代碼文件存放到AppServ/www目錄下，然后根據(jù)目錄地址對其進(jìn)行訪問，如圖所示。（7）單擊“獲取服務(wù)器端文本”按鈕，可以看到網(wǎng)頁彈出的提示對話框中顯示“我的第一個AJAX實(shí)例！”，運(yùn)行效果如圖

所示。目錄導(dǎo)航7.1AJAX技術(shù)簡介7.3通過JavaScript應(yīng)用AJAX7.5AJAX的全局事件7.2安裝Web運(yùn)行環(huán)境——AppServ7.4jQuery中的AJAX應(yīng)用7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新7.4.1使用load()方法獲取異步數(shù)據(jù)01OPTION載入HTML頁面（1）創(chuàng)建要載入的頁面mofun.html，代碼如下：<div><p>莫凡魔方科技</p><p>莫凡圖書</p><p>jQuery開發(fā)基礎(chǔ)教程</p></div>（2）創(chuàng)建index.html頁面，在頁面中添加按鈕以及id屬性值為loadhtml的<div>元素，代碼如下：<inputtype="button"id="btn"value="載入頁面"/><divid="loadhtml"></div>【例7-2】使用load()方法載入頁面。7.4.1使用load()方法獲取異步數(shù)據(jù)01OPTION載入HTML頁面（3）引入jQuery庫并且在其下方編寫jQuery代碼，使用load()方法載入之前創(chuàng)建的mofun.html頁面，代碼如下：<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript">$(document).ready(function(){ $("#btn").on("click",function(){ $("#loadhtml").load("mofun.html"); })})</script>【例7-2】使用load()方法載入頁面。運(yùn)行結(jié)果7.4.1使用load()方法獲取異步數(shù)據(jù)【例7-3】載入頁面中class屬性值為mofun365的元素。（1）創(chuàng)建要載入的頁面mofun.html，代碼如下：<div><pclass="mofun365">莫凡魔方科技</p><pclass="mofun365">莫凡圖書</p><pclass="mofun">jQuery開發(fā)基礎(chǔ)教程</p></div>（2）第（2）步同例7-2第（2）步。（3）在引入jQuery庫的下方編寫jQuery代碼，使用load()方法載入mofun.html頁面中class屬性值為mofun365的元素，代碼如下：02OPTION載入HTML頁面中的指定元素7.4.1使用load()方法獲取異步數(shù)據(jù)【例7-3】載入頁面中class屬性值為mofun365的元素。<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript">$(document).ready(function(){ $("#btn").on("click",function(){ $("#loadhtml").load("mofun.html.mofun365"); })})</script>02OPTION載入HTML頁面中的指定元素運(yùn)行結(jié)果7.4.1使用load()方法獲取異步數(shù)據(jù)03OPTION傳遞方式和傳遞參數(shù)load()方法的傳遞方式是根據(jù)傳遞參數(shù)data來指定的。如果沒有傳遞參數(shù)data，默認(rèn)采用get方式傳遞，否則將自動轉(zhuǎn)換為post方式。例如下面的代碼，無傳遞參數(shù)data，因此傳遞方式是get方式。$("#loadhtml").load("mofun.php",function(responseText,status,XMLHttpRequest){ //省略部分代碼});而下面的代碼有傳遞參數(shù)data，因此傳遞方式是post方式。$("#loadhtml").load("mofun.php",{name:"xiaogang",age:"30"},function(responseText,status,XMLHttpRequest){ //省略部分代碼});7.4.2使用$.get()方法請求數(shù)據(jù)$.get()方法使用get方式異步請求數(shù)據(jù)，它的語法格式為：$.get(url[,data][,callback][,type])url：請求的HTML頁面的URL地址。data：可選參數(shù)，指定發(fā)送到服務(wù)器的數(shù)據(jù)。callback：可選參數(shù)，規(guī)定當(dāng)請求成功時調(diào)用的回調(diào)函數(shù)。type：可選參數(shù)，預(yù)計(jì)的服務(wù)器響應(yīng)的數(shù)據(jù)類型。7.4.2使用$.get()方法請求數(shù)據(jù)【例7-4】使用$.get()方法請求數(shù)據(jù)。（1）創(chuàng)建index.html頁面，構(gòu)建表單。主要代碼如下：<formname="form"action="">

用戶名：<inputtype="text"id="username"/><br/><br/>

內(nèi)容：<textareaid="content"></textarea><br/><br/> <inputtype="button"id="button"value="提交"/><br/><br/> <divid="responseText"></div></form>（2）給按鈕添加click事件，確定請求頁面的URL，獲取用戶名與內(nèi)容字段并將其作為參數(shù)傳遞到index.php頁面，代碼如下：$("#button").on("click",function(){$.get("index.php",{username:$("#username").val(),content:$("#content").val()},回調(diào)函數(shù)，"json");})7.4.2使用$.get()方法請求數(shù)據(jù)【例7-4】使用$.get()方法請求數(shù)據(jù)。（3）如果服務(wù)器端成功返回?cái)?shù)據(jù)，那么可以通過回調(diào)函數(shù)將返回的數(shù)據(jù)顯示在頁面中。其中回調(diào)函數(shù)有兩個參數(shù)。代碼格式如下：function(data,status){ //data：服務(wù)器端返回的數(shù)據(jù)，可以是XML、JSON、HTML文檔等 //status：請求狀態(tài)});（4）創(chuàng)建index.php文件，獲取頁面?zhèn)鬟f的數(shù)據(jù)，保存到$dataArray數(shù)組中，之后使用json_encode()方法將數(shù)組轉(zhuǎn)換為JSON對象并返回。具體代碼如下：7.4.2使用$.get()方法請求數(shù)據(jù)【例7-4】使用$.get()方法請求數(shù)據(jù)。（5）由于服務(wù)端返回的是JSON對象，因此需要對返回的數(shù)據(jù)進(jìn)行處理。在以上代碼中，將$.get()方法的第4個參數(shù)（type）設(shè)置為json，表示服務(wù)器返回的數(shù)據(jù)格式為JSON格式，之后編寫回調(diào)函數(shù)，將頁面中id屬性值為responseText的<div>元素內(nèi)容設(shè)置為用戶提交的用戶名與留言內(nèi)容。具體代碼如下：function(data,textStatus){//顯示用戶提交的用戶名與留言內(nèi)容 $("#responseText").html("用戶名："+data.username+"<br/>留言內(nèi)容："+data.content);}運(yùn)行結(jié)果7.4.3使用$.post()方法請求數(shù)據(jù)$.post()方法的使用方式（post方式）與$.get()方法的使用方式（get方式）是相同的，不過它們之間仍有以下區(qū)別。get方式使用get方式可以傳送簡單數(shù)據(jù)，一般數(shù)據(jù)大小限制在2KB以下，數(shù)據(jù)追加到URL中發(fā)送。也就是說，使用get方式時瀏覽器會將數(shù)據(jù)作為參數(shù)追加到URL后面進(jìn)行傳遞。最重要的是，數(shù)據(jù)會被客戶端瀏覽器緩存，這樣別人就可以從瀏覽器的歷史記錄中讀取用戶數(shù)據(jù)，例如賬號、密碼等。post方式使用post方式時，瀏覽器將表單字段元素以及數(shù)據(jù)作為HTTP消息實(shí)體內(nèi)容發(fā)送給Web服務(wù)器，而不是作為URL參數(shù)進(jìn)行傳遞，可以避免數(shù)據(jù)被瀏覽器緩存，比get方式更加安全。而且使用post方式傳遞的數(shù)據(jù)量要比使用get方式傳送的數(shù)據(jù)量大得多。7.4.3使用$.post()方法請求數(shù)據(jù)【例7-5】使用$.post()方法請求數(shù)據(jù)。本實(shí)例的表單內(nèi)容與例7-4的相同，不同的是提交AJAX請求使用的是$.post()方法，即：在index.php文件中，獲取頁面?zhèn)鬟f的數(shù)據(jù)時使用$_POST方法，具體代碼如下：7.4.4使用$.getScript()方法加載JavaScript文件在頁面中獲取JavaScript文件內(nèi)容的方法有很多，例如：<scripttype="text/javascript"src="js/jquery.js"></script>但這些方法都不是最理想的。在jQuery中通過全局函數(shù)getScript()加載JavaScript文件時，不僅可以像加載HTML片段一樣簡單、方便，而且JavaScript文件會自動執(zhí)行，大大提高了頁面的執(zhí)行效率。具體代碼如下：$("#btn").on("click",function(){ $.getScript("js/jquery.js");})或者$("<scripttype='text/javascript'src='js/jquery.js'>").appendTo("head");7.4.4使用$.getScript()方法加載JavaScript文件【例7-6】使用$.getScript()方法加載JavaScript文件。（1）創(chuàng)建index.html頁面，在頁面中加入一個按鈕和兩個<div>元素。主要代碼如下：<inputtype="button"id="btn"value="改變背景色"/><divclass="mofun">莫凡魔方科技</div><divclass="mofun">莫凡圖書</div>（2）創(chuàng)建test.js文件，內(nèi)容如下：alert("test.js加載成功！");（3）在index.html面中加載test.js文件，加載完畢后執(zhí)行回調(diào)函數(shù)，給按鈕添加click事件，使單擊按鈕時，改變class屬性值為mofun的<div>元素的背景色。具體代碼如下：運(yùn)行結(jié)果7.4.5使用$.getJSON()方法加載JSON文件JSON可以將JavaScript對象中表示的一組數(shù)據(jù)轉(zhuǎn)換為字符串，然后就可以在函數(shù)之間輕松地傳遞這個字符串。JSON格式的文件很方便計(jì)算機(jī)的讀取，因此受到開發(fā)人員的青睞。在jQuery中$.getJSON()方法用于加載JSON文件，它的用法與$.getScript()方法的用法相同。例如，要加載test.json文件，具體代碼如下：$("#btn").click(function(){ $.getJSON("test.json",回調(diào)函數(shù));})【例7-7】使用$.getJSON()方法加載JSON文件。（1）創(chuàng)建index.html頁面，在頁面中加入一個id屬性值為json的<div>空元素，代碼如下：<divid="json"></div>7.4.5使用$.getJSON()方法加載JSON文件【例7-7】使用$.getJSON()方法加載JSON文件。（2）創(chuàng)建test.json文件，內(nèi)容為：（3）在index.html頁面中加載test.json文件，加載完畢后執(zhí)行回調(diào)函數(shù)，首先定義一個空的字符串htmlStr，然后使用$.each()方法遍歷返回的數(shù)據(jù)（即第1個參數(shù)data），并以一個回調(diào)函數(shù)作為第2個參數(shù)，將結(jié)果保存在htmlStr字符串中。具體代碼如下：運(yùn)行結(jié)果7.4.6使用$.ajax()方法請求數(shù)據(jù)參數(shù)options為$.ajax()方法中的請求設(shè)置，語法格式為key/value，既包含發(fā)送請求的參數(shù)，又包含服務(wù)器響應(yīng)后回調(diào)的數(shù)據(jù)。$.ajax()方法中常用的參數(shù)如表所示。$.ajax(options);參數(shù)名稱類型說明urlString發(fā)送請求的地址（默認(rèn)為當(dāng)前頁面的地址）typeString數(shù)據(jù)請求方式（post方式或get方式），默認(rèn)為get方式dataString或Object發(fā)送到服務(wù)器的數(shù)據(jù)。如果數(shù)據(jù)不是字符串格式，則自動轉(zhuǎn)換成字符串格式；如果請求方式是get方式，則該字符串將附在URL后dataTypeString服務(wù)器返回的數(shù)據(jù)類型。如果沒有指定數(shù)據(jù)類型，jQuery將自動根據(jù)HTTP包MIME信息自動判斷，服務(wù)器返回的數(shù)據(jù)根據(jù)自動判斷結(jié)果進(jìn)行解析，傳遞給回調(diào)函數(shù)?？捎玫臄?shù)據(jù)類型如下：html：返回純文本HTML信息，包含的<Script>標(biāo)記會在插入頁面時被執(zhí)行。script：返回純文本JavaScript代碼。text：返回純文本字符串。xml：返回可被jQuery處理的XML文檔。json：返回JSON格式的數(shù)據(jù)7.4.6使用$.ajax()方法請求數(shù)據(jù)參數(shù)名稱類型說明

beforeSendFunction該函數(shù)用于在發(fā)送請求前修改XMLHttpRequest對象。該函數(shù)的參數(shù)就是XMLHttpRequest對象。由于該函數(shù)本身是jQuery事件，因此如果函數(shù)返回false，則表示取消本次事件。function(XMLHttpRequest){this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}completeFunction請求完成后調(diào)用的回調(diào)函數(shù)。該函數(shù)無論數(shù)據(jù)發(fā)送成功或失敗都會被調(diào)用。該函數(shù)有兩個參數(shù)，一個是XMLHttpRequest對象，另一個是用來描述成功請求類型的字符串textStatus。function(XMLHttpRequest,textStatus){this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}successFunction請求成功后調(diào)用的回調(diào)函數(shù)。該函數(shù)有兩個參數(shù)，一個是根據(jù)dataType參數(shù)處理后服務(wù)器返回的數(shù)據(jù)，另一個是用來描述狀態(tài)的字符串textStatus。function(data,textStatus){//data可能是xmlDoc、jsonObj、html、text等this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}errorFunction請求失敗后調(diào)用的回調(diào)函數(shù)。該函數(shù)有3個參數(shù)，第1個參數(shù)是XMLHttpRequest對象，第2個參數(shù)是出錯信息strError，第3個參數(shù)是捕捉到的錯誤對象strObject。function(XMLHttpRequest,strError,strObject){//通常情況下strError參數(shù)和strObject參數(shù)只有一個包含信息this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}globalBoolean是否響應(yīng)全局事件，默認(rèn)參數(shù)值為true表示響應(yīng)，如果將參數(shù)值設(shè)置成false表示不響應(yīng)，全局事件ajaxStart等將不響應(yīng)timeoutNumber請求超時的時間（ms），該參數(shù)的設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置7.4.6使用$.ajax()方法請求數(shù)據(jù)【例7-8】使用$.ajax()方法請求數(shù)據(jù)。本實(shí)例的表單內(nèi)容與例7-4的相同，不同的是提交AJAX請求使用的是$.ajax()方法，即：$.ajax({type:"GET",url:"index.php", data:{username:$("#username").val(),content:$("#content").val()}, dataType:"json", success:function(data,textStatus){ //顯示用戶提交的用戶名與留言內(nèi)容 $("#responseText").html("用戶名："+data.username+"<br/>留言內(nèi)容："+data.content);}});7.4.7使用serialize()方法序列化表單【例7-9】使用serialize()方法序列化表單。（1）創(chuàng)建index.html頁面，構(gòu)建表單，在此處給表單中的控件添加name屬性，并給表單賦予一個id屬性值。主要代碼如下：（2）引入jQuery庫，并且在引入代碼下方編寫jQuery代碼，使用$.post()方法提交表單、傳值。具體代碼如下：運(yùn)行結(jié)果目錄導(dǎo)航7.1AJAX技術(shù)簡介7.3通過JavaScript應(yīng)用AJAX7.5AJAX的全局事件7.2安裝Web運(yùn)行環(huán)境——AppServ7.4jQuery中的AJAX應(yīng)用7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新7.5.1AJAX的全局事件參數(shù)全局事件名稱參數(shù)說明ajaxComplete(callback)callbackAJAX請求完成時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxComplete",handler)ajaxError(callback)callbackAJAX請求發(fā)生錯誤時執(zhí)行的函數(shù)，其中捕捉到的錯誤可以作為最后一個參數(shù)進(jìn)行傳遞，在jQuery3.5中已廢棄，請使用.on("ajaxError",handler)ajaxSend(callback)callbackAJAX請求發(fā)送前執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxSend",handler)ajaxStart(callback)callbackAJAX請求開始時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxStart",handler)ajaxStop(callback)callbackAJAX請求結(jié)束時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxStop",handler)ajaxSuccess(callback)callbackAJAX請求成功時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxSuccess",handler)7.5.2ajaxStart與ajaxStop全局事件【例7-10】使用ajaxStart與ajaxStop全局事件添加信息提示。（1）在例7-9的頁面中加入一個<div>元素作為提示信息，具體代碼為：運(yùn)行結(jié)果<divid="msg">數(shù)據(jù)正在發(fā)送……</div>（2）首先為<document>元素綁定ajaxStart全局事件，在AJAX請求開始時，提示用戶“數(shù)據(jù)正在發(fā)送……”，然后為<document>元素綁定ajaxStop全局事件，在請求結(jié)束后，修改提示信息為“數(shù)據(jù)獲取成功”并將提示信息隱藏。具體代碼如下：目錄導(dǎo)航7.1AJAX技術(shù)簡介7.3通過JavaScript應(yīng)用AJAX7.5AJAX的全局事件7.2安裝Web運(yùn)行環(huán)境——AppServ7.4jQuery中的AJAX應(yīng)用7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新創(chuàng)建留言板頁面，使用戶留言可以異步提交。將用戶提交的留言即時更新在頁面中。01OPTION項(xiàng)目要求02OPTION運(yùn)行效果7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新程序開發(fā)步驟如下。（1）創(chuàng)建一個名為index.html的文件，在該文件的<head>標(biāo)記中使用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script>（2）編寫CSS樣式，用于控制導(dǎo)航菜單的顯示樣式，具體代碼請參見源代碼。（3）在頁面的<body>標(biāo)記中，首先添加一個表單，讓用戶填寫用戶名、標(biāo)題以及留言內(nèi)容。然后創(chuàng)建一個顯示用戶提交留言的id屬性值為ddiv的<div>元素。代碼如下：7.6項(xiàng)目實(shí)戰(zhàn)：使用AJAX實(shí)現(xiàn)留言板即時更新（4）在引入jQuery庫的代碼下方編寫jQuery代碼，為按鈕添加click事件，使其在被單擊時通過AJAX方式發(fā)送請求，待服務(wù)器端成功返回內(nèi)容后，在回調(diào)函數(shù)中將用戶提交的信息保存到一個新的<div>元素中，將該<div>元素追加到id屬性值為ddiv的<div>元素中。具體代碼如下：$(document).ready(function(){ $("#button").on("click",function(){ $.post("index.php",$("#form1").serialize(),function(data){ $("#ddiv").append("<divclass='dcon'>標(biāo)題："+data.title+"<br/>用戶名："+data.username+"<br/>留言內(nèi)容："+data.content);//將用戶提交的用戶名與留言內(nèi)容顯示 },"json"); })})學(xué)習(xí)快樂！工業(yè)和信息化精品系列教材人民郵電出版社第8單元使用jQueryUI插件jQuery網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）工業(yè)和信息化精品系列教材人民郵電出版社了解jQueryUI插件的工作原理。了解jQueryUI常用插件的使用。了解jQueryUI常用特效的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠熟練使用jQueryUI插件。能夠熟練使用jQueryUI特效。掌握插件的應(yīng)用技巧，設(shè)計(jì)出富有吸引力的用戶界面，增強(qiáng)創(chuàng)新意識與團(tuán)隊(duì)協(xié)作能力。目錄導(dǎo)航8.1初識jQueryUI插件8.3jQueryUI的常用特效8.2jQueryUI的常用插件8.4項(xiàng)目實(shí)戰(zhàn)：使用jQuery實(shí)現(xiàn)許愿墻8.1.1jQueryUI概述（2）開源免費(fèi)。輕松滿足自由產(chǎn)品和企業(yè)產(chǎn)品的各種授權(quán)需求。（1）簡單易用。繼承jQuery簡易使用特性，提供高度抽象接口，短期改善網(wǎng)站易用性。（3）廣泛兼容。兼容各主流桌面瀏覽器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+。（4）輕便快捷。組件間相對獨(dú)立，可按需加載，避免浪費(fèi)帶寬、放慢網(wǎng)頁打開速度。（6）開放公開。從結(jié)構(gòu)規(guī)劃到代碼編寫全程開放，人人均可參與文檔、代碼的編寫與討論。（5）美觀多變。提供近20種預(yù)設(shè)主題，并可自定義多達(dá)60項(xiàng)可配置樣式規(guī)則，提供24種背景紋理供選擇。（7）強(qiáng)力支持。提供CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)服務(wù)）支持。（8）完整漢化。開發(fā)包內(nèi)置包含中文在內(nèi)的40多種語言包。8.1.2jQueryUI的下載打開jQueryUI主頁面01選擇下載版本02選擇主題038.1.3jQueryUI的使用jQueryUI下載完成后，會獲得一個包含已選組件的ZIP文件（jquery-ui-1.13.2.custom.zip），解壓該文件，得到j(luò)QueryUI包含的文件。jQueryUI包含的文件8.1.3jQueryUI的使用在HTML網(wǎng)頁中使用jQueryUI插件時，需要將jQueryUI包含的所有文件及文件夾（即解壓后的jquery-ui-1.13.2.custom文件夾）復(fù)制到HTML網(wǎng)頁所在的文件夾下，然后在HTML網(wǎng)頁的<head>標(biāo)記中添加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/jquery-ui.js"></script><scriptsrc="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>一旦引用了以上3個文件，開發(fā)人員即可向HTML網(wǎng)頁中添加jQueryUI插件。例如要向HTML網(wǎng)頁中添加一個滑塊插件，可使用如下代碼實(shí)現(xiàn)。HTML代碼如下：<divid="slider"></div>添加滑塊插件的JavaScript代碼如下：8.1.4jQueryUI插件的工作原理01OPTION安裝為了跟蹤插件的狀態(tài)，首先介紹插件的生命周期。當(dāng)插件安裝時，插件的生命周期開啟，只需要在一個或多個元素上調(diào)用插件，即安裝了插件。例如以下代碼開啟了progressbar插件的生命周期：$("#elem").progressbar();此外在安裝時，jQueryUI插件還可以傳遞一組選項(xiàng)，這樣即可重寫默認(rèn)選項(xiàng)，代碼如下：$("#elem").progressbar({value:20});8.1.4jQueryUI插件的工作原理02OPTION方法option方法。option方法主要用來在插件初始化后修改選項(xiàng)。例如通過調(diào)用option方法修改進(jìn)度條插件的value選項(xiàng)為30，代碼如下：$("#elem").progressbar("option","value",30);disable方法。disable方法用來禁用插件，它等同于將disabled選項(xiàng)設(shè)置為true。例如以下代碼用來將進(jìn)度條插件設(shè)置為禁用狀態(tài)：$("#elem").progressbar("disable");enable方法。enable方法用來啟用插件，它等同于將disabled選項(xiàng)設(shè)置為false。例如以下代碼用來將進(jìn)度條插件設(shè)置為啟用狀態(tài)：$("#elem").progressbar("enable");destroy方法。destroy方法用來銷毀插件，使插件返回到最初的標(biāo)記，這意味著插件生命周期的終止。例如以下代碼用來銷毀進(jìn)度條插件：$("#elem").progressbar("destroy");widget方法。widget方法用來生成包裝器元素，或與原始元素?cái)嚅_連接的元素。例如在以下代碼中，widget方法將返回元素，由于在進(jìn)度條插件中，沒有生成的包裝器元素，因此widget方法返回與原始元素?cái)嚅_連接的元素。$("#elem").progressbar("widget");8.1.4jQueryUI插件的工作原理03OPTION事件所有的jQueryUI插件都有與它們各種行為相關(guān)的事件，用于在狀態(tài)改變時通知用戶。對于大多數(shù)插件，當(dāng)事件被觸發(fā)時，事件名稱以插件名稱為前綴。例如，可以綁定進(jìn)度條插件的change事件，一旦進(jìn)度條的值發(fā)生變化就觸發(fā)該事件。代碼如下：$("#elem").bind("progressbarchange",function(){ alert("進(jìn)度條的值發(fā)生了改變!");});每個事件都有一個相對應(yīng)的回調(diào)作為選項(xiàng)進(jìn)行呈現(xiàn)，開發(fā)人員可以使用進(jìn)度條插件的change選項(xiàng)進(jìn)行回調(diào)，這等同于綁定progressbarchange事件。代碼如下：$("#elem").progressbar({ change:function(){ alert("進(jìn)度條的值發(fā)生了改變!"); }});8.1.5jQueryUI中的插件折疊面板（Accordion）自動完成（Autocomplete）按鈕（Button）日期選擇器（Datepicker）對話框（Dialog）、菜單（Menu）選擇菜單（Selectmenu）進(jìn)度條（Progressbar）滑塊（Slider）旋轉(zhuǎn)器（Spinner）標(biāo)簽頁（Tabs）工具提示框（Tooltip）鼠標(biāo)（Mouse）復(fù)選框單選按鈕（Checkboxradio）組件控制組（Controlgroup）目錄導(dǎo)航8.1初識jQueryUI插件8.3jQueryUI的常用特效8.2jQueryUI的常用插件8.4項(xiàng)目實(shí)戰(zhàn)：使用jQuery實(shí)現(xiàn)許愿墻8.2.1折疊面板的使用折疊面板標(biāo)記需要包含至少一對標(biāo)題和內(nèi)容面板，例如折疊面板標(biāo)記可以包含一系列的標(biāo)題（<h3>標(biāo)記）和內(nèi)容面板<div>。代碼如下：<divid="accordion"> <h3>Firstheader</h3> <div>Firstcontentpanel</div> <h3>Secondheader</h3> <div>Secondcontentpanel</div></div>在使用折疊面板時，如果焦點(diǎn)在標(biāo)題（header）上，則如下鍵盤命令可用。Up/Left：移動焦點(diǎn)到上一個標(biāo)題上。如果當(dāng)前焦點(diǎn)在第一個標(biāo)題上，則移動焦點(diǎn)到最后一個標(biāo)題上。Down/Right：移動焦點(diǎn)到下一個標(biāo)題上。如果當(dāng)前焦點(diǎn)在最后一個標(biāo)題上，則移動焦點(diǎn)到第一個標(biāo)題上。Home：移動焦點(diǎn)到第一個標(biāo)題上。End：移動焦點(diǎn)到最后一個標(biāo)題上。Space/Enter：激活與獲得焦點(diǎn)的標(biāo)題相關(guān)的內(nèi)容面板（panel）。當(dāng)焦點(diǎn)在內(nèi)容面板中時，以下鍵盤命令可用。Ctrl+Up：移動焦點(diǎn)到相關(guān)的標(biāo)題上。8.2.1折疊面板的使用折疊面板的常用選項(xiàng)及說明如表所示。選項(xiàng)類型說明activeBoolean或Integer當(dāng)前展開哪一個內(nèi)容面板animateBoolean或Number或String或Object是否使用動畫改變內(nèi)容面板，且如何使用動畫改變內(nèi)容面板classesObject指定要添加到小部件元素的其他類collapsibleBoolean所有邏輯部分的內(nèi)容是否都可以馬上折疊，允許折疊激活的部分disabledBoolean如果設(shè)置為true，則禁用該折疊面板eventString折疊面板頭部會做出反應(yīng)的事件，用以激活相關(guān)的內(nèi)容面板?？梢灾付ǘ鄠€事件，且事件用空格間隔headerSelector標(biāo)題元素的選擇器，通過主要折疊面板元素上的.find()方法進(jìn)行應(yīng)用。內(nèi)容面板必須是緊接在與其相關(guān)的標(biāo)題后的同級元素heightStyleString控制折疊面板和每個內(nèi)容面板的高度iconsObject標(biāo)題要使用的圖標(biāo)（Icons），與jQueryUICSS框架提供的圖標(biāo)匹配。設(shè)置為false，則不顯示圖標(biāo)8.2.1折疊面板的使用折疊面板的常用方法及說明如表所示。方法說明destroy()完全移除折疊面板功能。這會把元素返回到它的預(yù)初始化狀態(tài)disable()禁用折疊面板enable()啟用折疊面板instance()在插件加載后可以安全地調(diào)用任何元素option(optionName)獲取當(dāng)前與指定optionName參數(shù)關(guān)聯(lián)的值option()獲取一個包含鍵值對的對象，鍵值對表示當(dāng)前折疊面板選項(xiàng)為Hashoption(optionName,value)設(shè)置與指定optionName參數(shù)關(guān)聯(lián)的折疊面板選項(xiàng)的值option(options)為折疊面板設(shè)置一個或多個選項(xiàng)refresh()處理任何在DOM中直接添加或移除的標(biāo)題和內(nèi)容面板，并重新計(jì)算折疊面板的高度widget()返回一個包含折疊面板的jQuery對象8.2.1折疊面板的使用折疊面板的常用事件及說明如表所示。事件說明activate(event,ui)內(nèi)容面板被激活后觸發(fā)（在動畫完成之后）。如果折疊面板之前為折疊狀態(tài)，則ui.oldHeader和ui.oldPanel將是空的jQuery對象。如果折疊面板正在折疊，則ui.newHeader和ui.newPanel將是空的jQuery對象beforeActivate(event,ui)內(nèi)容面板被激活前直接觸發(fā)?？梢匀∠苑乐箖?nèi)容面板被激活。如果折疊面板當(dāng)前為折疊狀態(tài)，則ui.oldHeader和ui.oldPanel將是空的jQuery對象。如果折疊面板正在折疊，則ui.newHeader和ui.newPanel將是空的jQuery對象create(event,ui)當(dāng)創(chuàng)建折疊面板時觸發(fā)。如果折疊面板為折疊狀態(tài)，則ui.header和ui.panel將是空的jQuery對象8.2.1折疊面板的使用【例8-1】實(shí)現(xiàn)一個折疊面板，默認(rèn)第1個內(nèi)容面板為展開狀態(tài)。（1）新建一個index.html文件，將其放到8-1文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-1文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁中顯示折疊面板的功能：運(yùn)行結(jié)果8.2.2自動完成插件的使用自動完成（Autocomplete）插件用來根據(jù)用戶輸入的值對數(shù)據(jù)進(jìn)行搜索和過濾，讓用戶從預(yù)設(shè)值列表中快速找到并選擇需要的條目。自動完成插件類似百度的搜索框，當(dāng)用戶在搜索框中輸入值時，自動完成插件會提供相應(yīng)的建議。ui-autocomplete：用于顯示匹配用戶的菜單（menu）。ui-autocomplete-input：自動完成插件（AutocompleteWidget）實(shí)例化的<input>元素。自動完成插件使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用自動完成插件指定的樣式，則可以使用如下CSSclass名稱。8.2.2自動完成插件的使用自動完成插件的常用選項(xiàng)及說明如表所示。選項(xiàng)類型說明appendToSelector菜單應(yīng)該被附加到哪一個元素。當(dāng)該選項(xiàng)值為null時，輸入域的父元素將查找?guī)в蠧SSclass名稱為ui-front的元素。如果找到帶有CSSclass名稱為ui-front的元素，菜單將被附加到該元素；如果未找到帶有CSSclass名稱為ui-front的元素，無論選項(xiàng)值為多少，菜單都將被附加到bodyautoFocusBoolean如果設(shè)置為true，當(dāng)菜單顯示時第1個條目將自動獲得焦點(diǎn)delayInteger按鍵和執(zhí)行搜索之間的延遲，以毫秒計(jì)。對于本地?cái)?shù)據(jù)，采用零延遲是有意義的（更具響應(yīng)性），但對于遠(yuǎn)程數(shù)據(jù)采用零延遲會產(chǎn)生大量的負(fù)荷，同時降低響應(yīng)性disabledBoolean如果設(shè)置為true，則禁用該自動完成插件minLengthInteger執(zhí)行搜索前用戶必須輸入的最小字符數(shù)。對于僅匹配幾項(xiàng)條目的本地?cái)?shù)據(jù)，通常設(shè)置為零。但是當(dāng)單個字符搜索會匹配幾千項(xiàng)條目時，設(shè)置為高數(shù)值是很有必要的positionObject標(biāo)識建議菜單的位置與相關(guān)的input元素。of選項(xiàng)默認(rèn)為input元素，可以指定另一個定位元素sourceArray或String或Function(Objectrequest,Functionresponse(Objectdata))定義要使用的數(shù)據(jù)，必須指定該選項(xiàng)8.2.2自動完成插件的使用自動完成插件的常用方法及說明如表所示。方法說明close()關(guān)閉自動完成插件菜單。當(dāng)與search()方法結(jié)合使用時，可用于關(guān)閉打開的菜單destroy()完全移除自動完成插件功能。這會把元素返回到它的預(yù)初始化狀態(tài)disable()禁用自動完成插件enable()啟用自動完成插件option(optionName)獲取當(dāng)前與指定optionName參數(shù)關(guān)聯(lián)的值option()獲取一個包含鍵值對的對象，鍵值對表示當(dāng)前自動完成插件選項(xiàng)為Hashoption(optionName,value)設(shè)置與指定optionName參數(shù)關(guān)聯(lián)的自動完成插件選項(xiàng)的值option(options)為自動完成插件設(shè)置一個或多個選項(xiàng)

search([value])觸發(fā)search事件，如果該事件未被取消則調(diào)用數(shù)據(jù)源。當(dāng)不帶參數(shù)調(diào)用該方法時，則使用當(dāng)前輸入的值。可帶一個空字符串和minLength:0參數(shù)對方法進(jìn)行調(diào)用，來顯示所有條目widget()返回一個包含菜單元素的jQuery對象，雖然其中的菜單項(xiàng)不斷地被創(chuàng)建和銷毀。菜單元素本身會在初始化時創(chuàng)建，并不斷地重復(fù)使用8.2.2自動完成插件的使用自動完成的常用事件及說明如表所示。事件說明change(event,ui)如果輸入域的值改變，則觸發(fā)該事件close(event,ui)當(dāng)菜單隱藏時觸發(fā)。不是每一個close事件都伴隨著change事件create(event,ui)當(dāng)創(chuàng)建自動完成插件時觸發(fā)focus(event,ui)當(dāng)焦點(diǎn)移動到一個條目上（未選擇）時觸發(fā)。默認(rèn)的動作是把文本域中的值替換為獲得焦點(diǎn)的條目的值，即使該事件是通過鍵盤交互觸發(fā)的。取消該事件會阻止值被更新，但不會阻止選項(xiàng)獲得焦點(diǎn)open(event,ui)當(dāng)打開建議菜單或者更新建議菜單時觸發(fā)response(event,ui)在搜索完成后菜單顯示前觸發(fā)。該事件用于建議數(shù)據(jù)的本地操作，其中自定義的source選項(xiàng)回調(diào)不是必需的。該事件總是在搜索完成后被觸發(fā)，如果搜索無結(jié)果或者禁用了自動完成插件，導(dǎo)致菜單未顯示，該事件一樣會被觸發(fā)search(event,ui)在搜索執(zhí)行前滿足minLength和delay后觸發(fā)。如果取消該事件，則不會提交請求，也不會提供建議條目select(event,ui)當(dāng)從菜單中選擇條目時觸發(fā)。默認(rèn)動作是把文本域中的值替換為被選中條目的值。取消該事件會阻止值被更新，但不會阻止菜單關(guān)閉8.2.2自動完成插件的使用【例8-2】本實(shí)例使用自動完成插件實(shí)現(xiàn)根據(jù)用戶輸入，智能顯示查詢列表的功能。如果查詢列表過長，可以通過為自動完成插件設(shè)置max-height的值來防止列表顯示過長（1）新建一個index.html文件，將其放到8-2文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-2文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)根據(jù)用戶輸入智能顯示查詢列表的功能：運(yùn)行結(jié)果8.2.3按鈕的使用Buttonset通過選擇一個容器元素（包含單選按鈕）并調(diào)用.buttonset()來分組。Buttonset也提供了可視化分組，因此當(dāng)單選按鈕需要分組時可以考慮使用它。按鈕部件（ButtonWidget）使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用按鈕指定的樣式，則可以使用如下CSSclass名稱。ui-button：表示按鈕的DOM元素。該元素會根據(jù)text和icons選項(xiàng)添加下列CSSclass名稱之一：ui-button-text-only、ui-button-icon-only、ui-button-icons-only、ui-button-texticons。ui-button-icon-primary：用于顯示按鈕主要圖標(biāo)的元素。只有當(dāng)主要圖標(biāo)在icons選項(xiàng)中提供時才顯示。ui-button-text：在按鈕文本內(nèi)容周圍的容器。ui-button-icon-secondary：用于顯示按鈕次要圖標(biāo)的元素。只有當(dāng)次要圖標(biāo)在icons選項(xiàng)中提供時才顯示。ui-buttonset：Buttonset的外層容器。8.2.3按鈕的使用按鈕的常用選項(xiàng)及說明如表所示。選項(xiàng)類型說明disabledBoolean如果設(shè)置為true，則禁用該按鈕iconsObject要顯示的圖標(biāo)，包括帶有文本的圖標(biāo)和不帶文本的圖標(biāo)。默認(rèn)情況下，主要圖標(biāo)顯示在標(biāo)簽文本的左邊，次要圖標(biāo)顯示在標(biāo)簽文本的右邊labelString要顯示在按鈕中的文本內(nèi)容。當(dāng)未指定時（選項(xiàng)值為null），使用元素的HTML內(nèi)容。如果元素是一個submit或reset類型的<input>元素，則使用它的value屬性值；如果元素是一個radio或checkbox類型的<input>元素，則使用相關(guān)<label>元素的HTML內(nèi)容textBoolean是否顯示標(biāo)簽。當(dāng)設(shè)置為false時不顯示文本，但是此時必須啟用icons選項(xiàng)，否則text選項(xiàng)將被忽略8.2.3按鈕的使用按鈕的常用方法及說明如表所示。方法說明destroy()完全移除按鈕功能。這會把元素返回到它的初始化狀態(tài)disable()禁用按鈕enable()啟用按鈕option(optionName)獲取當(dāng)前與指定optionName參數(shù)關(guān)聯(lián)的值option()獲取一個包含鍵值對的對象，鍵值對表示當(dāng)前按鈕選項(xiàng)為Hashoption(optionName,value)設(shè)置與指定optionName參數(shù)關(guān)聯(lián)的按鈕選項(xiàng)的值option(options)為按鈕設(shè)置一個或多個選項(xiàng)refresh()刷新按鈕的視覺狀態(tài)。用于在以編程方式改變原生元素的選中狀態(tài)或禁用狀態(tài)后刷新按鈕的視覺狀態(tài)widget()返回一個包含按鈕的jQuery對象按鈕的常用事件及說明如表所示。事件說明create(event,ui)當(dāng)創(chuàng)建按鈕時觸發(fā)8.2.3按鈕的使用【例8-3】本實(shí)例分別使用<button>元素和類型為submit的<input>元素制作按鈕。（1）新建一個index.html文件，將其放到8-3文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-3文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼：運(yùn)行結(jié)果8.2.4日期選擇器的使用日期選擇器（Datepicker）主要用來從彈出框或在線日歷中選擇一個日期。使用該插件時，讀者可以自定義日期的格式和語言，也可以限制可選擇的日期范圍等。日期選擇器的常用方法及說明如表所示。方法說明$.datepicker.setDefaults(settings)為所有的日期選擇器改變默認(rèn)設(shè)置$.datepicker.formatDate(format,date,settings)格式化日期為一個指定格式的字符串值$.datepicker.parseDate(format,value,settings)從一個指定格式的字符串值中提取日期$.datepicker.iso8601Week(date)確定一個給定的日期在一年中的第幾周：1～53$.datepicker.noWeekends設(shè)置如beforeShowDay()函數(shù)，防止選擇的日期為周末8.2.4日期選擇器的使用【例8-4】本實(shí)例使用日期選擇器選擇日期并將其格式化顯示在文本框中，在選擇日期時提供兩個月的日期供選擇，而且在選擇日期時可以修改年份信息和月份信息。（1）新建一個index.html文件，將其放到8-4文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-4文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼實(shí)現(xiàn)選擇日期并將其格式化的功能：運(yùn)行結(jié)果日期選擇器的應(yīng)用實(shí)例以指定格式顯示日期8.2.5對話框的使用對話框（Dialog）是一個懸浮窗口，包含一個標(biāo)題欄和一個內(nèi)容區(qū)域。對話框可以移動、重新調(diào)整大小，默認(rèn)情況下通過單擊“×”圖標(biāo)關(guān)閉。對話框部件使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用對話框指定的樣式，則可以使用如下CSSclass名稱。ui-dialogui-dialog-titlebarui-dialog-titleui-dialog-titlebar-closeui-dialog-contentui-dialog-buttonpaneui-dialog-buttonset8.2.5對話框的使用【例8-5】本實(shí)例使用對話框演示創(chuàng)建新用戶的過程，具體實(shí)現(xiàn)時在內(nèi)容區(qū)域嵌入<form>標(biāo)記，設(shè)置modal選項(xiàng)值為true，并通過buttons選項(xiàng)來指定主要的和次要的用戶動作。（1）新建一個index.html文件，將其放到8-5文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-5文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁中顯示對話框的功能：8.2.5對話框的使用8.2.5對話框的使用運(yùn)行結(jié)果顯示已有的用戶“創(chuàng)建新用戶”模態(tài)對話框8.2.6菜單的使用菜單（Menu）可以用任何有效的標(biāo)記創(chuàng)建，只要元素有嚴(yán)格的父子關(guān)系且每個條目都有一個錨。最常用的元素是無序列表（<ul>），例如：<ulid="menu"> <li><ahref="#">菜單1</a></li> <li><ahref="#">菜單2</a></li> <li><ahref="#">菜單3</a> <ul> <li><ahref="#">二級菜單1</a></li> <li><ahref="#">二級菜單2</a></li> <li><ahref="#">二級菜單3</a></li> </ul> </li> <li><ahref="#">菜單4</a></li></ul>菜單部件使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用菜單指定的樣式，則可以使用如下CSSclass名稱。ui-menuui-menu-itemui-menu-iconui-menu-divider8.2.6菜單的使用【例8-6】本實(shí)例制作一個帶有默認(rèn)配置、禁用條目和嵌套菜單的菜單。（1）新建一個index.html文件，將其放到8-6文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-6文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁中顯示3級菜單的功能：運(yùn)行結(jié)果8.2.7進(jìn)度條的使用進(jìn)度條被設(shè)計(jì)用來顯示進(jìn)度（即當(dāng)前完成百分比），它通過CSS編碼靈活調(diào)整大小，默認(rèn)會縮放到適應(yīng)父容器的大小。進(jìn)度條部件使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用進(jìn)度條指定的樣式，則可以使用如下CSSclass名稱。ui-progressbar：進(jìn)度條的外層容器。該元素會為不確定的進(jìn)度條額外添加一個CSSclass名稱ui-progressbar-indeterminate。ui-progressbar-value：該元素代表進(jìn)度條的填充部分。ui-progressbar-overlay：用于為不確定的進(jìn)度條顯示動畫的覆蓋層。8.2.7進(jìn)度條的使用【例8-7】本實(shí)例制作一個自定義更新的進(jìn)度條。（1）新建一個index.html文件，將其放到8-7文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-7文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)在網(wǎng)頁中自動加載的進(jìn)度條：運(yùn)行結(jié)果8.2.8滑塊的使用滑塊（Slider）主要用來拖動手柄選擇一個數(shù)值。基本的滑塊是水平的，有一個單一的手柄，可以用鼠標(biāo)或箭頭鍵對手柄進(jìn)行左右拖動?；瑝K部件（SliderWidget）會在初始化時創(chuàng)建帶有CSSclass名稱為ui-slider-handle的手柄元素，用戶可以通過在初始化之前創(chuàng)建并追加元素，同時向元素添加CSSclass名稱ui-sliderhandle來指定自定義的手柄元素。它只會創(chuàng)建匹配value/values長度所需數(shù)量的手柄元素。滑塊部件使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用滑塊指定的樣式，則可以使用如下CSSclass名稱。ui-sliderui-slider-handleui-slider-range8.2.8滑塊的使用【例8-8】本實(shí)例通過組合3個滑塊實(shí)現(xiàn)一個簡單的RGB（RedGreenBlue，三原色）顏色選擇器（實(shí)例位置：源碼\第8單元\8-8）。（1）新建一個index.html文件，將其放到8-8文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-8文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)通過拖動滑塊改變RGB顏色選擇器的值，從而改變總體顏色的功能：運(yùn)行結(jié)果8.2.9旋轉(zhuǎn)器的使用旋轉(zhuǎn)器（Spinner）的主要作用是通過向上或者向下按鈕和箭頭鍵，為輸入值增強(qiáng)文本輸入功能。它允許用戶直接輸入一個值，或通過鍵盤、鼠標(biāo)旋轉(zhuǎn)改變一個已有的值。當(dāng)旋轉(zhuǎn)器與全球化（Globalize）結(jié)合時，用戶甚至可以旋轉(zhuǎn)顯示不同地區(qū)的貨幣和日期。旋轉(zhuǎn)器使用兩個按鈕將文本輸入覆蓋為當(dāng)前值的遞增值和遞減值。旋轉(zhuǎn)器增加了按鍵事件，以便用戶可以用鍵盤完成相同的遞增和遞減。旋轉(zhuǎn)器部件（SpinnerWidget）使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用旋轉(zhuǎn)器指定的樣式，則可以使用如下CSSclass名稱。ui-spinnerui-spinner-inputui-spinner-button8.2.9旋轉(zhuǎn)器的使用【例8-9】本實(shí)例制作一個捐款表格，用戶可以選擇捐款幣種和設(shè)置捐款額，其中設(shè)置捐款額使用旋轉(zhuǎn)器實(shí)現(xiàn)。（1）新建一個index.html文件，將其放到8-9文件夾中。（2）將jQueryUI文件夾jquery-ui-1.13.2.custom復(fù)制到8-9文件夾中。（3）使用VSCode打開index.html文件，在index.html文件中編寫如下代碼，實(shí)現(xiàn)通過旋轉(zhuǎn)器設(shè)置捐款額的功能：運(yùn)行結(jié)果8.2.10標(biāo)簽頁的使用標(biāo)簽頁（Tabs）是一種多面板的單內(nèi)容區(qū)，每個面板與列表中的標(biāo)題相關(guān)，單擊標(biāo)簽頁可以切換顯示不同邏輯內(nèi)容的顯示/隱藏狀態(tài)。標(biāo)簽頁有一些必須使用的特定標(biāo)記，以便標(biāo)簽頁能正常工作，這些特定標(biāo)記分別如下。標(biāo)簽頁部件使用jQueryUICSS框架來定義它的外觀和感觀的樣式。如果需要使用標(biāo)簽頁指定的樣式，則可以使用如下CSSclass名稱。ui-tabsui-tabs-nav導(dǎo)航中激活的列表項(xiàng)會帶有一個CSSclass名稱ui-tabs-active標(biāo)簽頁必須