《web前端技術(shù)》課件-第十三章

Web前端技術(shù)簽到掃碼下載文旌課堂APP掃碼簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時間，學生通過“文旌課堂APP”掃描“簽到二維碼”進行簽到。jQuery第十三章隨著科技的迅速發(fā)展，互聯(lián)網(wǎng)領(lǐng)域中陸續(xù)涌現(xiàn)出了一批優(yōu)秀的JavaScript庫，如Prototype、React、Zepto等。這些JavaScript庫可以幫助開發(fā)人員從復雜煩瑣的程序中解脫出來，將開發(fā)的重點從細節(jié)實現(xiàn)轉(zhuǎn)向功能實現(xiàn)，從而提高項目開發(fā)的效率。jQuery是繼Prototype之后又一個優(yōu)秀的JavaScript庫。本章將對jQuery的相關(guān)知識進行詳細介紹。章節(jié)導讀了解jQuery，熟悉下載和配置jQuery的方法。熟悉jQuery選擇器、jQuery對網(wǎng)頁元素進行的操作、jQuery的時間處理。掌握jQuery的動畫效果，包括元素的隱藏與顯示、元素的淡入淡出和元素的滑動效果等。學習目標提高自我學習能力，增強自信心。培養(yǎng)良好的學習方法，增強舉一反三的能力。素質(zhì)目標第十三章jQuery

/章節(jié)導航/13.1

jQuery

基礎(chǔ)13.2

jQuery選擇器13.3

jQuery操作元素13.4

jQuery的事件處理13.5

jQuery

的動畫效果實戰(zhàn)演練——制作自動隱藏式菜單

jQuery基礎(chǔ)13.1jQuery是一個快速、簡潔、靈活的JavaScript庫，本節(jié)將帶領(lǐng)大家認識jQuery，并介紹jQuery的下載和配置。13.1jQuery基礎(chǔ)jQuery于2006年1月由JohnResig發(fā)布，其設(shè)計宗旨是“writeless,domore”，即倡導寫更少的代碼，做更多的事情。jQuery封裝了JavaScript常用的功能代碼，提供了一種簡便的JavaScript設(shè)計模式，優(yōu)化了HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。它的設(shè)計可以改變用戶編寫JavaScript代碼的方式，有助于提高編程效率。13.1.1

認識jQuery13.1jQuery基礎(chǔ)13.1.1

認識jQuery13.1jQuery基礎(chǔ)使用jQuery可以極大地提高編寫JavaScript代碼的效率，還可以讓代碼更加簡潔、健壯?？梢哉f，jQuery適合任何應(yīng)用JavaScript的項目開發(fā)。在實際開發(fā)中，要想使用jQuery，需要先下載并配置它。jQuery是一個開源的腳本庫，大家可以從官方網(wǎng)站（https://jQ）下載，下面介紹具體下載步驟。步驟1

在瀏覽器的地址欄中輸入https://jQ，并按Enter鍵，進入jQuery官方網(wǎng)站的首頁，如圖所示。13.1.2

下載和配置jQuery13.1jQuery基礎(chǔ)jQuery官方網(wǎng)站首頁步驟2

單擊官方網(wǎng)站首頁中的“DownloadjQueryv3.6.0”超鏈接，進入下載jQuery的網(wǎng)頁，如圖所示。13.1.2

下載和配置jQuery13.1jQuery基礎(chǔ)進入下載jQuery的網(wǎng)頁步驟3

單擊下載頁面中的“Downloadthecompressed,productionjQuery3.6.0”超鏈接，網(wǎng)頁跳轉(zhuǎn)至如圖所示的代碼頁。13.1.2

下載和配置jQuery13.1jQuery基礎(chǔ)jQuery3.6.0的代碼頁步驟4

在該代碼頁單擊鼠標右鍵，然后在彈出的快捷菜單中選擇“另存為”選項，或直接按“Ctrl+S”組合鍵，彈出“另存為”對話框，如圖所示。在該對話框中選擇保存的路徑，然后單擊“保存”按鈕。13.1.2

