《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》課件 CH11 jQuery遍歷

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計-第2版學(xué)校名稱：XXXX主講教師：XXXX第11章jQuery遍歷本章學(xué)習(xí)目標(biāo)了解什么是HTML家族樹結(jié)構(gòu)；掌握jQuery后代遍歷相關(guān)函數(shù)children()、find()的使用；掌握jQuery同胞遍歷相關(guān)函數(shù)siblings()、next()系列函數(shù)、prev()系列函數(shù)的使用；掌握jQuery祖先遍歷相關(guān)函數(shù)parent()、parents()、parentsUntil()的使用。目錄11.1HTML家族樹簡介 11.2jQuery后代遍歷 11.3jQuery同胞遍歷

11.4jQuery祖先遍歷11.5階段案例：仿電商購物車效果

11.1HTML家族樹簡介同一個HTML頁面上的所有元素按照層次關(guān)系可以形成樹狀結(jié)構(gòu)，這種結(jié)構(gòu)稱為家族樹（FamilyTree）。最常見的遍歷方式統(tǒng)稱為樹狀遍歷（TreeTraversal）。11.1HTML家族樹簡介根據(jù)移動的層次方向可以分為向下移動（后代遍歷）、水平移動（同胞遍歷）和向上移動（祖先遍歷）。其中后代遍歷指的是元素的子、孫、曾孫元素等；同胞遍歷指的是具有同一個父元素的其他元素；祖先遍歷指的是元素的父、祖父、曾祖父元素等。11.1HTML家族樹簡介例如以下這段HTML代碼：<div><ul> <li>item01</li> <li>item02</li> </ul> <p>

