jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第2章 jQuery實(shí)現(xiàn)多樣化菜單_第1頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第2章 jQuery實(shí)現(xiàn)多樣化菜單_第2頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第2章 jQuery實(shí)現(xiàn)多樣化菜單_第3頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第2章 jQuery實(shí)現(xiàn)多樣化菜單_第4頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第2章 jQuery實(shí)現(xiàn)多樣化菜單_第5頁(yè)
已閱讀5頁(yè)，還剩48頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第2章jQuery實(shí)現(xiàn)多樣化菜單《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

掌握顯示和隱藏元素的方法，能夠使用顯示和隱藏元素的方法實(shí)現(xiàn)頁(yè)面特效

掌握查找元素的方法，能夠靈活應(yīng)用查找元素的方法查找頁(yè)面元素

掌握元素索引的獲取方法，能夠使用index()方法獲取元素索引

掌握利用索引取出元素的方法，能夠使用eq()方法從元素集中取出指定索引

的元素

掌握停止動(dòng)畫的方法，能夠靈活應(yīng)用stop()方法停止元素的動(dòng)畫效果學(xué)習(xí)目標(biāo)/Target

掌握下拉菜單的實(shí)現(xiàn)方法，能夠完成下拉菜單的開發(fā)

掌握折疊式菜單的實(shí)現(xiàn)方法，能夠完成折疊式菜單的開發(fā)

掌握熱賣展示菜單的實(shí)現(xiàn)方法，能夠完成熱賣展示菜單的開發(fā)

掌握左進(jìn)左出導(dǎo)航菜單的實(shí)現(xiàn)方法，能夠完成左進(jìn)左出導(dǎo)航菜單的開發(fā)章節(jié)概述/Summary菜單是網(wǎng)站和應(yīng)用程序的重要組成部分，可以有效地呈現(xiàn)網(wǎng)站和應(yīng)用程序的信息結(jié)構(gòu)。合理地設(shè)計(jì)菜單的層次結(jié)構(gòu)和分類方式，可以清晰地展示不同頁(yè)面或功能模塊之間的關(guān)系，幫助用戶了解網(wǎng)站的整體布局，讓用戶快速地訪問不同的頁(yè)面，降低操作難度，提高用戶的使用體驗(yàn)。本章將詳細(xì)講解如何使用jQuery實(shí)現(xiàn)多樣化菜單。目錄/Contents任務(wù)2.1任務(wù)2.2下拉菜單折疊式菜單任務(wù)2.3任務(wù)2.4熱賣展示菜單左進(jìn)左出導(dǎo)航菜單下拉菜單任務(wù)2.1任務(wù)需求為了進(jìn)一步推廣傳統(tǒng)文化，某傳統(tǒng)文化研究院正在打造一個(gè)傳統(tǒng)文化精品展示網(wǎng)站，該網(wǎng)站將為專家、學(xué)者、傳統(tǒng)文化愛好者等提供一個(gè)學(xué)習(xí)和交流傳統(tǒng)文化的平臺(tái)。為了提升用戶體驗(yàn)，網(wǎng)站的產(chǎn)品經(jīng)理建議使用下拉菜單的形式來優(yōu)化導(dǎo)航欄，實(shí)現(xiàn)當(dāng)用戶將鼠標(biāo)指針移入一級(jí)菜單項(xiàng)后，在一級(jí)菜單項(xiàng)的下方展示二級(jí)菜單項(xiàng)，讓用戶獲得更多的選擇。任務(wù)需求一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)傳統(tǒng)工藝剪紙、陶瓷、刺繡傳統(tǒng)戲劇京劇、川劇、粵劇傳統(tǒng)節(jié)日春節(jié)、端午節(jié)、重陽(yáng)節(jié)傳統(tǒng)樂器二胡、琵琶、編鐘一級(jí)菜單項(xiàng)以及相應(yīng)的二級(jí)菜單項(xiàng)具體如下表所示。任務(wù)需求下拉菜單的效果如下圖所示。知識(shí)儲(chǔ)備1.顯示和隱藏元素的方法

