jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第10章 項(xiàng)目實(shí)戰(zhàn)-在線商城

第10章項(xiàng)目實(shí)戰(zhàn)——在線商城《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

熟悉項(xiàng)目分析，能夠歸納項(xiàng)目包含的頁面

熟悉項(xiàng)目初始化，能夠歸納實(shí)施初始項(xiàng)目的具體步驟掌握焦點(diǎn)圖切換功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成代碼的編寫掌握放大鏡功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成代碼的編寫掌握購物車功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成代碼的編寫章節(jié)概述/Summary通過之前的學(xué)習(xí)，相信讀者已經(jīng)能夠熟練使用jQuery。為了幫助讀者更深入地理解與應(yīng)用jQuery，本章將帶領(lǐng)讀者綜合運(yùn)用所學(xué)知識(shí)開發(fā)一個(gè)“在線商城”項(xiàng)目。目錄/Contents任務(wù)10.1項(xiàng)目開發(fā)準(zhǔn)備任務(wù)10.2焦點(diǎn)圖切換任務(wù)10.3放大鏡任務(wù)10.4購物車項(xiàng)目開發(fā)準(zhǔn)備任務(wù)10.1項(xiàng)目分析

先定一個(gè)小目標(biāo)！熟悉項(xiàng)目分析，能夠歸納項(xiàng)目包含的頁面項(xiàng)目分析隨著社會(huì)和科技的不斷進(jìn)步，人們的生活方式在不斷變化。如今，網(wǎng)絡(luò)購物已經(jīng)成為主流的消費(fèi)方式。網(wǎng)絡(luò)購物對(duì)消費(fèi)者來說有許多優(yōu)勢(shì)，例如，能夠節(jié)約購物時(shí)間、降低購物成本，能夠買到豐富多樣的商品。對(duì)于商家而言，通過網(wǎng)絡(luò)銷售商品可以不受場(chǎng)地限制、降低經(jīng)營成本。項(xiàng)目分析“在線商城”項(xiàng)目旨在為商家提供一個(gè)在線平臺(tái)來展示和銷售商品，同時(shí)為消費(fèi)者提供詳細(xì)的商品信息，從而創(chuàng)造便捷的購物體驗(yàn)。本項(xiàng)目的開發(fā)環(huán)境具體如下。操作系統(tǒng)：Windows10或更高版本。瀏覽器：Chrome瀏覽器。編輯器：VisualStudioCode編輯器。項(xiàng)目分析本項(xiàng)目主要包括以下頁面。首頁商品詳情頁購物車頁項(xiàng)目分析1.首頁首頁是“在線購物”網(wǎng)站的入口頁面。由于首頁比較長，這里分為上面部分、中間部分和下面部分進(jìn)行介紹。首頁上面部分的頁面效果如下圖所示。項(xiàng)目分析1.首頁首頁中間部分的頁面效果如下圖所示。項(xiàng)目分析1.首頁首頁下面部分的頁面效果如下圖所示。項(xiàng)目分析1.首頁首頁分為6個(gè)區(qū)域，下面對(duì)各個(gè)區(qū)域進(jìn)行簡要介紹?？旖輰?dǎo)航欄區(qū)域：用于提供快捷導(dǎo)航超鏈接，方便用戶迅速訪問常用功能，包含“請(qǐng)先登錄”“免費(fèi)注冊(cè)”“我的訂單”“會(huì)員中心”“幫助中心”“在線客服”等導(dǎo)航超鏈接。頂部導(dǎo)航欄區(qū)域：包含Logo圖像、“首頁”等導(dǎo)航超鏈接、搜索框、購物車圖標(biāo)。通過單擊購物車圖標(biāo)“”可以跳轉(zhuǎn)到購物車頁。側(cè)邊導(dǎo)航欄區(qū)域：用于展示側(cè)邊導(dǎo)航欄。焦點(diǎn)圖區(qū)域：用于展示焦點(diǎn)圖。精品推薦區(qū)域：用于展示精選的商品的圖像、名稱和價(jià)格。單擊某個(gè)商品，會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的商品詳情頁。底部區(qū)域：用于展示網(wǎng)站的特點(diǎn)，例如價(jià)格親民、物流快捷、質(zhì)量保證，還提供了“關(guān)于我們”“幫助中心”“售后服務(wù)”等導(dǎo)航超鏈接。項(xiàng)目分析2.商品詳情頁單擊首頁中精品推薦區(qū)域中的某個(gè)商品，會(huì)跳轉(zhuǎn)到商品詳情頁。商品詳情頁用于展示商品的詳細(xì)信息。由于商品詳情頁比較長，這里分為上半部分和下半部分進(jìn)行介紹。商品詳情頁上半部分的頁面效果如下圖所示。項(xiàng)目分析2.商品詳情頁在商品詳情頁中使用放大鏡功能的頁面效果如下圖所示。項(xiàng)目分析2.商品詳情頁商品詳情頁的下半部分的頁面效果如下圖所示。項(xiàng)目分析2.商品詳情頁商品詳情頁主要包含3個(gè)區(qū)域，下面對(duì)各個(gè)區(qū)域進(jìn)行簡要介紹。商品信息區(qū)域：用于展示商品信息，包括商品的圖像、名稱、價(jià)格等。同時(shí)，提供放大鏡功能，可以對(duì)商品圖像進(jìn)行放大操作。其中，放大鏡遮罩層用于展示要放大的圖像區(qū)域，小圖為原圖像，大圖為放大后的圖像。商品詳細(xì)信息區(qū)域：用于展示商品的詳細(xì)信息。熱銷榜區(qū)域：用于展示最近熱銷商品的圖像和名稱。項(xiàng)目分析3.購物車頁購物車頁的頁面效果如下圖所示。項(xiàng)目分析購物車頁主要包含兩個(gè)區(qū)域，下面對(duì)各個(gè)區(qū)域進(jìn)行簡要介紹。購物車區(qū)域：用于展示購車中商品的信息。在購物車區(qū)域中可以進(jìn)行全選購物車中的商品、增減商品數(shù)量、刪除商品等操作。結(jié)算區(qū)域：用于計(jì)算購物車中被選中的商品的總件數(shù)和總額。3.購物車頁項(xiàng)目初始化