下載和配置jQuery13.1jQuery基礎(chǔ)“另存為”對話框在項目中通常使用壓縮后的文件，即本節(jié)下載的jquery-3.6.0.min.js文件。TISHI提示將jQuery下載到本地計算機后，還需要在項目中進行配置，即將下載后的jquery-3.6.0.min.js文件放在項目的指定文件夾中（通常放在JS文件夾中），然后在需要應(yīng)用jQuery的頁面中引用該文件。具體的引用方法如下：13.1.2

下載和配置jQuery13.1jQuery基礎(chǔ)（1）不考慮老版本瀏覽器兼容性的情況下，type="text/javascript"可以省略。（2）引用jQuery的<script>標簽必須放在所有引用自定義腳本文件的<script>標簽之前，否則在自定義的腳本代碼中無法應(yīng)用jQuery腳本庫。TISHI提示<scriptsrc="jquery文件路徑"type="text/javascript"></script>

jQuery選擇器13.2選擇器是一切網(wǎng)頁操作的基礎(chǔ)，在實際開發(fā)中，開發(fā)人員需要利用選擇器獲取需要的元素，從而操作相應(yīng)的對象或數(shù)組，實現(xiàn)網(wǎng)頁的業(yè)務(wù)邏輯。jQuery提供了許多功能強大的選擇器，以幫助開發(fā)人員獲取頁面上的元素，獲取的每個元素都以jQuery包裝集的形式返回。jQuery包裝集指的是通過jQuery的工廠函數(shù)“$()”返回的一個元素集?！?”是jQuery“類”的一個別稱，“$()”構(gòu)造了一個jQuery對象，所以“$()”也可以稱為jQuery的構(gòu)造函數(shù)。13.2jQuery選擇器

基本選擇器是jQuery選擇器中最重要的部分，它是其他類型選擇器的基礎(chǔ)?；具x擇器包括ID選擇器、元素選擇器、類名選擇器、復合選擇器和通配符選擇器。

13.2.1基本選擇器13.2jQuery選擇器表

基本選擇器選擇器使用方法說明示例ID選擇器$("#id")根據(jù)元素的id屬性值獲取一個元素，返回單個元素$("#user")，獲取id屬性值為user的元素元素選擇器$("element")根據(jù)元素的標簽名獲取相應(yīng)的元素，返回元素集$("div")，獲取所有的div元素類名選擇器$(".class")根據(jù)元素擁有的類名獲取元素，返回元素集$(".test")，獲取擁有test類名的所有元素

13.2.1基本選擇器13.2jQuery選擇器續(xù)表

基本選擇器選擇器使用方法說明示例復合選擇器$("selector1,selector2,…,selectorN,")（selectorN表示選擇器，可以是ID選擇器、元素選擇器或類名選擇器等）將每個選擇器獲取到的元素合并，返回元素集$("div,p.test")，獲取所有的div元素和擁有test類名的p元素通配符選擇器$("*")獲取網(wǎng)頁上所有的元素，返回元素集$("*")，獲取所有的元素

層級選擇器通過DOM元素之間的父子關(guān)系和兄弟關(guān)系為篩選條件獲取元素。jQuery提供的層級選擇器有后代選擇器、子代選擇器、相鄰選擇器和兄弟選擇器，詳細介紹如表所示。13.2jQuery選擇器

13.2.2層級選擇器表層級選擇器過濾選擇器包括簡單過濾器、內(nèi)容過濾器、可見性過濾器、子元素過濾選擇器和表單對象的屬性過濾器。

13.2.3過濾選擇器13.2jQuery選擇器

簡單過濾器是指以冒號開頭，用于實現(xiàn)簡單過濾效果的過濾器。1．簡單過濾器13.2jQuery選擇器

表

簡單過濾器13.2jQuery選擇器內(nèi)容過濾器是指通過DOM元素包含的文本內(nèi)容，以及是否含有匹配的元素進行篩選，從而獲取相應(yīng)的元素。2．內(nèi)容過濾器表

內(nèi)容過濾器13.2jQuery選擇器元素的可見狀態(tài)有兩種，一種是隱藏狀態(tài)，另一種是顯示狀態(tài)?？梢娦赃^濾器就是利用元素的可見狀態(tài)獲取元素的。3．可見性過濾器表