先定一個(gè)小目標(biāo)！掌握顯示和隱藏元素的方法，能夠使用顯示和隱藏元素的方法實(shí)現(xiàn)頁(yè)面特效知識(shí)儲(chǔ)備在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)通過控制元素的顯示和隱藏來實(shí)現(xiàn)頁(yè)面特效。jQuery提供了用于顯示和隱藏元素的方法，這些方法都支持添加動(dòng)畫效果，添加動(dòng)畫效果可以使元素在顯示或隱藏時(shí)以動(dòng)畫的形式呈現(xiàn)。1.顯示和隱藏元素的方法知識(shí)儲(chǔ)備1.顯示和隱藏元素的方法方法說明show([duration][,easing][,complete])顯示匹配的元素hide([duration][,easing][,complete])隱藏匹配的元素toggle([duration][,easing][,complete])切換元素的顯示和隱藏jQuery中用于顯示和隱藏元素的方法如下表所示。知識(shí)儲(chǔ)備1.顯示和隱藏元素的方法下面對(duì)參數(shù)duration、easing和complete進(jìn)行講解。duration表示動(dòng)畫的持續(xù)時(shí)間，可設(shè)置為以毫秒為單位的動(dòng)畫時(shí)長(zhǎng)（如1000），或預(yù)定的3種速度（slow、fast和normal），默認(rèn)值為400。easing表示切換效果，默認(rèn)值為swing（開始和結(jié)束時(shí)速度慢，中間速度快），還可以設(shè)置為linear（勻速）。complete表示在動(dòng)畫完成后執(zhí)行的函數(shù)。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握查找元素的方法，能夠靈活應(yīng)用查找元素的方法查找頁(yè)面元素2.查找元素的方法知識(shí)儲(chǔ)備在實(shí)際開發(fā)中，當(dāng)使用jQuery選擇器或其他方式獲取元素后，可能還需要進(jìn)一步查找與已獲取元素相關(guān)的元素，此時(shí)可以使用jQuery提供的查找元素的方法。2.查找元素的方法知識(shí)儲(chǔ)備2.查找元素的方法方法說明children([selector])獲取當(dāng)前元素集中每個(gè)元素的所有直接子元素find(selector|element)獲取當(dāng)前元素集中每個(gè)元素的后代元素parents([selector])獲取當(dāng)前元素集中每個(gè)元素的祖先元素（不包含根元素）parent([selector])獲取當(dāng)前元素集中每個(gè)元素的直接父元素siblings([selector])獲取當(dāng)前元素集中每個(gè)元素的所有兄弟元素（不分前后）next([selector])獲取當(dāng)前元素集中每個(gè)元素緊鄰的后一個(gè)兄弟元素prev([selector])獲取當(dāng)前元素集中每個(gè)元素緊鄰的前一個(gè)兄弟元素jQuery中常用的查找元素的方法具體如下表所示。知識(shí)儲(chǔ)備2.查找元素的方法下面通過代碼演示元素查找方法的使用方法，示例代碼如下。<body>

<divclass="parent">

<ul>

<liclass="list">第1個(gè)列表項(xiàng)</li>

<liclass="listsecond-list">第2個(gè)列表項(xiàng)</li>

<liclass="list">第3個(gè)列表項(xiàng)</li>

</ul>

<divclass="son">

<p>子元素</p>

</div>

</div>知識(shí)儲(chǔ)備2.查找元素的方法<script>

console.log($('.parent').find('p'));

console.log($('.second-list').parents('.parent'));

console.log($('.second-list').siblings());

console.log($('ul').next('.list'));

