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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第2章jQuery實現(xiàn)多樣化菜單《jQuery前端開發(fā)任務驅動教程》學習目標/Target

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

掌握查找元素的方法，能夠靈活應用查找元素的方法查找頁面元素

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

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

的元素

掌握停止動畫的方法，能夠靈活應用stop()方法停止元素的動畫效果學習目標/Target

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

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

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

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

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

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

<divclass="parent">

<ul>

<liclass="list">第1個列表項</li>

<liclass="listsecond-list">第2個列表項</li>

<liclass="list">第3個列表項</li>

</ul>

<divclass="son">

<p>子元素</p>

</div>

</div>知識儲備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>>>接上頁代碼知識儲備2.查找元素的方法上述代碼執(zhí)行后，打開控制臺查看運行結果，如下圖所示。任務實現(xiàn)

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

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

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

<ul>

<li>美食</li>

<li>服飾</li>

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

<li>家居</li>

</ul>

<script>

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

console.log(index);

</script></body>1.獲取元素索引知識儲備

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

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

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

溫馨提示

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

評論

0/150

提交評論