可見性過濾器13.2jQuery選擇器子元素過濾選擇器用于篩選給定某個元素的子元素，具體的過濾條件由選擇器的種類決定。jQuery提供的子元素過濾選擇器如表所示。4．子元素過濾選擇器表

子元素過濾選擇器13.2jQuery選擇器表單對象的屬性過濾器通過表單元素的狀態(tài)（如是否可用、選中等）屬性獲取元素。5．表單對象的屬性過濾器表

表單對象的屬性過濾器13.2jQuery選擇器屬性選擇器是以元素的屬性作為過濾條件來獲取元素的。

13.2.4屬性選擇器表

屬性選擇器13.2jQuery選擇器表單在Web前端開發(fā)中占據(jù)重要的地位，在jQuery中引入的表單選擇器能夠讓用戶更加方便地處理表單數(shù)據(jù)。使用表單選擇器可以快速定位到某類表單元素。

13.2.5表單選擇器表

表單選擇器

jQuery操作元素13.3jQuery提供了許多操作網(wǎng)頁元素的方法，這些方法比JavaScript中操作網(wǎng)頁元素的方法更加方便靈活。jQuery可以對網(wǎng)頁元素進行的操作包括操作元素的內(nèi)容和值、操作DOM節(jié)點、操作元素屬性、操作元素的CSS樣式。13.3jQuery操作元素元素的內(nèi)容是指定義元素的起始標簽和結(jié)束標簽中間的內(nèi)容，它又可以分為文本內(nèi)容和HTML內(nèi)容。文本內(nèi)容只包含元素的文本內(nèi)容，不包含元素的子元素；HTML內(nèi)容不僅包含元素的文本內(nèi)容，還包含元素的子元素。例如，代碼<div><p>內(nèi)容</p></div>中div元素的文本內(nèi)容是“內(nèi)容”，HTML內(nèi)容是“<p>內(nèi)容</p>”。元素的值是元素的一種屬性，大部分元素的值都對應(yīng)value屬性。

13.3.1

操作元素的內(nèi)容和值jQuery提供了操作元素內(nèi)容和值的方法，如表所示。表

操作元素內(nèi)容和值的方法表中，selector表示被選元素；content表示被選元素的新文本內(nèi)容（或HTML內(nèi)容）；function(index,oldcontent)表示返回被選元素的新文本內(nèi)容（或HTML內(nèi)容）的函數(shù)；value表示被選元素新的value屬性的值；function(index,oldvalue)表示返回要設(shè)置的value屬性值的函數(shù)。13.3jQuery操作元素

13.3.2

操作DOM節(jié)點JavaScript可以操作DOM節(jié)點，如查找節(jié)點、創(chuàng)建節(jié)點、插入節(jié)點、刪除節(jié)點、復制節(jié)點和替換節(jié)點等，只是實現(xiàn)方法比較復雜。jQuery為了簡化開發(fā)工作，提升工作效率，也提供了操作DOM節(jié)點的方法。其中，查找節(jié)點可以通過jQuery提供的選擇器輕松地實現(xiàn)。創(chuàng)建節(jié)點主要包括兩步，第一步是創(chuàng)建新元素；第二步是將新元素插入文檔（父元素）中。例如，使用以下代碼在網(wǎng)頁文檔的boby元素中創(chuàng)建一個新的段落節(jié)點。

1．創(chuàng)建節(jié)點13.3jQuery操作元素