</script></body>>>接上頁(yè)代碼知識(shí)儲(chǔ)備2.查找元素的方法上述代碼執(zhí)行后，打開控制臺(tái)查看運(yùn)行結(jié)果，如下圖所示。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握下拉菜單的實(shí)現(xiàn)方法，能夠完成下拉菜單的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter02目錄，將jquery-3.6.4.min.js文件放入該目錄，并使用VSCode編輯器打開該目錄。創(chuàng)建dropDownMenu.html文件，編寫頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2實(shí)現(xiàn)下拉菜單的開發(fā)編寫下拉菜單頁(yè)面的樣式。編寫邏輯代碼，首先使用選擇器獲取元素，然后注冊(cè)mouseover事件和mouseout事件，實(shí)現(xiàn)當(dāng)鼠標(biāo)指針移入一級(jí)菜單項(xiàng)時(shí)顯示二級(jí)菜單項(xiàng)，當(dāng)鼠標(biāo)指針移出一級(jí)菜單項(xiàng)時(shí)隱藏二級(jí)菜單項(xiàng)。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開dropDownMenu.html文件，將鼠標(biāo)指針移至“傳統(tǒng)工藝”下的“陶瓷”菜單項(xiàng)上，下拉菜單的運(yùn)行結(jié)果如下圖所示。折疊式菜單任務(wù)2.2任務(wù)需求為了更好地管理公司各部門，某科技公司要對(duì)辦公系統(tǒng)進(jìn)行升級(jí)，幫助用戶可以快速地查看公司的各部門和子部門。項(xiàng)目經(jīng)理提出，需要在部門管理頁(yè)面中開發(fā)一個(gè)折疊式菜單，當(dāng)用戶單擊一級(jí)菜單項(xiàng)時(shí)，展開對(duì)應(yīng)的二級(jí)菜單項(xiàng)。任務(wù)需求一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)行政部物資采購(gòu)部、后勤保障部、行政辦公室財(cái)務(wù)部財(cái)務(wù)核算部、稅務(wù)管理部、薪資管理部技術(shù)部Java研發(fā)部、Python研發(fā)部、PHP研發(fā)部市場(chǎng)部北京事業(yè)部、上海事業(yè)部、深圳事業(yè)部折疊式菜單的一級(jí)菜單項(xiàng)和二級(jí)菜單項(xiàng)如下表所示。任務(wù)需求折疊式菜單的效果如下圖所示。

先定一個(gè)小目標(biāo)！掌握折疊式菜單的實(shí)現(xiàn)方法，能夠完成折疊式菜單的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建foldingMenu.html文件，編寫折疊式菜單的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫折疊式菜單頁(yè)面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)菜單的折疊效果。步驟3實(shí)現(xiàn)折疊式菜單的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開foldingMenu.html文件，單擊一級(jí)菜單中的“財(cái)務(wù)部”，折疊式菜單的運(yùn)行結(jié)果如下圖所示。熱賣展示菜單任務(wù)2.3任務(wù)需求某電商公司是一家利用互聯(lián)網(wǎng)技術(shù)和電子商務(wù)模式進(jìn)行商品銷售的企業(yè)。為了提供更加便利的購(gòu)物渠道，該電商公司需要開發(fā)一個(gè)新的電商網(wǎng)站。在電商網(wǎng)站的開發(fā)過程中，需要設(shè)計(jì)一個(gè)熱賣展示菜單，該菜單用于展示熱賣的9種商品，并支持快速切換商品。當(dāng)鼠標(biāo)指針移動(dòng)到熱賣展示菜單左側(cè)的某個(gè)選項(xiàng)上時(shí)，右側(cè)的圖像區(qū)域顯示對(duì)應(yīng)的商品圖。其中，熱賣的商品包括茶具、文具、毛巾、羽絨服、靴子、耳機(jī)、收納盒、吉他和珠寶。任務(wù)需求熱賣展示菜單的效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握元素索引的獲取方法，能夠使用index()方法獲取元素索引1.獲取元素索引知識(shí)儲(chǔ)備1.獲取元素索引當(dāng)需要獲取一個(gè)元素在其父元素中的位置索引時(shí)，可以使用index()方法。在jQuery中，index()方法用于獲取元素的索引，該方法的語(yǔ)法格式如下。index([selector|element])在上述語(yǔ)法格式中，selector表示選擇器，element表示元素，這兩個(gè)參數(shù)只能二選一。如果省略所有參數(shù)，則該方法返回當(dāng)前元素在其同級(jí)元素中的索引。索引從0開始遞增。知識(shí)儲(chǔ)備下面通過代碼演示index()方法的使用方法，示例代碼如下。<body>

<ul>

<li>美食</li>

<li>服飾</li>

<liclass="target">數(shù)碼</li>

<li>家居</li>

</ul>

<script>

varindex=$('.target').index();

console.log(index);

</script></body>1.獲取元素索引知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握利用索引取出元素的方法，能夠使用eq()方法從元素集中取出指定索引的元素2.根據(jù)索引取出元素知識(shí)儲(chǔ)備2.根據(jù)索引取出元素當(dāng)一個(gè)元素集合中存在多個(gè)元素時(shí)，如果需要在元素集合中選擇某個(gè)特定的元素進(jìn)行操作，可以使用eq()方法。在jQuery中，eq()方法用于從元素集合中取出指定索引的元素，該方法的語(yǔ)法格式如下。eq(index)在上述語(yǔ)法格式中，參數(shù)index表示元素在元素集中的索引。知識(shí)儲(chǔ)備下面通過代碼演示eq()方法的使用方法，示例代碼如下。<body>