這是一個<span>段落元素</span> </p></div>11.1HTML家族樹簡介元素關(guān)系解釋如下：<div>元素：是無序列表元素<ul>和段落元素<p>的父元素，同時也是其他所有元素的祖先元素。<ul>元素：是兩個列表選項元素<li>的父元素，也是<div>的子元素。與段落元素<p>互為同胞元素。<p>元素：是<span>元素的父元素，也是<div>的子元素。與無序列表元素<ul>互為同胞元素。<li>元素：是<ul>元素的子元素，同時也是<div>元素的后代。兩個<li>元素互為同胞元素。<span>元素：是<p>元素的子元素，同時也是<div>元素的后代。該元素沒有同胞元素。11.2jQuery后代遍歷jQuery后代遍歷指的是以指定元素為出發(fā)點，遍歷該元素內(nèi)部包含的子、孫、曾孫等后代元素，直到全部查找完畢。常用的方法有：children()：查找元素的直接子元素。find()：查找元素的全部后代，直到查找到最后一層元素。11.2jQuery后代遍歷11.2.1jQuerychildren() 11.2.2jQueryfind()11.2.1jQuerychildren()jQuerychildren()方法只能查找指定元素的第一層子元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的子元素。.children([selector])11.2.1jQuerychildren()如果不填寫任何參數(shù)，則表示查找所有的子元素。例如：上述代碼表示查找HTML頁面上所有段落元素<p>的子元素。$("p").children()11.2.1jQuerychildren()如果加上參數(shù)，可以進(jìn)一步匹配子元素。例如：上述代碼表示在HTML頁面上所有段落元素<p>中查找class="style01"的子元素。$("p").children(".style01")11.2.1jQuerychildren()【例11-1】jQuery后代遍歷children()方法的應(yīng)用11.2.2jQueryfind()jQueryfind()方法可用于查找指定元素的所有后代元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的子元素。.find(selector)11.2.2jQueryfind()例如：上述代碼表示在段落元素<p>中找到所有的<span>元素，并為其設(shè)置1像素寬的紅色實線邊框。$("p").find("span").css("border","1pxsolidred");11.2.2jQueryfind()selector參數(shù)位置也可以填入元素對象。例如上述代碼可以改寫為以下內(nèi)容：修改后的代碼運(yùn)行效果完全相同。varspans=$("span");$("p").find(spans).css("border","1pxsolidred");11.2.2jQueryfind()【例11-2】jQuery后代遍歷find()方法的應(yīng)用11.3jQuery同胞遍歷jQuery同胞遍歷指的是以指定元素為出發(fā)點，遍歷與該元素具有相同父元素的同胞元素，直到全部查找完畢。11.3jQuery同胞遍歷常用的方法有：siblings()：查找指定元素的所有同胞元素。next()：查找指定元素的下一個同胞元素。nextAll()：查找指定元素后面的所有同胞元素。nextUntil()：查找指定元素后面指定范圍內(nèi)的所有同胞元素。prev()：查找指定元素的前一個同胞元素。prevAll()：查找指定元素前面的所有同胞元素。prevUntil()：查找指定元素前面指定范圍內(nèi)的所有同胞元素。11.3jQuery同胞遍歷11.3.1jQuerysiblings() 11.3.2jQuerynext()、nextAll()和nextUtil() 11.3.3jQueryprev()、prevAll()和prevUtil() 11.3.1jQuerysiblings()jQuerysiblings()方法可以查找指定元素的其他所有同胞元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。.siblings([selector])11.3.1jQuerysiblings()如果不填寫任何參數(shù)，則表示查找所有的子元素。例如：上述代碼表示查找段落元素<p>的所有同胞元素。$("p").siblings()11.3.1jQuerysiblings()如果加上參數(shù)，可以進(jìn)一步匹配子元素。例如：上述代碼表示查找所有與段落元素<p>具有相同的父元素，并且class="style01"的元素。$("p").siblings(".style01")11.3.1jQuerysiblings()【例11-3】jQuery同胞遍歷siblings()方法的應(yīng)用11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()jQuerynext()方法可以查找指定元素的下一個同胞元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。.next([selector])11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()如果不填寫任何參數(shù)，則表示查找指定元素的下一個同胞元素。例如：上述代碼表示查找段落元素<p>的下一個同胞元素。$("p").next()11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()如果加上參數(shù)，可以進(jìn)一步匹配同胞元素。例如：上述代碼表示查找段落元素<p>的下一個同胞元素，并且該元素必須帶有class="style01"屬性，否則認(rèn)為沒有找到匹配元素。$("p").next(".style01")11.3.2jQuerynext()、nextAll()和nextUtil()2. jQuerynextAll()jQuerynextAll()方法可以查找指定元素后面的全部同胞元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。.nextAll([selector])11.3.2jQuerynext()、nextAll()和nextUtil()2. jQuerynextAll()如果不填寫任何參數(shù)，則表示查找指定元素后面的所有同胞元素。例如：上述代碼表示查找段落元素<p>后面所有的同胞元素。$("p").nextAll()11.3.2jQuerynext()、nextAll()和nextUtil()2. jQuerynextAll()如果加上參數(shù)，可以進(jìn)一步匹配子元素。例如：上述代碼表示查找class="style01"并在位置處于段落元素<p>后面的所有同胞元素。$("p").nextAll(".style01")11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()jQuerynextUntil()方法可以查找從指定元素開始，往后水平遍歷直到指定元素結(jié)束的所有同胞元素，不包括作為結(jié)束標(biāo)識的元素本身。其語法結(jié)構(gòu)如下：其中selector和filter參數(shù)均為可選內(nèi)容，可填入有效的jQuery選擇器。參數(shù)selector表示水平遍歷同胞元素時的結(jié)束位置，參數(shù)filter表示進(jìn)一步篩選指定范圍內(nèi)的同胞元素。.nextUntil([selector][,filter])11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()例如以下這種情況：<div><pid="test1">第一個子元素</p><pid="test2">第二個子元素</p><pid="test3">第三個子元素</p><span>第四個子元素</span></div>11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()使用nextUntil()方法如下：上述語句表示從id="test1"的段落元素<p>后面開始查找其同胞元素，直到<span>元素為止，不包括結(jié)尾的<span>元素本身。查找結(jié)果為：$("p#test1").nextUntil("span")<pid="test2">第二個子元素</p><pid="test3">第三個子元素</p>11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()如果加上filter參數(shù)，可以進(jìn)一步篩選指定范圍內(nèi)的同胞元素。例如：上述語句則表示在上述結(jié)果中進(jìn)一步篩選id="test3"的元素。查找結(jié)果為：$("p#test1").nextUntil("span","#test3")<pid="test3">第三個子元素</p>11.3.2jQuerynext()、nextAll()和nextUtil()【例11-4】jQuery同胞遍歷next()、nextAll()、nextUntil()方法的應(yīng)用11.3.3jQueryprev()、prevAll()和prevUtil()1. jQueryprev()jQueryprev()方法可以查找指定元素的前一個同胞元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。.prev([selector])11.3.3jQueryprev()、prevAll()和prevUtil()1. jQueryprev()如果不填寫任何參數(shù)，則表示查找指定元素的前一個同胞元素。例如：上述代碼表示查找列表選項元素<li>的前一個同胞元素。$("li").prev()11.3.3jQueryprev()、prevAll()和prevUtil()1. jQueryprev()如果加上參數(shù)，可以進(jìn)一步匹配同胞元素。例如：上述代碼表示查找列表選項元素<li>的前一個同胞元素，并且該元素必須帶有class="style01"屬性，否則認(rèn)為沒有找到匹配元素。$("li").prev(".style01")11.3.3jQueryprev()、prevAll()和prevUtil()2. jQueryprevAll()jQueryprevAll()方法可以查找指定元素前面的全部同胞元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。.prevAll([selector])11.3.3jQueryprev()、prevAll()和prevUtil()2. jQueryprevAll()如果不填寫任何參數(shù)，則表示查找指定元素前面的所有同胞元素。例如：上述代碼表示查找id="test"的<div>元素前面所有的同胞元素。$("div#test").prevAll()11.3.3jQueryprev()、prevAll()和prevUtil()2. jQueryprevAll()如果加上參數(shù)，可以進(jìn)一步匹配同胞元素。例如：上述代碼表示查找class="style01"并且處于id="test"的<div>元素前面的所有同胞元素。$("div#test").prevAll(".style01")11.3.3jQueryprev()、prevAll()和prevUtil()3. jQueryprevUntil()jQueryprevUntil()方法可以查找從指定元素開始，往前水平遍歷直到指定元素結(jié)束的所有同胞元素，不包括作為結(jié)束標(biāo)識的元素本身。其語法結(jié)構(gòu)如下：其中selector和filter參數(shù)均為可選內(nèi)容，可填入有效的jQuery選擇器。參數(shù)selector表示水平遍歷同胞元素時的結(jié)束位置，參數(shù)filter表示進(jìn)一步篩選指定范圍內(nèi)的同胞元素。.prevUntil([selector][,filter])11.3.3jQueryprev()、prevAll()和prevUtil()3. jQueryprevUntil()例如以下這種情況：<div><pid="test1">第一個子元素</p><pid="test2">第二個子元素</p><pid="test3">第三個子元素</p><span>第四個子元素</span></div>11.3.3jQueryprev()、prevAll()和prevUtil()3. jQueryprevUntil()使用prevUntil()方法如下：上述語句表示從<span>元素開始向前查找其同胞元素，直到id=“test1”的段落元素<p>為止，不包括id=“test1”的段落元素<p>本身。查找結(jié)果為：$("span").prevUntil("p#test1")<pid="test2">第二個子元素</p><pid="test3">第三個子元素</p>11.3.3jQueryprev()、prevAll()和prevUtil()3. jQueryprevUntil()如果加上filter參數(shù)，可以進(jìn)一步篩選指定范圍內(nèi)的同胞元素。例如：上述語句則表示在上述結(jié)果中進(jìn)一步篩選id="test2"的元素。查找結(jié)果為：$("span").prevUntil("p#test1","#test2")<pid="test2">第二個子元素</p>11.3.3jQueryprev()、prevAll()和prevUtil()【例11-5】jQuery同胞遍歷prev()、prevAll()、prevUntil()方法的應(yīng)用11.4jQuery祖先遍歷jQuery祖先遍歷指的是以指定元素為出發(fā)點，遍歷該元素的父、祖父、曾祖父元素等，直到全部查找完畢。11.4jQuery祖先遍歷常用的方法有：parent()：查找指定元素的直接父元素。parents()：查找指定元素的所有祖先元素。parentsUntil()：查找指定元素向上指定范圍的所有祖先元素。11.4jQuery祖先遍歷11.4.1jQueryparent() 11.4.2jQueryparents() 11.4.3jQueryparentsUntil() 11.4.1jQueryparent()jQueryparent()方法可以查找指定元素的直接父元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。.parent([selector])11.4.1jQueryparent()如果不填寫任何參數(shù)，則表示查找所有的子元素。例如：上述代碼表示查找所有段落元素<p>的直接父元素。$("p").parent()11.4.1jQueryparent()如果加上參數(shù)，可以進(jìn)一步匹配父元素。例如：上述代碼表示查找既是段落元素<p>的父元素，也是class="style01"的元素。$("p").parent(".style01")11.4.1jQueryparent()【例11-6】jQuery祖先遍歷parent()方法的應(yīng)用11.4.2jQueryparents()jQueryparents()方法可以查找指定元素的所有祖先元素，其語法結(jié)構(gòu)如下：其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的祖先元素。.parents([selector])11.4.2jQueryparents()如果不填寫任何參數(shù)，則表示查找所有的祖先元素。例如：上述代碼表示查找段落元素<p>的所有祖先元素。$("p").parents()11.4.2jQueryparents()如果加上參數(shù)，可以進(jìn)一步匹配祖先元素。例如：上述代碼表示在段落元素<p>全部祖先元素中查找class="style01"的元素。$("p").parents(".style01")11.4.2jQueryparents()【例11-7】jQuery祖先遍歷parents()方法的應(yīng)用11.4.3jQueryparentsUntil()jQueryparentsUntil()方法可以查找指定元素的其他所有同胞元素，其語法結(jié)構(gòu)如下：其中selector和filter參數(shù)均為可選內(nèi)容，可填入有效的jQuery選擇器。參數(shù)selector表示向上遍歷祖先元素時的結(jié)束位置，參數(shù)filter表示進(jìn)一步篩選指定范圍內(nèi)的祖先元素。.parentsUntil([selector][,filter])11.4.3jQueryparentsUntil()例如：上述代碼表示查找段落元素<p>的所有同胞元素。$("p").parentsUntil()11.4.3jQueryparentsUntil()例如以下這種情況：<divid="layer01">曾祖父元素div<divid="layer02">祖父元素div<ul>父元素ul<li>列表選項元素li</li></ul></div></div>11.4.3jQueryparentsUntil()使用parentsUntil()方法如下：上述語句表示從<li>元素開始向上追溯其祖先元素，直到<divid="layer01">元素為止，不包括<divid="layer01">元素本身。查找結(jié)果為：$("li").parentsUntil("div#layer01")<divid="layer02">祖父元素div<ul>父元素ul</ul></div>11.4.3jQueryparentsUntil()如果加上filter參數(shù)，可以進(jìn)一步篩選指定范圍內(nèi)的同胞元素。使用parentsUntil()方法如下：上述語句表示從<li>元素向上查找id="layer02"的祖先元素，并且其查找范圍不可超過id="layer01"的<div>元素。查找結(jié)果為：$("li").parentsUntil("div#layer01","#layer02")<divid="layer02">祖父元素div</div>11.4.3jQueryparentsUntil()【例11-8】jQuery祖先遍歷parentsUntil()方法的應(yīng)用11.5階段案例：仿電商購物車效果11.5.1案例需求11.5.2界面設(shè)計11.5.3邏輯實現(xiàn)11.5.4案例思考11.5.1案例需求使用jQuery制作一款仿電商購物車效果界面，可以展示購物車中的商品圖片、描述、單價、數(shù)量、總金額等內(nèi)容。購物車中的每款商品均可以調(diào)整數(shù)量或刪除。用戶可以勾選其中一個或多個商品進(jìn)行結(jié)算，底部工具欄會根據(jù)已勾選商品的單價和數(shù)量自動計算并顯示需要結(jié)算的總金額。11.5.2界面設(shè)計1.整體布局本案例直接使用表格<table>來實現(xiàn)整個布局，表格分為表頭標(biāo)簽、商品列表明細(xì)和底部結(jié)算工具欄三個區(qū)域組成。結(jié)構(gòu)如圖所示。11.5.2界面設(shè)計1.整體布局創(chuàng)建一個HTML文件，文件名可自定義，例如ShoppingCart.html。在HTML5中使用<tableid="shoppingCart">元素聲明購物車區(qū)域，在其中劃分若干個單元行<tr>，以5行為例：第1行為表頭標(biāo)簽，第2-4行為商品列表區(qū)域，最后1行為結(jié)算工具欄。相關(guān)代碼如下：1.<body>2.<!--標(biāo)題-->3.<h3>仿電商購物車效果</h3>4.<!--水平線-->5.<hr>6.<!--購物車表格-->7.<tableid="shoppingCart">8.<!--1表頭標(biāo)簽-->9.<tr></tr>10.<!--2商品列表區(qū)域開始-->11.<!--2-1商品1-->12.<trclass="goodsBox"></tr>13.<!--2-2商品2-->14.<trclass="goodsBox"></tr>15.<!--2-3商品3-->16.<trclass="goodsBox"></tr>17.<!--3結(jié)算區(qū)域-->18.<tr></tr>19.</table>20.</body>21.</html>11.5.2界面設(shè)計1.整體布局本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建cart.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對CSS文件的引用。相關(guān)HTML5代碼片段如下：在CSS外部樣式表中設(shè)置公共樣式以及表格基礎(chǔ)樣式，相關(guān)CSS代碼如下：1.<head>2.<metacharset="utf-8">3.<title>仿電商購物車效果</title>4.<linkrel="stylesheet"href="css/cart.css">5.</head>1./*公共樣式*/2.body{3.background-color:#f5f5f5;/*背景顏色灰白色*/4.text-align:center;/*文本居中*/5.}11.5.2界面設(shè)計1.整體布局為表格設(shè)置基礎(chǔ)樣式，相關(guān)CSS代碼如下：1./*購物車區(qū)域表格*/2.#shoppingCart{3.width:990px;/*寬度990px*/4.background-color:white;/*背景顏色白色*/5.border-radius:20px;/*圓角邊框*/6.margin:0auto;/*外邊距上下0左右auto*/7.}8./*購物車區(qū)域表格-單元行*/9.#shoppingCarttr{10.height:50px;/*高度50px*/11.}12./*購物車區(qū)域表格-單元格*/13.#shoppingCarttd{14.text-align:center;/*文本居中*/15.padding:20px10px;/*內(nèi)邊距上下20px左右10px*/16.}11.5.2界面設(shè)計2.表頭設(shè)置表格中的第一行<tr>內(nèi)部使用<th>標(biāo)簽設(shè)置7個表頭，代碼如下：1.<!--購物車表格-->2.<tableid="shoppingCart">3.<!--1表頭標(biāo)簽-->4.<tr>5.<th>選擇</th>6.<th>商品圖片</th>7.<th>商品信息</th>8.<th>單價</th>9.<th>數(shù)量</th>10.<th>金額</th>11.<th>操作</th>12.</tr>13.<!--2商品列表區(qū)域開始（…代碼略…）-->14.<!--3結(jié)算區(qū)域（…代碼略…）-->15.</table>注：開發(fā)者也可以根據(jù)實際需求變更標(biāo)簽名稱或表頭標(biāo)簽的數(shù)量，但是需要注意讓商品列表中每一行單元格的數(shù)量與表頭保持一致。11.5.2界面設(shè)計3.商品列表表格中的第2-4行<tr>內(nèi)部均使用<td>標(biāo)簽設(shè)置7個單元格與表頭標(biāo)簽對應(yīng)，由于這3行的元素結(jié)構(gòu)完全一樣，節(jié)選第2行<tr>中的商品相關(guān)代碼如下：1.<!--購物車表格-->2.<tableid="shoppingCart">3.<!--1表頭標(biāo)簽（…代碼略…）-->4.<!--2商品列表區(qū)域開始-->5.<!--2-1商品1-->6.<trclass="goodsBox">7.<!--(1）多選框-->8.<td><inputtype="checkbox"></td>9.<!--(2）商品圖片-->10.<td><imgclass="goods"alt=""src="image/1.jpg"/></td>11.<!--(3）商品信息-->12.<td>Huawei/華為暢享50</td>13.<!--(4）單價-->14.<td>￥<spanclass="unit_price">1299.00</span></td>15.<!--(5）數(shù)量-->16.<td>其中商品1的圖片來自于image目錄下的1.jpg，開發(fā)者可以參照商品1的信息自行為商品2和3添加一些模擬數(shù)據(jù)。11.5.2界面設(shè)計3.商品列表17.<!--(5）數(shù)量-減號按鈕-->18.<buttonclass="minusBtn">-</button>19.<!--(5）數(shù)量-文本框-->20.<inputclass="goods_num"type="text"value="1"/>21.<!--(5）數(shù)量-加號按鈕-->22.<buttonclass="plusBtn">+</button>23.</td>24.<!--(6）金額-->25.<td>￥<spanclass="price">1299.00</span></td>26.<!--(7）操作-->27.<td><buttonclass="delBtn">刪除</button></td>28.</tr>29.<!--2-2商品2（…代碼略，參照商品1修改數(shù)據(jù)可得…）-->30.<!--2-3商品3（…代碼略，參照商品1修改數(shù)據(jù)可得…）-->31.<!--3結(jié)算區(qū)域（…代碼略…）-->32.</table>11.5.2界面設(shè)計3.商品列表在CSS外部樣式表中為商品圖片以及商品數(shù)量文本框設(shè)置樣式，相關(guān)CSS代碼如下：/*商品列表區(qū)域-商品圖片*/.goodsBoximg.goods{ width:80px;/*寬度80px*/ height:80px;/*高度80px*/ display:block;/*顯示為塊級元素*/ margin:0auto;/*外邊距上下0，左右居中*/}/*商品列表區(qū)域-文本輸入框*/.goodsBoxinput[type='text']{ width:25px;/*寬度25px*/ text-align:center;/*文本水平方向居中*/}此時商品列表區(qū)域的樣式就完成了。11.5.2界面設(shè)計4.結(jié)算區(qū)域結(jié)算區(qū)域不需要按照表頭標(biāo)簽拆分，可以用一個<td>單元格配合屬性colspan="7"來實現(xiàn)合并7個單元格豎列。其內(nèi)部使用<divid="toolbar">表示結(jié)算工具欄，該工具欄分為左右結(jié)構(gòu)：左邊區(qū)域是全選框和“清空購物車”按鈕，右邊區(qū)域是結(jié)算總金額文本和“結(jié)算”按鈕。11.5.2界面設(shè)計4.結(jié)算區(qū)域1.<!--購物車表格-->2.<tableid="shoppingCart">3.<!--1表頭標(biāo)簽（…代碼略…）-->4.<!--2商品列表區(qū)域開始（…代碼略…）--->5.<!--3結(jié)算區(qū)域-->6.<tr>7.<tdcolspan="7">8.<!--3-1結(jié)算區(qū)域-工具欄-->9.<divid="toolbar">10.<!--3-1-1結(jié)算區(qū)域-工具欄-左側(cè)-->11.<divid="leftArea">12.<!--(1)全選框-->13.<span><inputclass="selectAll"type="checkbox">全選</span>14.<!--(2)清空購物車按鈕-->15.<buttonclass="clearBtn">清空購物車</button>16.</div>17.<!--3-1-2結(jié)算區(qū)域-工具欄-右側(cè)-->18.<divid="rightArea">19.<!--(1)合計金額-->20.<span>合計（不含運(yùn)費(fèi)）：￥<spanclass="total_price">0.00</span></span>21.<!--(2)結(jié)算-->22.<buttonclass="submitBtn">結(jié)算</button>23.</div>24.</div>25.</td>26.</tr>27.</table>此段代碼使用<divid="leftArea">和<divid="rightArea">分別表示結(jié)算工具欄中的左右區(qū)域，并使用<inputtype="checkbox">制作全選框；工具欄中的文本內(nèi)容均使用<span>實現(xiàn)，其中總金額先默認(rèn)寫為初始值“0.00”，且使用<spanclass="total_price">方便后續(xù)查找更新；“結(jié)算”按鈕和“清空購物車”按鈕均使用<button>實現(xiàn)。11.5.2界面設(shè)計4.結(jié)算區(qū)域在CSS外部樣式表中為結(jié)算工具欄及其內(nèi)部的按鈕設(shè)置樣式，相關(guān)CSS代碼如下：1. /*工具欄區(qū)域*/2. #toolbar{3. display:flex;/*flex彈性布局*/4. flex-direction:row;/*水平方向布局*/5. align-items:center;/*垂直方向居中*/6. justify-content:space-between;/*垂直方向組件間距相等*/7. padding:015px;/*內(nèi)邊距上下0，左右15px*/8. }9. /*工具欄區(qū)域-清空購物車按鈕*/10. #toolbar.clearBtn{11. margin-left:15px;/*外邊距左側(cè)15px*/12.}13. /*工具欄區(qū)域-結(jié)算按鈕*/14. #toolbar.submitBtn{15. width:70px;/*寬度70px*/16. height:40px;/*高度40px*/17. line-height:40px;/*行高40px*/18. background-color:#FF5000;/*背景顏色*/19. color:white;/*文字顏色為白色*/20. font-size:16px;/*字體大小16px*/21. border-radius:20px;/*圓角邊框效果，圓角半徑為20px*/22. margin-left:15px;/*外邊距左側(cè)15px*/23. outline:none;/*無外輪廓*/24. border:none;/*無邊框*/25. cursor:pointer;/*光標(biāo)顯示為超鏈接手狀指針*/26.}11.5.2界面設(shè)計4.結(jié)算區(qū)域此時CSS樣式設(shè)置就全部完成了，運(yùn)行效果如圖所示。11.5.3邏輯實現(xiàn)1.整體邏輯購物車中的各類操作動作均需要使用到j(luò)Query的相關(guān)功能，因此首先在<head>標(biāo)簽中添加對于jQuery的調(diào)用。在js文件夾中創(chuàng)建cart.js文件，并在ShoppingCart.html文件的<head>首尾標(biāo)簽中聲明對JS文件的引用。相關(guān)HTML5代碼修改后如下：1.<head>2.<metacharset="utf-8">3.<title>仿電商購物車效果</title>4.<linkrel="stylesheet"href="css/cart.css">5.<scriptsrc="js/jquery-1.12.3.min.js"></script>6.<scriptsrc="js/cart.js"></script>7.</head>11.5.3邏輯實現(xiàn)1.整體邏輯本案例涉及到的所有操作邏輯都來自于商品列表區(qū)域和結(jié)算工具欄區(qū)域。其中商品列表區(qū)域的相關(guān)功能如下：單個商品勾選/取消：變更當(dāng)前勾選框和全選框狀態(tài)，更新結(jié)算總金額。加/減號按鈕點擊事件：商品數(shù)量每次加/減1，更新當(dāng)前商品總價及結(jié)算總金額；數(shù)量文本框輸入事件：顯示用戶輸入的整數(shù)，更新當(dāng)前商品總價及結(jié)算總金額；“刪除”按鈕事件：刪除對應(yīng)的商品列表行并更新結(jié)算總金額；結(jié)算工具欄區(qū)域的相關(guān)功能如下：全選框勾選/取消：勾選/取消時聯(lián)動變更全部商品勾選框和結(jié)算總金額；“清空購物車”按鈕點擊事件：清除全部商品列表行，結(jié)算總金額為0。11.5.3邏輯實現(xiàn)1.整體邏輯在cart.js文件的文檔準(zhǔn)備就緒函數(shù)中按照上面總結(jié)的功能先進(jìn)行注釋劃分好內(nèi)容區(qū)域：1.//文檔準(zhǔn)備就緒2.$(document).ready(function(){3.//=====================4.//1商品列表區(qū)域事件5.//=====================6.//1-1單個商品勾選框點擊事件7.//1-2減號按鈕點擊事件8.//1-3加號按鈕點擊事件9.//1-4商品數(shù)量文本框輸入事件10.//1-5刪除按鈕點擊事件11.12.//=====================13.//2結(jié)算工具欄區(qū)域事件14.//=====================15.//2-1全選勾選框點擊事件16.//2-2清空購物車按鈕點擊事件17.});11.5.3邏輯實現(xiàn)2.函數(shù)封裝從所有需要實現(xiàn)的功能邏輯中可以總結(jié)出兩個頻繁被使用的功能：一是更新當(dāng)前商品總價，二是更新底部工具欄的結(jié)算總金額。在cart.js文件中新增自定義函數(shù)updatePrice()和updateTotalPrice()分別來實現(xiàn)這兩個功能模塊方便后續(xù)被其它事件調(diào)用。updatePrice()代碼如下：1.//函數(shù)封裝-更新指定商品總價2.//參數(shù)td：數(shù)量控件所在的父單元格對象3.//參數(shù)num：商品數(shù)量4.functionupdatePrice(td,num){5.//獲取當(dāng)前產(chǎn)品單價6.varunit_price=td.prev().children(".unit_price").text();7.//計算當(dāng)前商品總價(保留2位小數(shù))8.varprice=(unit_price*num).toFixed(2);9.//更新當(dāng)前商品總價10.td.next().children(".price").text(price);11.}11.5.3邏輯實現(xiàn)2.函數(shù)封裝從所有需要實現(xiàn)的功能邏輯中可以總結(jié)出兩個頻繁被使用的功能：一是更新當(dāng)前商品總價，二是更新底部工具欄的結(jié)算總金額。在cart.js文件中新增自定義函數(shù)updatePrice()和updateTotalPrice()分別來實現(xiàn)這兩個功能模塊方便后續(xù)被其它事件調(diào)用。updatePrice()代碼如下：1.//函數(shù)封裝-更新指定商品總價2.//參數(shù)td：數(shù)量控件所在的父單元格對象3.//參數(shù)num：商品數(shù)量4.functionupdatePrice(td,num){5.//獲取當(dāng)前產(chǎn)品單價6.varunit_price=td.prev().children(".unit_price").text();7.//計算當(dāng)前商品總價(保留2位小數(shù))8.varprice=(unit_price*num).toFixed(2);9.//更新當(dāng)前商品總價10.td.next().children(".price").text(price);11.}上述代碼用到了jQuery同胞遍歷prev()和next()分別獲取參數(shù)單元格td（注：包含加減號按鈕和數(shù)量文本框的單元格，即每行第5個單元格）的前后兩個單元格對象，使用jQuery后代遍歷children(".unit_price")獲得單價后通過計算然后使用children(".price")更新當(dāng)前商品總價。11.5.3邏輯實現(xiàn)2.函數(shù)封裝updateTotalPrice()代碼如下：1.//函數(shù)封裝-更新結(jié)算總金額2.functionupdateTotalPrice(){3.//查找所有商品單元行中的勾選框元素4.varcheckArr=$(".goodsBoxinput:checkbox");5.//初始化結(jié)算總金額6.vartotal_price=0;7.//遍歷所有元素檢查是否被勾選8.for(vari=0;i<checkArr.length;i++){9.//確認(rèn)當(dāng)前元素被勾選10.if(checkArr.eq(i).is(":checked")){11.varprice=checkArr.eq(i).parents(".goodsBox").find(".price").text();12.//將當(dāng)前金額轉(zhuǎn)為數(shù)字類型并加入總金額13.total_price+=Number(price);14.}15.}16.//頁面上更新結(jié)算總金額17.$(".total_price").text(total_price.toFixed(2));18.}上述代碼先使用$(".goodsBoxinput:checkbox")查找所有class="goodsBox"的<tr>單元行內(nèi)的勾選框元素<inputtype="checkbox">，其返回值是一個數(shù)組對象。遍歷該數(shù)組對象依次確認(rèn)每個勾選框是否為選中狀態(tài)，如有選中的勾選框則使用jQuery祖先遍歷parents(".goodsBox")獲取當(dāng)前勾選框的祖先元素<tr>單元行，再使用jQuery后代遍歷find(".price")獲得當(dāng)前商品的總價并加入結(jié)算總金額。最后在頁面上更新結(jié)算總金額且保留2位小數(shù)。11.5.3邏輯實現(xiàn)3.商品列表邏輯1)單個商品勾選/取消當(dāng)某一行商品的勾選框被勾選或取消時，更新底部結(jié)算工具欄中的總金額。如果這是購物車中最后一件被勾選的商品，則將勾選結(jié)算工具欄中的全選按鈕；如果是取消勾選，則讓結(jié)算工具欄中的全選按鈕變更為非勾選狀態(tài)。在cart.js中使用$(".goodsBoxinput:checkbox")來監(jiān)聽商品勾選框的點擊事件，相關(guān)代碼如下：1.//1-1單個商品勾選框點擊事件2.$(".goodsBoxinput:checkbox").click(function(){3.//標(biāo)記全選框是否需要勾選4.varisAll=true;//先默認(rèn)要勾上全選5.6.//當(dāng)前勾選框被勾選7.if($(this).is(":checked")){8.//查找所有商品單元行中的勾選框元素9.varcheckArr=$(".goodsBoxinput:checkbox");10.//遍歷所有元素檢查是否被勾選11.for(vari=0;i<checkArr.length;i++){12.//如果當(dāng)前元素未被勾選13.if(!checkArr.eq(i).is(":checked")){14.isAll=false;//取消全選15.break;//停止遍歷16.}17.}18.}19.//當(dāng)前勾選框取消勾選20.else{21.isAll=false;//取消全選22.}23.//更新全選勾選框的勾選狀態(tài)24.$(".selectAll").prop("checked",isAll);25.//更新結(jié)算總價26.updateTotalPrice();27.});11.5.3邏輯實現(xiàn)3.商品列表邏輯1)單個商品勾選/取消上述代碼表示當(dāng)任意一個勾選框被點擊時，如果當(dāng)前動作是勾選，則遍歷所有商品勾選框看其他商品是否也全都是勾選狀態(tài)，先默認(rèn)標(biāo)記全選框為選中狀態(tài)，只要遍歷時有任意一個沒被選中則標(biāo)記全選框為取消狀態(tài)；如果當(dāng)前動作是取消也是標(biāo)記全選框為取消狀態(tài)。最后更新全選框狀態(tài)和結(jié)算總價。11.5.3邏輯實現(xiàn)3.商品列表邏輯2)加減號按鈕點擊事件減號按鈕被點擊時需要將數(shù)量文本框中的數(shù)字減1，達(dá)到最小數(shù)量1則不再變化，并且更新當(dāng)前商品總價以及底部結(jié)算工具欄中的總金額。在cart.js中使用$(".minusBtn")來監(jiān)聽減號按鈕的點擊事件，相關(guān)代碼如下：1.//1-2減號按鈕點擊事件2.$(".minusBtn").click(function(){3.//查找商品數(shù)量文本輸入框，并獲得取值4.varnum=$(this).siblings("input").val();5.//最少要選1個商品，所以必須數(shù)量大于1才有動作6.if(num>1){7.//商品數(shù)量減少18.num--;9.//更新商品數(shù)量文本輸入框內(nèi)的取值10.$(this).siblings("input").val(num);11.//更新當(dāng)前商品總金額12.updatePrice($(this).parent(),num);13.//更新結(jié)算總價14.updateTotalPrice();15.}16.});上述代碼先使用jQuery同胞遍歷siblings("input")獲取當(dāng)前減號按鈕同一個單元格中的文本輸入框<input>元素，即數(shù)量文本輸入框?qū)ο蟛@取其中的數(shù)值（商品數(shù)量）。判斷數(shù)量大于1時才可以有后續(xù)動作：商品數(shù)量減少1，然后分別更新數(shù)量文本框中顯示的數(shù)字、當(dāng)前商品總金額以及結(jié)算總價。11.5.3邏輯實現(xiàn)3.商品列表邏輯2)加減號按鈕點擊事件加號按鈕被點擊時將數(shù)量文本框中的數(shù)字加1，達(dá)到最大數(shù)量999則不再變化，并且更新當(dāng)前商品總價以及底部結(jié)算工具欄中的總金額。在cart.js中使用$(".plusBtn")來監(jiān)聽加號按鈕的點擊事件，相關(guān)代碼如下：1.//1-3加號按鈕點擊事件2.$(".plusBtn").click(function(){3.//查找同胞元素文本輸入框，并獲得取值4.varnum=$(this).siblings("input").val();5.//最多不可以超過999個商品6.if(num<999){7.//商品數(shù)量增加18.num++;9.//更新文本輸入框內(nèi)的取值10.$(this).siblings("input").val(num);11.//更新當(dāng)前商品總金額12.updatePrice($(this).parent(),num);13.//更新結(jié)算總價14.updateTotalPrice();15.}16.});上述代碼先使用jQuery同胞遍歷siblings("input")獲取當(dāng)前加號按鈕同一個單元格中的文本輸入框<input>元素，即數(shù)量文本輸入框?qū)ο蟛@取其中的數(shù)值（商品數(shù)量）。判斷數(shù)量小于默認(rèn)最大值999時才可以有后續(xù)動作：商品數(shù)量增加1，然后分別更新數(shù)量文本框中顯示的數(shù)字、當(dāng)前商品總金額以及結(jié)算總價。11.5.3邏輯實現(xiàn)3.商品列表邏輯2)加減號按鈕點擊事件運(yùn)行效果如圖所示。11.5.3邏輯實現(xiàn)3.商品列表邏輯3)數(shù)量文本框輸入事件用戶在數(shù)量文本框輸入內(nèi)容時，輸入的內(nèi)容和顯示結(jié)果對應(yīng)關(guān)系如下：輸入有效范圍[1,999]之間的整數(shù)：顯示用戶輸入的數(shù)字；輸入超出范圍的數(shù)字：就近顯示1或999，例如輸入0則顯示1，輸入1000則顯示999；輸入非數(shù)字：顯示數(shù)字1，例如輸入“abc”則顯示1；輸入小數(shù)：自動四舍五入取整，例如輸入“3.14”則自動顯示為3。最后更新當(dāng)前商品總價以及底部結(jié)算工具欄中的總金額。11.5.3邏輯實現(xiàn)3.商品列表邏輯3)數(shù)量文本框輸入事件在cart.js中使用$(".goods_num")來監(jiān)聽文本輸入框的change事件，相關(guān)代碼如下：1.//1-4商品數(shù)量文本框輸入事件2.$(".goods_num").change(function(){3.//獲取當(dāng)前輸入的文本4.varnum=$(".goods_num").val();5.//判斷有效性6.if(isNaN(num)||num<1){//如果不是數(shù)字或小于17.num=1;//強(qiáng)制更新數(shù)量為18.}elseif(num>999){//如果大于9999.num=999;//強(qiáng)制更新數(shù)量為99910.}elseif(num%1!==0){//如果不是整數(shù)11.num=Number(num).toFixed(0);//四舍五入為整數(shù)12.}13.//更新顯示的數(shù)值14.$(this).val(num);15.//更新當(dāng)前商品總金額16.updatePrice($(this).parent(),num);17.//更新結(jié)算總價18.updateTotalPrice();19.});上述代碼先獲得了用戶輸入在數(shù)量文本框中的內(nèi)容，然后根據(jù)規(guī)則判斷有效性并重新調(diào)整應(yīng)該顯示的數(shù)字，最后當(dāng)文本框失去焦點時把正確的數(shù)字顯示出來，并依次更新當(dāng)前商品總金額和結(jié)算總價。11.5.3邏輯實現(xiàn)3.商品列表邏輯3)數(shù)量文本框輸入事件運(yùn)行效果如圖所示。11.5.3邏輯實現(xiàn)3.商品列表邏輯4)“刪除”按鈕點擊事件“刪除”按鈕被點擊時彈窗提醒用戶做二次確認(rèn)，當(dāng)用戶再次確認(rèn)刪除時去掉對應(yīng)的商品列表行并更新底部結(jié)算工具欄中的總金額。在cart.js中使用$(".