1．創(chuàng)建節(jié)點<script> $(document).ready(function(){ //方法一 var$p1=$("<p></p>"); $p1.html("方法一添加的內(nèi)容"); $("body").append($p1); //方法二 var$p2=$("<p>方法二添加的內(nèi)容</p>"); $("body").append($p2); //方法三 $("body").append("<p>方法三添加的內(nèi)容</p>"); })</script>13.3jQuery操作元素超鏈接在創(chuàng)建節(jié)點時，無論添加的內(nèi)容是否為使用html()方法指定的HTML內(nèi)容，瀏覽器都會將它視為HTML內(nèi)容進行解析執(zhí)行。Gaoshoudianbo高手點撥13.3jQuery操作元素

2．插入節(jié)點在創(chuàng)建節(jié)點時，大家可以發(fā)現(xiàn)，使用append()方法能夠?qū)⒍x的節(jié)點內(nèi)容插入指定的元素中。實際上，append()方法就是用于插入節(jié)點的方法，除了該方法，jQuery還提供了許多其他方法。在jQuery中，插入節(jié)點的方法又分為在元素內(nèi)部插入節(jié)點和在元素外部插入節(jié)點兩種。其中，在元素內(nèi)部插入節(jié)點就是向一個元素中添加子元素的內(nèi)容；在元素外部插入節(jié)點就是向元素之前或之后添加內(nèi)容。

13.3jQuery操作元素

2．插入節(jié)點表

插入節(jié)點的方法表中，selector表示被選元素；content表示要插入的指定內(nèi)容。13.3jQuery操作元素

3．刪除、復制和替換節(jié)點在實際開發(fā)過程中，除了需要創(chuàng)建、插入節(jié)點外，還經(jīng)常需要刪除、復制和替換節(jié)點。表

刪除、復制和替換節(jié)點的方法表中，selector表示被選元素（或要替換的元素）；includeEvents是布爾值，表示是否復制元素的所有事件處理，取值有true和false（默認）；content表示指定的HTML內(nèi)容或元素（即替換被選元素的內(nèi)容）13.3jQuery操作元素

13.3.3操作元素屬性除了操作元素內(nèi)容和值，以及DOM節(jié)點的方法外，jQuery還提供了操作元素屬性的方法，如表所示。表

操作元素屬性的方法13.3jQuery操作元素

13.3.3操作元素屬性表

操作元素屬性的方法表中，selector表示被選元素。attribute表示屬性名稱。value表示屬性的值。function(index,oldvalue)表示返回屬性值的函數(shù)。class表示class屬性，可以設(shè)置多個值，不同值之間用空格隔開。switch是可選值，省略該值時，如果被選元素中存在（不存在）class屬性就刪除（添加）class屬性；switch為true時，添加對應(yīng)的class屬性；switch為false時，則刪除對應(yīng)的class屬性。13.3jQuery操作元素

13.3.4

操作元素的CSS樣式j(luò)Query還提供了操作元素CSS樣式的方法，如表所示。表

操作元素CSS樣式的方法表中，selector表示被選元素；name表示CSS屬性的名稱；value表示CSS屬性的值；function(index,value)表示返回CSS屬性新值的函數(shù)；{property:value}表示要設(shè)置為樣式屬性的“名稱/值對”對象；length表示元素的高度；function(index,oldheight)表示返回被選元素新高度的函數(shù)；function(index,oldwidth)表示返回被選元素新寬度的函數(shù)。13.3jQuery操作元素

jQuery的事件處理13.4事件是完成頁面與用戶之間動態(tài)交互必不可少的因素。傳統(tǒng)的JavaScript中內(nèi)置了一些事件響應(yīng)方式，而jQuery又增強、優(yōu)化和擴展了基本的事件處理機制。

13.4.1頁面加載響應(yīng)事件$(document).ready()方法是事件模塊中最重要的一個方法，它極大地提高了Web頁面的響應(yīng)速度，其語法格式如下：$(document).ready(function(){ //在此處寫代碼});其中，$(document)表示獲取整個文檔對象，ready()可理解為獲取文檔就緒時的內(nèi)容。13.4jQuery的事件處理超鏈接$(document).ready()方法的語法格式可以簡寫為：或者進一步簡寫為：簡寫后的語法格式更加簡短，但可讀性不強，且容易和其他方法混淆，因此不提倡使用簡寫的方式。TUOZHANYUEDU拓展閱讀$().ready(function(){//在此處寫代碼});$(function(){//在此處寫代碼});13.4jQuery的事件處理在jQuery中，可以使用$(document).ready()方法代替JavaScript中傳統(tǒng)的window.onload()方法，不過兩者之間存在細微的差別，主要表現(xiàn)在以下兩方面。（1）在一個頁面中可以無限制地使用$(document).ready()方法，各方法之間并不沖突，且它們按照代碼順序依次執(zhí)行；而在一個頁面中只能使用一個window.onload()方法。（2）$(document).ready()方法是在所有DOM元素已經(jīng)完全就緒之后才會被調(diào)用，不包括關(guān)聯(lián)的文件；而window.onload()方法是在一個文檔完全下載到瀏覽器時（包括所有關(guān)聯(lián)的文件）才會被響應(yīng)。例如，頁面上的圖片沒有加載完畢，但DOM元素已經(jīng)完全準備就緒時，就會執(zhí)行$(document).ready()方法。相同條件下，不會執(zhí)行window.onload()方法，直到圖片等所有關(guān)聯(lián)文件都下載完畢時才會執(zhí)行該方法。所以，$(document).ready()方法優(yōu)于window.onload()方法。13.4jQuery的事件處理

在實際開發(fā)中，只有頁面加載顯然不能滿足用戶與網(wǎng)頁間的動態(tài)交互的需求，程序在某些時候還需要完成某些事件，如鼠標單擊事件、失去焦點事件等。

13.4.2jQuery中的事件表

用于事件處理的方法13.4jQuery的事件處理上表中，selector表示被選元素；function表示當事件發(fā)生時運行的函數(shù)，事件處理程序就寫在該函數(shù)中。若省略該函數(shù)，不同的事件處理方法僅表示觸發(fā)對應(yīng)的事件。jQuery事件處理方法是jQuery中的核心函數(shù)，這些方法對應(yīng)的事件和傳統(tǒng)的JavaScript中的事件幾乎相同，只是有些名稱不同。13.4jQuery的事件處理

13.4.3事件綁定頁面加載完畢后，程序可以通過為元素綁定事件完成相應(yīng)的操作。在jQuery中，事件綁定通常分為3種情況，分別為為元素綁定事件、移除綁定和綁定一次性事件處理。在jQuery中，使用bind()方法為被選元素綁定一個或多個事件處理程序，并規(guī)定事件發(fā)生時運行的函數(shù)，其語法格式為：其中，selector表示被選元素；event是必選項，表示綁定到元素的一個或多個事件，事件必須是有效的，多個事件之間用空格分隔；data是可選項，表示傳遞到函數(shù)的額外數(shù)據(jù)；function是必選項，表示當事件發(fā)生時運行的函數(shù)。

1．為元素綁定事件$(selector).bind(event,data,function)13.4jQuery的事件處理

13.4.3事件綁定該方法的語法格式還可以使用以下格式：其中，{event:function,event:function,…}是必選項，表示事件映射，包含一個或多個綁定到元素的事件，以及當事件發(fā)生時運行的函數(shù)。

1．為元素綁定事件$(selector).bind({event:function,event:function,…})13.4jQuery的事件處理<head> <metacharset="utf-8"> <title>例13-1</title> <!--引用jquery文件--> <scripttype="text/javascript"src="jquery-3.6.0.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ //頁面加載$("button").bind("click",function(){ //綁定單擊事件 $("p").slideToggle(); //slideToggle()方法通過使用滑動效果（高度變化）來切換元素的可見狀態(tài) }); }); $(document).ready(function(){ $("button").bind({ mouseover:function(){$("h3").css("background-color","#b8b8b8");}, //綁定鼠標懸停事件【例13-2】

為元素綁定事件（以下提供部分代碼）。13.4jQuery的事件處理mouseout:function(){$("h3").css("background-color","#FFFFFF");} //綁定鼠標移出事件 }); }); </script></head><body> <h3>事件綁定</h3> <p>我是P元素</p> <button>按鈕</button></body>【例13-2】

為元素綁定事件（以下提供部分代碼）。13.4jQuery的事件處理【例13-2】

初始頁面效果和觸發(fā)不同事件后的頁面效果如圖所示。為元素綁定事件13.4jQuery的事件處理在jQuery中，使用unbind()方法移除被選元素的事件處理程序，其語法格式為：其中，selector表示被選元素；event是可選項，表示刪除元素的一個或多個事件，多個事件之間用空格分隔；function是可選項，表示從元素的指定事件取消綁定的函數(shù)名。如果兩個參數(shù)都不設(shè)置，則會刪除匹配元素上所有綁定的事件；如果只設(shè)置event參數(shù)，則會刪除綁定到指定事件的所有函數(shù)。

2．移除綁定$(selector).unbind(event,function)【例13-2】

在例13-1中“$("button").bind("click",function(){$("p").slideToggle();});”代碼后面添加以下代碼，移除為按鈕綁定的單擊事件。$("button").unbind("click"); //移除為按鈕綁定的單擊事件13.4jQuery的事件處理在jQuery中，使用one()方法為被選元素綁定一個或多個事件處理程序，并規(guī)定當事件發(fā)生時運行的函數(shù)，其語法格式為：其中，各參數(shù)的含義和用法與bind()方法中的參數(shù)相同。one()方法和bind()方法功能類似，但使用one()方法時，每個元素只能運行一次事件處理，也可以理解為該方法為元素綁定了一次性事件處理。

3．綁定一次性事件處理$(selector).one(event,data,function)13.4jQuery的事件處理$(document).ready(function(){ //頁面加載 $("button").one("click",function(){ //綁定一次性單擊事件 $("p").slideToggle(); });});【例13-3】

為元素綁定事件（以下提供部分代碼），初始頁面效果和觸發(fā)不同事件后的頁面效果如圖所示。綁定一次性單擊事件13.4jQuery的事件處理

jQuery的動畫效果13.513.5jQuery的動畫效果元素的隱藏與顯示是最基本的動畫效果。jQuery提供了兩種控制元素隱藏和顯示的方法，一種是分別隱藏和顯示匹配元素；另一種是切換元素的可見狀態(tài)。

13.5.1元素的隱藏和顯示使用jQuery可以很方便地制作出網(wǎng)頁元素的動畫效果，該動畫效果包括元素的隱藏與顯示、元素的淡入淡出和元素的滑動效果等。13.5jQuery的動畫效果在jQuery中，使用hide()方法隱藏匹配的元素，其語法格式為：其中，speed是可選項，表示元素從可見到隱藏的時長（默認為0），其取值可以為不加英文引號的數(shù)字（如100，表示100毫秒），也可以為加英文引號的參數(shù)（如"slow"、"normal"、"fast"）；callback是可選項，表示執(zhí)行完hide()方法之后需要執(zhí)行的函數(shù)，除非設(shè)置了speed參數(shù)，否則不能設(shè)置該參數(shù)。

1．分別隱藏和顯示匹配元素$(selector).hide(speed,callback)在jQuery中，使用show()方法顯示匹配的元素，其語法格式為：其中，speed是可選項，表示元素從隱藏到可見的時長（默認為0）；callback是可選項，表示執(zhí)行完show()方法之后需要執(zhí)行的函數(shù)。這兩個參數(shù)的用法與hide()方法中的參數(shù)相同。$(selector).show(speed,callback)

1．分別隱藏和顯示匹配元素13.5jQuery的動畫效果在jQuery中，使用toggle()方法切換元素的可見狀態(tài)，即如果元素是可見的，切換為隱藏；如果元素是隱藏的，切換為可見，其語法格式為：其中，speed是可選項，表示隱藏/顯示效果的時長（默認為0）；callback是可選項，表示執(zhí)行完toggle()方法之后需要執(zhí)行的函數(shù)。這兩個參數(shù)的用法與hide()方法中的參數(shù)相同。$(selector).toggle(speed,callback)

2．切換元素的可見狀態(tài)13.5jQuery的動畫效果<head> <metacharset="utf-8"><title>例13-4</title> <scripttype="text/javascript"src="jquery-3.6.0.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(1000); //隱藏p元素 }); $(".btn2").click(function(){ //顯示p元素，然后執(zhí)行showColor函數(shù) $("p").show(1000,showColor); });$(".btn3").click(function(){ $("p").toggle(1000); //切換p元素的顯示狀態(tài) }); });【例13-4】

元素的隱藏和顯示（以下提供部分代碼）。13.5jQuery的動畫效果 functionshowColor(){ //自定義showColor函數(shù) //設(shè)置p元素的背景顏色 $("p").css("background-color","#b8b8b8"); } </script></head><body> <h3>元素的隱藏和顯示</h3> <p>我是P元素</p> <buttonclass="btn1">隱藏</button> <buttonclass="btn2">顯示</button> <buttonclass="btn3">切換</button></body>【例13-4】

元素的隱藏和顯示（以下提供部分代碼）。13.5jQuery的動畫效果【例13-4】

頁面效果如圖所示。元素隱藏和顯示13.5jQuery的動畫效果隱藏和顯示元素時會改變元素的高度和寬度，若開發(fā)過程中不需要改變元素的高度和寬度，只需要單獨改變元素的透明度時，就可以通過元素的淡入淡出效果實現(xiàn)。13.5.2元素的淡入淡出表

實現(xiàn)元素淡入淡出動畫效果的方法表中，speed表示效果的時長，它的取值可以為"slow"、"fast"或毫秒；callback表示淡入/淡出完成后所執(zhí)行的函數(shù)名稱；opacity表示將淡入淡出效果設(shè)置為給定的不透明度（值介于0與1之間）。fadeTo()方法中，speed和opacity是必選項，callback是可選項；其他方法中，speed和callback都是可選項。13.5jQuery的動畫效果jQuery提供了實現(xiàn)元素滑動效果的方法，如表所示。13.5.3元素的滑動效果表

實現(xiàn)元素滑動效果的方法表中，speed是可選項，表示效果的時長，它的取值可以為"slow"、"fast"或毫秒；callback是可選項，表示滑動完成后所執(zhí)行的函數(shù)名稱。13.5jQuery的動畫效果在設(shè)計網(wǎng)頁時，可以在頁面中添加自動隱藏式菜單。這種菜單簡潔易用，在不使用時可以自動隱藏，從而保持頁面整潔。下面帶領(lǐng)大家一起制作自動隱藏式菜單，頁面效果如圖所示。——制作自動隱藏式菜單實戰(zhàn)演練WEB自動隱藏式菜單的頁面效果掃一掃超鏈接步驟1

在HBuilderX中導入本書配套素材“素材與案例\第13章\實戰(zhàn)演練”文件夾，然后打開“13.5.html”文檔?！谱髯詣与[藏式菜單實戰(zhàn)演練WEB超鏈接步驟2

添加頁面內(nèi)容。在<body>…</body>中添加以下代碼設(shè)置隱藏菜單，頁面效果如圖所示?！谱髯詣与[藏式菜單實戰(zhàn)演練WEB<divid="div1">隱藏菜單</div><divid="div2"> <ul> <li><ahref="#">圖書介紹</a></li> <li><ahref="#">新書預(yù)告</a></li> <li><ahref="#">圖書銷售</a></li> <li><ahref="#">聯(lián)系我們</a></li> </ul></div>添加頁面內(nèi)容后的效果超鏈接步驟3

設(shè)置頁面的CSS樣式。在<style>…</style>中添加以下代碼設(shè)置隱藏菜單的樣式，頁面效果如圖所示?！谱髯詣与[藏式菜單實戰(zhàn)演練WEB*{margin:0; padding:0; font-size:30px; text-decoration:none; list-style:none; text-indent:1em;}#div1{width:180px; height:auto; background:#adadad;}#div2{width:180px; height:auto; background:#d6d6d6; display:none;}設(shè)置樣式后的頁面效果超鏈接步驟4

引入jQuery文件并編寫jQuery代碼。在</style>標簽后面添加以下代碼引入jQuery文件并編寫jQuery代碼，實現(xiàn)自動隱藏式菜單，即可得到如圖所示頁面效果?！谱髯詣与[藏式菜單實戰(zhàn)演練WEB<!--引用jQuery文件--><scripttype="text/javascript"src="jquery-3.6.0.min.js"></script><scripttype="text/javascript"> $(document).read