先定一個(gè)小目標(biāo)！熟悉項(xiàng)目初始化，能夠歸納實(shí)施初始項(xiàng)目的具體步驟項(xiàng)目初始化本書提供了“在線商城”項(xiàng)目的初始代碼，讀者可以將代碼導(dǎo)入創(chuàng)建的項(xiàng)目中，在此基礎(chǔ)上開發(fā)項(xiàng)目功能。項(xiàng)目初始化從本書配套資源中找到本章項(xiàng)目的初始代碼，將文件解壓，保存在指定目錄下，如D:\jQuery\chapter10\shop，并將該目錄作為項(xiàng)目目錄。使用VSCode編輯器打開項(xiàng)目目錄，項(xiàng)目目錄結(jié)構(gòu)如下圖所示。步驟1步驟2如何初始項(xiàng)目項(xiàng)目初始化項(xiàng)目目錄中的文件夾和文件如下表所示。類型文件名稱作用文件夾及其中的文件css用于保存css文件images用于保存圖像文件js\cart.js用于實(shí)現(xiàn)購物車功能js\focus.js用于實(shí)現(xiàn)焦點(diǎn)圖的切換功能js\jquery-3.6.4.min.jsjQuery庫js\mangifer.js用于實(shí)現(xiàn)放大鏡功能文件cart.html購物車頁detail.html商品詳情頁index.html首頁焦點(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ù)的具體要求為單擊首頁中焦點(diǎn)圖區(qū)域的左箭頭“”和右箭頭“”，可以進(jìn)行圖像的切換。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握焦點(diǎn)圖切換功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成代碼的編寫任務(wù)實(shí)現(xiàn)打開index.html文件，從該文件中找到焦點(diǎn)圖區(qū)域的代碼。打開js\focus.js文件，在該文件中編寫邏輯代碼，實(shí)現(xiàn)焦點(diǎn)圖的切換。步驟1步驟2實(shí)現(xiàn)焦點(diǎn)圖切換功能放大鏡任務(wù)10.3任務(wù)需求在網(wǎng)頁設(shè)計(jì)中，放大鏡功能可以為用戶提供更好的視覺體驗(yàn)，同時(shí)增強(qiáng)產(chǎn)品或內(nèi)容的展示效果。此外，它還可以增加頁面的互動(dòng)性，使用戶能夠更深入地探索和了解網(wǎng)頁內(nèi)容。這些好處都有助于提高用戶滿意度，從而促進(jìn)業(yè)務(wù)增長。放大鏡功能的開發(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)打開detail.html文件，從該文件中找到放大鏡區(qū)域的代碼。打開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完成放大鏡功能的開發(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完成放大鏡功能的開發(fā)購物車任務(wù)10.4任務(wù)需求購物車是在線商城的一個(gè)重要功能。在線購物時(shí)，在線商城允許用戶將心儀的商品添加到購物車中，然后繼續(xù)瀏覽網(wǎng)站，最終根據(jù)經(jīng)濟(jì)情況和需求，確定要購買的商品。有了購物車功能，用戶無須馬上下訂單，可以先收集所有可能的選擇，以便更好地進(jìn)行決策和管理購物流程。購物車功能的開發(fā)需求如下。設(shè)計(jì)一個(gè)購物車表格，包含商品、單價(jià)、數(shù)量、小計(jì)、操作列。在購物車表格中，設(shè)計(jì)一個(gè)“全選”復(fù)選框，并給每一件商品提供一個(gè)復(fù)選框。當(dāng)選中“全選”復(fù)選框時(shí)，選中所有商品的復(fù)選框；當(dāng)取消選中“全選”復(fù)選框時(shí)，所有商品的復(fù)選框均不選中。每次選中或取消選中商品復(fù)選框時(shí)進(jìn)行判斷，如果商品復(fù)選框全部被選中，則選中“全選”復(fù)選框，否則不選中“全選”復(fù)選框。在購物車表格的數(shù)量列中，通過文本框顯示每件商品的購買數(shù)量，并提供“+”和“-”兩個(gè)按鈕，用于增減商品數(shù)量，即讓文本框中的數(shù)字加1或者減1。任務(wù)需求在購物車表格的小計(jì)列中，由于初始商品數(shù)量為1，所以小計(jì)為1件商品的價(jià)格。當(dāng)單擊“+”或“-”按鈕時(shí)，將當(dāng)前商品數(shù)量和單價(jià)相乘，并用其替換當(dāng)前商品的小計(jì)中顯示的值。當(dāng)手動(dòng)修改商品數(shù)量時(shí)，商品小計(jì)中的值也需更新。購物車表格的右下方顯示用戶選中的商品的總件數(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)！掌握購物車功能的實(shí)現(xiàn)方法，能夠獨(dú)立完成代碼的編寫任務(wù)實(shí)現(xiàn)打開cart.html文件，找到購物車區(qū)域的注釋，在該注釋下方編寫購物車區(qū)域及結(jié)算區(qū)域的頁面結(jié)構(gòu)。打開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)購物車功能編寫邏輯代碼，當(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