![jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第10章 項(xiàng)目實(shí)戰(zhàn)-在線商城_第1頁(yè)](http://file4.renrendoc.com/view14/M02/04/3E/wKhkGWdY7LiAAAmJAACUY8c5lRo520.jpg)
![jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第10章 項(xiàng)目實(shí)戰(zhàn)-在線商城_第2頁(yè)](http://file4.renrendoc.com/view14/M02/04/3E/wKhkGWdY7LiAAAmJAACUY8c5lRo5202.jpg)
![jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第10章 項(xiàng)目實(shí)戰(zhàn)-在線商城_第3頁(yè)](http://file4.renrendoc.com/view14/M02/04/3E/wKhkGWdY7LiAAAmJAACUY8c5lRo5203.jpg)
![jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第10章 項(xiàng)目實(shí)戰(zhàn)-在線商城_第4頁(yè)](http://file4.renrendoc.com/view14/M02/04/3E/wKhkGWdY7LiAAAmJAACUY8c5lRo5204.jpg)
![jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第10章 項(xiàng)目實(shí)戰(zhàn)-在線商城_第5頁(yè)](http://file4.renrendoc.com/view14/M02/04/3E/wKhkGWdY7LiAAAmJAACUY8c5lRo5205.jpg)
版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第10章項(xiàng)目實(shí)戰(zhàn)——在線商城《jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target
熟悉項(xiàng)目分析,能夠歸納項(xiàng)目包含的頁(yè)面
熟悉項(xiàng)目初始化,能夠歸納實(shí)施初始項(xiàng)目的具體步驟掌握焦點(diǎn)圖切換功能的實(shí)現(xiàn)方法,能夠獨(dú)立完成代碼的編寫掌握放大鏡功能的實(shí)現(xiàn)方法,能夠獨(dú)立完成代碼的編寫掌握購(gòu)物車功能的實(shí)現(xiàn)方法,能夠獨(dú)立完成代碼的編寫章節(jié)概述/Summary通過(guò)之前的學(xué)習(xí),相信讀者已經(jīng)能夠熟練使用jQuery。為了幫助讀者更深入地理解與應(yīng)用jQuery,本章將帶領(lǐng)讀者綜合運(yùn)用所學(xué)知識(shí)開(kāi)發(fā)一個(gè)“在線商城”項(xiàng)目。目錄/Contents任務(wù)10.1項(xiàng)目開(kāi)發(fā)準(zhǔn)備任務(wù)10.2焦點(diǎn)圖切換任務(wù)10.3放大鏡任務(wù)10.4購(gòu)物車項(xiàng)目開(kāi)發(fā)準(zhǔn)備任務(wù)10.1項(xiàng)目分析
先定一個(gè)小目標(biāo)!熟悉項(xiàng)目分析,能夠歸納項(xiàng)目包含的頁(yè)面項(xiàng)目分析隨著社會(huì)和科技的不斷進(jìn)步,人們的生活方式在不斷變化。如今,網(wǎng)絡(luò)購(gòu)物已經(jīng)成為主流的消費(fèi)方式。網(wǎng)絡(luò)購(gòu)物對(duì)消費(fèi)者來(lái)說(shuō)有許多優(yōu)勢(shì),例如,能夠節(jié)約購(gòu)物時(shí)間、降低購(gòu)物成本,能夠買到豐富多樣的商品。對(duì)于商家而言,通過(guò)網(wǎng)絡(luò)銷售商品可以不受場(chǎng)地限制、降低經(jīng)營(yíng)成本。項(xiàng)目分析“在線商城”項(xiàng)目旨在為商家提供一個(gè)在線平臺(tái)來(lái)展示和銷售商品,同時(shí)為消費(fèi)者提供詳細(xì)的商品信息,從而創(chuàng)造便捷的購(gòu)物體驗(yàn)。本項(xiàng)目的開(kāi)發(fā)環(huán)境具體如下。操作系統(tǒng):Windows10或更高版本。瀏覽器:Chrome瀏覽器。編輯器:VisualStudioCode編輯器。項(xiàng)目分析本項(xiàng)目主要包括以下頁(yè)面。首頁(yè)商品詳情頁(yè)購(gòu)物車頁(yè)項(xiàng)目分析1.首頁(yè)首頁(yè)是“在線購(gòu)物”網(wǎng)站的入口頁(yè)面。由于首頁(yè)比較長(zhǎng),這里分為上面部分、中間部分和下面部分進(jìn)行介紹。首頁(yè)上面部分的頁(yè)面效果如下圖所示。項(xiàng)目分析1.首頁(yè)首頁(yè)中間部分的頁(yè)面效果如下圖所示。項(xiàng)目分析1.首頁(yè)首頁(yè)下面部分的頁(yè)面效果如下圖所示。項(xiàng)目分析1.首頁(yè)首頁(yè)分為6個(gè)區(qū)域,下面對(duì)各個(gè)區(qū)域進(jìn)行簡(jiǎn)要介紹。快捷導(dǎo)航欄區(qū)域:用于提供快捷導(dǎo)航超鏈接,方便用戶迅速訪問(wèn)常用功能,包含“請(qǐng)先登錄”“免費(fèi)注冊(cè)”“我的訂單”“會(huì)員中心”“幫助中心”“在線客服”等導(dǎo)航超鏈接。頂部導(dǎo)航欄區(qū)域:包含Logo圖像、“首頁(yè)”等導(dǎo)航超鏈接、搜索框、購(gòu)物車圖標(biāo)。通過(guò)單擊購(gòu)物車圖標(biāo)“”可以跳轉(zhuǎn)到購(gòu)物車頁(yè)。側(cè)邊導(dǎo)航欄區(qū)域:用于展示側(cè)邊導(dǎo)航欄。焦點(diǎn)圖區(qū)域:用于展示焦點(diǎn)圖。精品推薦區(qū)域:用于展示精選的商品的圖像、名稱和價(jià)格。單擊某個(gè)商品,會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的商品詳情頁(yè)。底部區(qū)域:用于展示網(wǎng)站的特點(diǎn),例如價(jià)格親民、物流快捷、質(zhì)量保證,還提供了“關(guān)于我們”“幫助中心”“售后服務(wù)”等導(dǎo)航超鏈接。項(xiàng)目分析2.商品詳情頁(yè)單擊首頁(yè)中精品推薦區(qū)域中的某個(gè)商品,會(huì)跳轉(zhuǎn)到商品詳情頁(yè)。商品詳情頁(yè)用于展示商品的詳細(xì)信息。由于商品詳情頁(yè)比較長(zhǎng),這里分為上半部分和下半部分進(jìn)行介紹。商品詳情頁(yè)上半部分的頁(yè)面效果如下圖所示。項(xiàng)目分析2.商品詳情頁(yè)在商品詳情頁(yè)中使用放大鏡功能的頁(yè)面效果如下圖所示。項(xiàng)目分析2.商品詳情頁(yè)商品詳情頁(yè)的下半部分的頁(yè)面效果如下圖所示。項(xiàng)目分析2.商品詳情頁(yè)商品詳情頁(yè)主要包含3個(gè)區(qū)域,下面對(duì)各個(gè)區(qū)域進(jìn)行簡(jiǎn)要介紹。商品信息區(qū)域:用于展示商品信息,包括商品的圖像、名稱、價(jià)格等。同時(shí),提供放大鏡功能,可以對(duì)商品圖像進(jìn)行放大操作。其中,放大鏡遮罩層用于展示要放大的圖像區(qū)域,小圖為原圖像,大圖為放大后的圖像。商品詳細(xì)信息區(qū)域:用于展示商品的詳細(xì)信息。熱銷榜區(qū)域:用于展示最近熱銷商品的圖像和名稱。項(xiàng)目分析3.購(gòu)物車頁(yè)購(gòu)物車頁(yè)的頁(yè)面效果如下圖所示。項(xiàng)目分析購(gòu)物車頁(yè)主要包含兩個(gè)區(qū)域,下面對(duì)各個(gè)區(qū)域進(jìn)行簡(jiǎn)要介紹。購(gòu)物車區(qū)域:用于展示購(gòu)車中商品的信息。在購(gòu)物車區(qū)域中可以進(jìn)行全選購(gòu)物車中的商品、增減商品數(shù)量、刪除商品等操作。結(jié)算區(qū)域:用于計(jì)算購(gòu)物車中被選中的商品的總件數(shù)和總額。3.購(gòu)物車頁(yè)項(xiàng)目初始化
先定一個(gè)小目標(biāo)!熟悉項(xiàng)目初始化,能夠歸納實(shí)施初始項(xiàng)目的具體步驟項(xiàng)目初始化本書提供了“在線商城”項(xiàng)目的初始代碼,讀者可以將代碼導(dǎo)入創(chuàng)建的項(xiàng)目中,在此基礎(chǔ)上開(kāi)發(fā)項(xiàng)目功能。項(xiàng)目初始化從本書配套資源中找到本章項(xiàng)目的初始代碼,將文件解壓,保存在指定目錄下,如D:\jQuery\chapter10\shop,并將該目錄作為項(xiàng)目目錄。使用VSCode編輯器打開(kāi)項(xiàng)目目錄,項(xiàng)目目錄結(jié)構(gòu)如下圖所示。步驟1步驟2如何初始項(xiàng)目項(xiàng)目初始化項(xiàng)目目錄中的文件夾和文件如下表所示。類型文件名稱作用文件夾及其中的文件css用于保存css文件images用于保存圖像文件js\cart.js用于實(shí)現(xiàn)購(gòu)物車功能js\focus.js用于實(shí)現(xiàn)焦點(diǎn)圖的切換功能js\jquery-3.6.4.min.jsjQuery庫(kù)js\mangifer.js用于實(shí)現(xiàn)放大鏡功能文件cart.html購(gòu)物車頁(yè)detail.html商品詳情頁(yè)index.html首頁(yè)焦點(diǎn)圖切換任務(wù)10.2任務(wù)需求在網(wǎng)站設(shè)計(jì)中,焦點(diǎn)圖切換功能使多張圖像在限定的空間范圍內(nèi)展示,從而高效地將商品或活動(dòng)等的信息傳遞給用戶。這種設(shè)計(jì)方式不僅能有效吸引用戶的注意,還能激發(fā)他們的探索欲望,引導(dǎo)他們進(jìn)行更深入的互動(dòng),從而提升網(wǎng)站的整體效果和用戶參與度。本任務(wù)的具體要求為單擊首頁(yè)中焦點(diǎn)圖區(qū)域的左箭頭“”和右箭頭“”,可以進(jìn)行圖像的切換。任務(wù)實(shí)現(xiàn)
先定一個(gè)小目標(biāo)!掌握焦點(diǎn)圖切換功能的實(shí)現(xiàn)方法,能夠獨(dú)立完成代碼的編寫任務(wù)實(shí)現(xiàn)打開(kāi)index.html文件,從該文件中找到焦點(diǎn)圖區(qū)域的代碼。打開(kāi)js\focus.js文件,在該文件中編寫邏輯代碼,實(shí)現(xiàn)焦點(diǎn)圖的切換。步驟1步驟2實(shí)現(xiàn)焦點(diǎn)圖切換功能放大鏡任務(wù)10.3任務(wù)需求在網(wǎng)頁(yè)設(shè)計(jì)中,放大鏡功能可以為用戶提供更好的視覺(jué)體驗(yàn),同時(shí)增強(qiáng)產(chǎn)品或內(nèi)容的展示效果。此外,它還可以增加頁(yè)面的互動(dòng)性,使用戶能夠更深入地探索和了解網(wǎng)頁(yè)內(nèi)容。這些好處都有助于提高用戶滿意度,從而促進(jìn)業(yè)務(wù)增長(zhǎng)。放大鏡功能的開(kāi)發(fā)需求如下。當(dāng)鼠標(biāo)指針在小圖中移入時(shí),放大鏡遮罩層和大圖內(nèi)容跟隨鼠標(biāo)指針進(jìn)行移動(dòng)。單擊圖像列表中的圖像時(shí),切換到對(duì)應(yīng)圖像。任務(wù)需求任務(wù)實(shí)現(xiàn)
先定一個(gè)小目標(biāo)!掌握放大鏡功能的實(shí)現(xiàn)方法,能夠獨(dú)立完成代碼的編寫任務(wù)實(shí)現(xiàn)打開(kāi)detail.html文件,從該文件中找到放大鏡區(qū)域的代碼。打開(kāi)js\magnifier.js文件,在該文件中編寫邏輯代碼,當(dāng)鼠標(biāo)指針移入小圖時(shí)顯示放大鏡遮罩層和大圖,當(dāng)鼠標(biāo)指針移出小圖時(shí)隱藏放大鏡遮罩層和大圖。步驟1步驟2編寫邏輯代碼,實(shí)現(xiàn)鼠標(biāo)指針在小圖中移動(dòng)時(shí),放大鏡遮罩層跟隨鼠標(biāo)指針進(jìn)行移動(dòng)的效果。步驟3完成放大鏡功能的開(kāi)發(fā)任務(wù)實(shí)現(xiàn)修改focusMove()方法,在放大鏡遮罩層跟隨鼠標(biāo)指針進(jìn)行移動(dòng)時(shí)計(jì)算移動(dòng)的比例。步驟4編寫邏輯代碼,實(shí)現(xiàn)圖像列表中圖像的切換。步驟7編寫代碼,實(shí)現(xiàn)鼠標(biāo)指針移動(dòng)時(shí)大圖跟隨鼠標(biāo)指針移動(dòng)的效果。步驟5修改mousemove事件,實(shí)現(xiàn)鼠標(biāo)指針在小圖中移動(dòng)時(shí)大圖跟隨鼠標(biāo)指針移動(dòng)效果。步驟6完成放大鏡功能的開(kāi)發(fā)購(gòu)物車任務(wù)10.4任務(wù)需求購(gòu)物車是在線商城的一個(gè)重要功能。在線購(gòu)物時(shí),在線商城允許用戶將心儀的商品添加到購(gòu)物車中,然后繼續(xù)瀏覽網(wǎng)站,最終根據(jù)經(jīng)濟(jì)情況和需求,確定要購(gòu)買的商品。有了購(gòu)物車功能,用戶無(wú)須馬上下訂單,可以先收集所有可能的選擇,以便更好地進(jìn)行決策和管理購(gòu)物流程。購(gòu)物車功能的開(kāi)發(fā)需求如下。設(shè)計(jì)一個(gè)購(gòu)物車表格,包含商品、單價(jià)、數(shù)量、小計(jì)、操作列。在購(gòu)物車表格中,設(shè)計(jì)一個(gè)“全選”復(fù)選框,并給每一件商品提供一個(gè)復(fù)選框。當(dāng)選中“全選”復(fù)選框時(shí),選中所有商品的復(fù)選框;當(dāng)取消選中“全選”復(fù)選框時(shí),所有商品的復(fù)選框均不選中。每次選中或取消選中商品復(fù)選框時(shí)進(jìn)行判斷,如果商品復(fù)選框全部被選中,則選中“全選”復(fù)選框,否則不選中“全選”復(fù)選框。在購(gòu)物車表格的數(shù)量列中,通過(guò)文本框顯示每件商品的購(gòu)買數(shù)量,并提供“+”和“-”兩個(gè)按鈕,用于增減商品數(shù)量,即讓文本框中的數(shù)字加1或者減1。任務(wù)需求在購(gòu)物車表格的小計(jì)列中,由于初始商品數(shù)量為1,所以小計(jì)為1件商品的價(jià)格。當(dāng)單擊“+”或“-”按鈕時(shí),將當(dāng)前商品數(shù)量和單價(jià)相乘,并用其替換當(dāng)前商品的小計(jì)中顯示的值。當(dāng)手動(dòng)修改商品數(shù)量時(shí),商品小計(jì)中的值也需更新。購(gòu)物車表格的右下方顯示用戶選中的商品的總件數(shù)和總額。將所有選中的商品的數(shù)量相加,得到總件數(shù);將所有選中的商品的小計(jì)相加,得到總額。當(dāng)更新復(fù)選框的狀態(tài)時(shí),更新總件數(shù)和總額。當(dāng)用戶更改了商品數(shù)量時(shí),更新總件數(shù)和總額。在操作列中提供“刪除”超鏈接,單擊該超鏈接即可刪除對(duì)應(yīng)商品。任務(wù)需求任務(wù)實(shí)現(xiàn)
先定一個(gè)小目標(biāo)!掌握購(gòu)物車功能的實(shí)現(xiàn)方法,能夠獨(dú)立完成代碼的編寫任務(wù)實(shí)現(xiàn)打開(kāi)cart.html文件,找到購(gòu)物車區(qū)域的注釋,在該注釋下方編寫購(gòu)物車區(qū)域及結(jié)算區(qū)域的頁(yè)面結(jié)構(gòu)。打開(kāi)js\cart.js文件,在該文件中編寫邏輯代碼,當(dāng)選中“全選”復(fù)選框時(shí)所有商品的復(fù)選框都選中,當(dāng)取消選中“全選”復(fù)選框時(shí)所有商品的復(fù)選框均不選中。步驟1步驟2編寫邏輯代碼,每次選中或取消選中商品復(fù)選框時(shí)進(jìn)行判斷,如果商品復(fù)選框全部被選中則選中“全選”復(fù)選框,否則不選中“全選”復(fù)選框。步驟3實(shí)現(xiàn)購(gòu)物車功能編寫邏輯代碼,當(dāng)單擊數(shù)量列中的“+”按鈕時(shí),文本框中的數(shù)字加1。步驟4任務(wù)實(shí)現(xiàn)編寫邏輯代碼,當(dāng)單擊數(shù)量列中的“-”按鈕時(shí),文本框中的數(shù)字減1。步驟5編寫邏輯代碼,當(dāng)手動(dòng)修改商品數(shù)量時(shí)更新小計(jì)的值。步驟8修改“+”按鈕的click事件,計(jì)算小計(jì)的值。步驟6修改“-”按鈕的cl
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝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ù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年業(yè)務(wù)咨詢合同范本
- 2025年新晉策劃商協(xié)議標(biāo)準(zhǔn)版
- 2025年高效電子貨運(yùn)定艙協(xié)議
- 2025年醫(yī)療服務(wù)協(xié)同與發(fā)展協(xié)議
- 2025年債務(wù)擔(dān)保合同示范
- 2025年中行商業(yè)房產(chǎn)貸款合同標(biāo)準(zhǔn)范本
- 2025年供應(yīng)鏈管理業(yè)務(wù)綁定協(xié)議
- 2025年度策劃職員離職信息保密合同
- 2025年個(gè)人養(yǎng)殖魚塘租賃合同模板
- 2025年國(guó)有產(chǎn)權(quán)轉(zhuǎn)讓合同模板
- GB/T 1096-2003普通型平鍵
- GA/T 1163-2014人類DNA熒光標(biāo)記STR分型結(jié)果的分析及應(yīng)用
- 新員工入場(chǎng)安全教育培訓(xùn)課件
- 優(yōu)秀員工榮譽(yù)證書模板
- 2023機(jī)械工程師考試試題及答案
- 精選裝飾工程室內(nèi)拆除專項(xiàng)施工方案
- 人教版數(shù)學(xué)五年級(jí)下冊(cè) 全冊(cè)各單元教材解析
- 2022年二年級(jí)生命安全教育教案
- 豐田汽車戰(zhàn)略規(guī)劃與戰(zhàn)略管理體系研究(2021)
- 公共政策學(xué)(第三版)-課件
- 文物保護(hù)項(xiàng)目可行性研究報(bào)告
評(píng)論
0/150
提交評(píng)論