<ulid="list">

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

</ul>

<script>

$('#listli').eq(0).css('color','blue');

</script></body>2.根據(jù)索引取出元素

先定一個(gè)小目標(biāo)！掌握熱賣展示菜單的實(shí)現(xiàn)方法，能夠完成熱賣展示菜單的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建directionMenu.html文件，編寫熱賣展示菜單的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫熱賣展示菜單頁(yè)面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)當(dāng)鼠標(biāo)指針懸停在菜單左側(cè)的某個(gè)選項(xiàng)上時(shí)，菜單右側(cè)顯示對(duì)應(yīng)圖片的效果。步驟3實(shí)現(xiàn)熱賣展示菜單的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開directionMenu.html文件，當(dāng)鼠標(biāo)指針懸停在菜單左側(cè)的“毛巾”上時(shí)，熱賣展示菜單的運(yùn)行結(jié)果如下圖所示。左進(jìn)左出導(dǎo)航菜單任務(wù)2.4任務(wù)需求隨著互聯(lián)網(wǎng)和移動(dòng)技術(shù)的快速發(fā)展，外賣行業(yè)呈現(xiàn)出快速增長(zhǎng)的趨勢(shì)。某外賣企業(yè)為了提高管理效率，決定開發(fā)一個(gè)外賣點(diǎn)餐后臺(tái)管理系統(tǒng)。在這個(gè)項(xiàng)目中，項(xiàng)目經(jīng)理提出需要開發(fā)一個(gè)帶有左進(jìn)左出效果的導(dǎo)航菜單頁(yè)面，具體要求是單擊一級(jí)菜單項(xiàng)時(shí)，一級(jí)菜單項(xiàng)下的二級(jí)菜單能夠以從屏幕左側(cè)滑入的方式顯示；再次單擊一級(jí)菜單項(xiàng)時(shí)，二級(jí)菜單能夠以從屏幕左側(cè)滑出的方式隱藏，從而實(shí)現(xiàn)左進(jìn)左出導(dǎo)航菜單效果。任務(wù)需求一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)首頁(yè)管理無(wú)菜品管理菜品列表、添加菜品套餐管理套餐列表、添加套餐訂單管理訂單列表、添加訂單員工管理員工列表、添加員工左進(jìn)左出導(dǎo)航菜單的一級(jí)菜單項(xiàng)和二級(jí)菜單項(xiàng)具體如下表所示。任務(wù)需求左進(jìn)左出導(dǎo)航菜單的效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握停止動(dòng)畫的方法，能夠靈活應(yīng)用stop()方法停止元素的動(dòng)畫效果停止動(dòng)畫的方法知識(shí)儲(chǔ)備如果在同一個(gè)元素上調(diào)用了一個(gè)以上的帶有動(dòng)畫效果的方法，則除了當(dāng)前正在播放的動(dòng)畫，其他動(dòng)畫將被放到一個(gè)隊(duì)列中，這樣就形成了動(dòng)畫隊(duì)列。動(dòng)畫隊(duì)列中的動(dòng)畫都是按照順序播放的，默認(rèn)只有當(dāng)?shù)?個(gè)動(dòng)畫播放完畢，才會(huì)播放下一個(gè)動(dòng)畫。如果想立即播放下一個(gè)動(dòng)畫，則需要停止當(dāng)前正在播放的動(dòng)畫。停止動(dòng)畫的方法知識(shí)儲(chǔ)備使用jQuery提供的stop()方法可以停止動(dòng)畫，該方法的語(yǔ)法格式如下。stop([clearQueue][,jumpToEnd])參數(shù)clearQueue是布爾值，表示是否刪除動(dòng)畫隊(duì)列中的動(dòng)畫，默認(rèn)值為false；參數(shù)jumpToEnd也是布爾值，表示是否立即完成當(dāng)前動(dòng)畫的播放，默認(rèn)值為false。停止動(dòng)畫的方法知識(shí)儲(chǔ)備在程序中調(diào)用stop()方法時(shí)，如果設(shè)置的參數(shù)不同，則實(shí)現(xiàn)的效果也不同。下面以div元素為例，演示stop()方法的3種常見使用方式，示例

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論