《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》 教案 第11、12章 jQuery遍歷；jQuery AJAX技術(shù)

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》教案第11章jQuery遍歷一、教學(xué)目標(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()的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery后代和同胞遍歷相關(guān)函數(shù)的用法；難點(diǎn)：jQuery祖先遍歷相關(guān)函數(shù)的用法。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：jQuery遍歷指的是在HTML頁面上沿著某個(gè)指定元素節(jié)點(diǎn)位置進(jìn)行移動(dòng)，直到查找到需要的HTML元素為止。本章主要內(nèi)容是jQuery遍歷技術(shù)的應(yīng)用，包括HTML家族樹概念的介紹、jQuery后代遍歷、同胞遍歷以及祖先遍歷的相關(guān)函數(shù)用法。五、教學(xué)基本內(nèi)容：11.1HTML家族樹簡介同一個(gè)HTML頁面上的所有元素按照層次關(guān)系可以形成樹狀結(jié)構(gòu)，這種結(jié)構(gòu)稱為家族樹（FamilyTree）。最常見的遍歷方式統(tǒng)稱為樹狀遍歷（TreeTraversal）。根據(jù)移動(dòng)的層次方向可以分為向下移動(dòng)（后代遍歷）、水平移動(dòng)（同胞遍歷）和向上移動(dòng)（祖先遍歷）。其中后代遍歷指的是元素的子、孫、曾孫元素等；同胞遍歷指的是具有同一個(gè)父元素的其他元素；祖先遍歷指的是元素的父、祖父、曾祖父元素等。例如以下這段HTML代碼：<div><ul><li>item01</li><li>item02</li></ul><p>這是一個(gè)<span>段落元素</span></p></div>將上述代碼轉(zhuǎn)換為家族樹結(jié)構(gòu)關(guān)系，如圖11-1所示。圖11-1HTML家族樹結(jié)構(gòu)圖示例元素關(guān)系解釋如下：<div>元素：是無序列表元素<ul>和段落元素<p>的父元素，同時(shí)也是其他所有元素的祖先元素。<ul>元素：是兩個(gè)列表選項(xiàng)元素<li>的父元素，也是<div>的子元素。與段落元素<p>互為同胞元素。<p>元素：是<span>元素的父元素，也是<div>的子元素。與無序列表元素<ul>互為同胞元素。<li>元素：是<ul>元素的子元素，同時(shí)也是<div>元素的后代。兩個(gè)<li>元素互為同胞元素。<span>元素：是<p>元素的子元素，同時(shí)也是<div>元素的后代。該元素沒有同胞元素。11.2jQuery后代遍歷jQuery后代遍歷指的是以指定元素為出發(fā)點(diǎn)，遍歷該元素內(nèi)部包含的子、孫、曾孫等后代元素，直到全部查找完畢。常用的方法有：children()：查找元素的直接子元素。find()：查找元素的全部后代，直到查找到最后一層元素。11.2.1jQuerychildren()jQuerychildren()方法只能查找指定元素的第一層子元素，其語法結(jié)構(gòu)如下：.children([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的子元素。如果不填寫任何參數(shù)，則表示查找所有的子元素。例如：$("p").children()上述代碼表示查找HTML頁面上所有段落元素<p>的子元素。如果加上參數(shù)，可以進(jìn)一步匹配子元素。例如：$("p").children(".style01")上述代碼表示在HTML頁面上所有段落元素<p>中查找class="style01"的子元素。【例11-1】jQuery后代遍歷children()方法的應(yīng)用以本章一開始介紹的家族樹結(jié)構(gòu)圖（圖11-1）為例，使用jQuerychildren()方法查找<div>元素的所有子元素。11.2.2jQueryfind()jQueryfind()方法可用于查找指定元素的所有后代元素，其語法結(jié)構(gòu)如下：.find(selector)其中selector參數(shù)可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的子元素。例如：$("p").find("span").css("border","1pxsolidred");上述代碼表示在段落元素<p>中找到所有的<span>元素，并為其設(shè)置1像素寬的紅色實(shí)線邊框。selector參數(shù)位置也可以填入元素對(duì)象。例如上述代碼可以改寫為以下內(nèi)容：varspans=$("span");$("p").find(spans).css("border","1pxsolidred");修改后的代碼運(yùn)行效果完全相同?！纠?1-2】jQuery后代遍歷find()方法的應(yīng)用以本章一開始介紹的家族樹結(jié)構(gòu)圖（圖11-1）為例，使用jQueryfind()方法查找<div>元素的所有后代元素。11.3jQuery同胞遍歷jQuery同胞遍歷指的是以指定元素為出發(fā)點(diǎn)，遍歷與該元素具有相同父元素的同胞元素，直到全部查找完畢。常用的方法有：siblings()：查找指定元素的所有同胞元素。next()：查找指定元素的下一個(gè)同胞元素。nextAll()：查找指定元素后面的所有同胞元素。nextUntil()：查找指定元素后面指定范圍內(nèi)的所有同胞元素。prev()：查找指定元素的前一個(gè)同胞元素。prevAll()：查找指定元素前面的所有同胞元素。prevUntil()：查找指定元素前面指定范圍內(nèi)的所有同胞元素。11.3.1jQuerysiblings()jQuerysiblings()方法可以查找指定元素的其他所有同胞元素，其語法結(jié)構(gòu)如下：.siblings([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。如果不填寫任何參數(shù)，則表示查找所有的子元素。例如：$("p").siblings()上述代碼表示查找段落元素<p>的所有同胞元素。如果加上參數(shù)，可以進(jìn)一步匹配子元素。例如：$("p").siblings(".style01")上述代碼表示查找所有與段落元素<p>具有相同的父元素，并且class="style01"的元素?！纠?1-3】jQuery同胞遍歷siblings()方法的應(yīng)用以本章一開始介紹的家族樹結(jié)構(gòu)圖（圖11-1）為例，使用jQuerysiblings()方法查找其中段落元素<p>的同胞元素?！敬a說明】本示例使用jQuerysiblings()方法查找的是段落元素<p>的同胞元素。由圖可見，查找結(jié)果是將無序列表元素<ul>添加了粉色背景與1像素寬的紅色實(shí)線邊框樣式。11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()jQuerynext()方法可以查找指定元素的下一個(gè)同胞元素，其語法結(jié)構(gòu)如下：.next([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。如果不填寫任何參數(shù)，則表示查找指定元素的下一個(gè)同胞元素。例如：$("p").next()上述代碼表示查找段落元素<p>的下一個(gè)同胞元素。如果加上參數(shù)，可以進(jìn)一步匹配同胞元素。例如：$("p").next(".style01")上述代碼表示查找段落元素<p>的下一個(gè)同胞元素，并且該元素必須帶有class="style01"屬性，否則認(rèn)為沒有找到匹配元素。2. jQuerynextAll()jQuerynextAll()方法可以查找指定元素后面的全部同胞元素，其語法結(jié)構(gòu)如下：.nextAll([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。如果不填寫任何參數(shù)，則表示查找指定元素后面的所有同胞元素。例如：$("p").nextAll()上述代碼表示查找段落元素<p>后面所有的同胞元素。如果加上參數(shù)，可以進(jìn)一步匹配子元素。例如：$("p").nextAll(".style01")上述代碼表示查找class="style01"并在位置處于段落元素<p>后面的所有同胞元素。3. jQuerynextUntil()jQuerynextUntil()方法可以查找從指定元素開始，往后水平遍歷直到指定元素結(jié)束的所有同胞元素，不包括作為結(jié)束標(biāo)識(shí)的元素本身。其語法結(jié)構(gòu)如下：.nextUntil([selector][,filter])其中selector和filter參數(shù)均為可選內(nèi)容，可填入有效的jQuery選擇器。參數(shù)selector表示水平遍歷同胞元素時(shí)的結(jié)束位置，參數(shù)filter表示進(jìn)一步篩選指定范圍內(nèi)的同胞元素。例如以下這種情況：<div><pid="test1">第一個(gè)子元素</p><pid="test2">第二個(gè)子元素</p><pid="test3">第三個(gè)子元素</p><span>第四個(gè)子元素</span></div>使用nextUntil()方法如下：$("p#test1").nextUntil("span")上述語句表示從id="test1"的段落元素<p>后面開始查找其同胞元素，直到<span>元素為止，不包括結(jié)尾的<span>元素本身。查找結(jié)果為：<pid="test2">第二個(gè)子元素</p><pid="test3">第三個(gè)子元素</p>如果加上filter參數(shù)，可以進(jìn)一步篩選指定范圍內(nèi)的同胞元素。例如：$("p#test1").nextUntil("span","#test3")上述語句則表示在上述結(jié)果中進(jìn)一步篩選id="test3"的元素。查找結(jié)果為：<pid="test3">第三個(gè)子元素</p>【例11-4】jQuery同胞遍歷next()、nextAll()、nextUntil()方法的應(yīng)用分別使用jQuerynext()、nextAll()和nextUntil()方法匹配指定元素的同胞元素?！敬a說明】本示例中包含了祖父元素<div>、父元素<ul>以及五個(gè)測(cè)試需要使用的列表選項(xiàng)元素<li>。以第一個(gè)<li>元素作為指定元素，用jQuery選擇器$("li:eq(0)")表示。查找該元素后面的相關(guān)同胞元素并將其樣式設(shè)置為1像素寬的紅色實(shí)線邊框加上粉色背景。由圖可見，圖(a)顯示的是頁面初始加載的效果，當(dāng)前尚未選擇任何元素。圖(b)顯示的是使用next()方法查找并標(biāo)記$("li:eq(0)")的后一個(gè)同胞元素，即第二個(gè)<li>元素。圖(c)顯示的是使用nextAll()方法查找并標(biāo)記$("li:eq(0)")后面所有同胞元素，即第二至五個(gè)<li>元素。圖(d)顯示的是使用nextUnitl()方法查找并標(biāo)記$("li:eq(0)")后面的同胞元素，直到第四個(gè)<li>元素結(jié)束，即第二個(gè)和第三個(gè)<li>元素。11.3.3jQueryprev()、prevAll()和prevUtil()1. jQueryprev()jQueryprev()方法可以查找指定元素的前一個(gè)同胞元素，其語法結(jié)構(gòu)如下：.prev([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。如果不填寫任何參數(shù)，則表示查找指定元素的前一個(gè)同胞元素。例如：$("li").prev()上述代碼表示查找列表選項(xiàng)元素<li>的前一個(gè)同胞元素。如果加上參數(shù)，可以進(jìn)一步匹配同胞元素。例如：$("li").prev(".style01")上述代碼表示查找列表選項(xiàng)元素<li>的前一個(gè)同胞元素，并且該元素必須帶有class="style01"屬性，否則認(rèn)為沒有找到匹配元素。2. jQueryprevAll()jQueryprevAll()方法可以查找指定元素前面的全部同胞元素，其語法結(jié)構(gòu)如下：.prevAll([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。如果不填寫任何參數(shù)，則表示查找指定元素前面的所有同胞元素。例如：$("div#test").prevAll()上述代碼表示查找id="test"的<div>元素前面所有的同胞元素。如果加上參數(shù)，可以進(jìn)一步匹配同胞元素。例如：$("div#test").prevAll(".style01")上述代碼表示查找class="style01"并且處于id="test"的<div>元素前面的所有同胞元素。3. jQueryprevUntil()jQueryprevUntil()方法可以查找從指定元素開始，往前水平遍歷直到指定元素結(jié)束的所有同胞元素，不包括作為結(jié)束標(biāo)識(shí)的元素本身。其語法結(jié)構(gòu)如下：.prevUntil([selector][,filter])其中selector和filter參數(shù)均為可選內(nèi)容，可填入有效的jQuery選擇器。參數(shù)selector表示水平遍歷同胞元素時(shí)的結(jié)束位置，參數(shù)filter表示進(jìn)一步篩選指定范圍內(nèi)的同胞元素。例如以下這種情況：<div><pid="test1">第一個(gè)子元素</p><pid="test2">第二個(gè)子元素</p><pid="test3">第三個(gè)子元素</p><span>第四個(gè)子元素</span></div>使用prevUntil()方法如下：$("span").prevUntil("p#test1")上述語句表示從<span>元素開始向前查找其同胞元素，直到id="test1"的段落元素<p>為止，不包括id="test1"的段落元素<p>本身。查找結(jié)果為：<pid="test2">第二個(gè)子元素</p><pid="test3">第三個(gè)子元素</p>如果加上filter參數(shù)，可以進(jìn)一步篩選指定范圍內(nèi)的同胞元素。例如：$("span").prevUntil("p#test1","#test2")上述語句則表示在上述結(jié)果中進(jìn)一步篩選id="test2"的元素。查找結(jié)果為：<pid="test2">第二個(gè)子元素</p>【例11-5】jQuery同胞遍歷prev()、prevAll()、prevUntil()方法的應(yīng)用分別使用jQueryprev()、prevAll()和prevUntil()方法匹配指定元素的同胞元素?！敬a說明】本示例中包含了祖父元素<div>、父元素<ul>以及五個(gè)測(cè)試需要使用的列表選項(xiàng)元素<li>。jQuery選擇器$("li:last")表示以最后一個(gè)<li>元素為指定元素，查找其前面的相關(guān)同胞元素并將其樣式設(shè)置為1像素寬的紅色實(shí)線邊框加上粉色背景。由圖可見，圖(a)顯示的是頁面初始加載的效果，當(dāng)前尚未選擇任何元素。圖(b)顯示的是使用prev()方法查找并標(biāo)記$("li:last")的前一個(gè)同胞元素，即第四個(gè)<li>元素。圖(c)顯示的是使用prevAll()方法查找并標(biāo)記$("li:last")前面所有同胞元素，即第一至四個(gè)<li>元素。圖(d)顯示的是使用prevUnitl()方法查找并標(biāo)記$("li:last")前面的同胞元素，直到第二個(gè)<li>元素結(jié)束，即第三個(gè)和第四個(gè)<li>元素。11.4jQuery祖先遍歷jQuery祖先遍歷指的是以指定元素為出發(fā)點(diǎn)，遍歷該元素的父、祖父、曾祖父元素等，直到全部查找完畢。常用的方法有：parent()：查找指定元素的直接父元素。parents()：查找指定元素的所有祖先元素。parentsUntil()：查找指定元素向上指定范圍的所有祖先元素。11.4.1jQueryparent()jQueryparent()方法可以查找指定元素的直接父元素，其語法結(jié)構(gòu)如下：.parent([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的同胞元素。如果不填寫任何參數(shù)，則表示查找所有的子元素。例如：$("p").parent()上述代碼表示查找所有段落元素<p>的直接父元素。如果加上參數(shù)，可以進(jìn)一步匹配父元素。例如：$("p").parent(".style01")上述代碼表示查找既是段落元素<p>的父元素，也是class="style01"的元素。【例11-6】jQuery祖先遍歷parent()方法的應(yīng)用使用jQueryparent()方法查找指定元素的父元素?！敬a說明】本示例使用jQueryparent()方法查找的是<span>元素的父元素。由圖可見，查找結(jié)果是將列表選項(xiàng)元素<li>添加了粉色背景與1像素寬的紅色實(shí)線邊框樣式。11.4.2jQueryparents()jQueryparents()方法可以查找指定元素的所有祖先元素，其語法結(jié)構(gòu)如下：.parents([selector])其中selector參數(shù)為可選內(nèi)容，可以是任意jQuery選擇器，用于進(jìn)一步篩選需要匹配的祖先元素。如果不填寫任何參數(shù)，則表示查找所有的祖先元素。例如：$("p").parents()上述代碼表示查找段落元素<p>的所有祖先元素。如果加上參數(shù)，可以進(jìn)一步匹配祖先元素。例如：$("p").parents(".style01")上述代碼表示在段落元素<p>全部祖先元素中查找class="style01"的元素。【例11-7】jQuery祖先遍歷parents()方法的應(yīng)用使用jQueryparents()方法查找指定元素的祖先元素?！敬a說明】本示例使用jQueryparents()方法查找的是列表選擇元素<li>的所有祖先元素。由圖可見，查找結(jié)果是父元素<ul>、祖父元素<div>、曾祖父元素<body>等，并統(tǒng)一為這些祖先元素添加了粉色背景與1像素寬的紅色實(shí)線邊框樣式。11.4.3jQueryparentsUntil()jQueryparentsUntil()方法可以查找指定元素的其他所有同胞元素，其語法結(jié)構(gòu)如下：.parentsUntil([selector][,filter])其中selector和filter參數(shù)均為可選內(nèi)容，可填入有效的jQuery選擇器。參數(shù)selector表示向上遍歷祖先元素時(shí)的結(jié)束位置，參數(shù)filter表示進(jìn)一步篩選指定范圍內(nèi)的祖先元素。例如：$("p").parentsUntil()上述代碼表示查找段落元素<p>的所有同胞元素。例如以下這種情況：<divid="layer01">曾祖父元素div<divid="layer02">祖父元素div<ul>父元素ul<li>列表選項(xiàng)元素li</li></ul></div></div>使用parentsUntil()方法如下：$("li").parentsUntil("div#layer01")上述語句表示從<li>元素開始向上追溯其祖先元素，直到<divid="layer01">元素為止，不包括<divid="layer01">元素本身。查找結(jié)果為：<divid="layer02">祖父元素div<ul>父元素ul</ul></div>如果加上filter參數(shù)，可以進(jìn)一步篩選指定范圍內(nèi)的同胞元素。使用parentsUntil()方法如下：$("li").parentsUntil("div#layer01","#layer02")上述語句表示從<li>元素向上查找id="layer02"的祖先元素，并且其查找范圍不可超過id="layer01"的<div>元素。查找結(jié)果為：<divid="layer02">祖父元素div</div>【例11-8】jQuery祖先遍歷parentsUntil()方法的應(yīng)用使用jQueryparentsUntil()方法查找指定元素的祖先元素。【代碼說明】本示例使用jQueryparentsUntil()方法查找的是從列表選擇元素<li>開始，向上追溯其所有祖先元素，直到<body>元素結(jié)束，并且不包含<body>元素本身。由圖可見，查找結(jié)果是列表選擇元素<li>的父元素<ul>和祖父元素<div>，并統(tǒng)一為這些祖先元素添加了粉色背景與1像素寬的紅色實(shí)線邊框樣式。11.5階段案例：仿電商購物車效果11.5.1案例需求使用jQuery制作一款仿電商購物車效果界面，可以展示購物車中的商品圖片、描述、單價(jià)、數(shù)量、總金額等內(nèi)容，購物車中的每款商品均可以調(diào)整數(shù)量或刪除。用戶可以勾選其中一個(gè)或多個(gè)商品進(jìn)行結(jié)算，底部工具欄會(huì)根據(jù)已勾選商品的單價(jià)和數(shù)量自動(dòng)計(jì)算并顯示需要結(jié)算的總金額。11.5.2界面設(shè)計(jì)1.整體布局本案例直接使用表格<table>來實(shí)現(xiàn)整個(gè)布局，表格分為表頭標(biāo)簽、商品列表明細(xì)和底部結(jié)算工具欄三個(gè)區(qū)域組成。創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如ShoppingCart.html。在HTML5中使用<tableid="shoppingCart">元素聲明購物車區(qū)域，在其中劃分若干個(gè)單元行<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>本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建cart.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：1.<head>2.<metacharset="utf-8">3.<title>仿電商購物車效果</title>4.<linkrel="stylesheet"href="css/cart.css">5.</head>在CSS外部樣式表中設(shè)置公共樣式以及表格基礎(chǔ)樣式，相關(guān)CSS代碼如下：1./*公共樣式*/2.body{3.background-color:#f5f5f5;/*背景顏色灰白色*/4.text-align:center;/*文本居中*/5.}為表格設(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.}2.表頭設(shè)置表格中的第一行<tr>內(nèi)部使用<th>標(biāo)簽設(shè)置7個(gè)表頭，代碼如下：1.<!--購物車表格-->2.<tableid="shoppingCart">3.<!--1表頭標(biāo)簽-->4.<tr>5.<th>選擇</th>6.<th>商品圖片</th>7.<th>商品信息</th>8.<th>單價(jià)</th>9.<th>數(shù)量</th>10.<th>金額</th>11.<th>操作</th>12.</tr>13.<!--2商品列表區(qū)域開始（…代碼略…）-->14.<!--3結(jié)算區(qū)域（…代碼略…）-->15.</table>注：開發(fā)者也可以根據(jù)實(shí)際需求變更標(biāo)簽名稱或表頭標(biāo)簽的數(shù)量，但是需要注意讓商品列表中每一行單元格的數(shù)量與表頭保持一致。3.商品列表表格中的第2-4行<tr>內(nèi)部均使用<td>標(biāo)簽設(shè)置7個(gè)單元格與表頭標(biāo)簽對(duì)應(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）單價(jià)-->14.<td>￥<spanclass="unit_price">1299.00</span></td>15.<!--(5）數(shù)量-->16.<td>17.<!--(5）數(shù)量-減號(hào)按鈕-->18.<buttonclass="minusBtn">-</button>19.<!--(5）數(shù)量-文本框-->20.<inputclass="goods_num"type="text"value="1"/>21.<!--(5）數(shù)量-加號(hào)按鈕-->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>其中商品1的圖片來自于image目錄下的1.jpg，開發(fā)者可以參照商品1的信息自行為商品2和3添加一些模擬數(shù)據(jù)。在CSS外部樣式表中為商品圖片以及商品數(shù)量文本框設(shè)置樣式，相關(guān)CSS代碼如下：1. /*商品列表區(qū)域-商品圖片*/2. .goodsBoximg.goods{3. width:80px;/*寬度80px*/4. height:80px;/*高度80px*/5. display:block;/*顯示為塊級(jí)元素*/6. margin:0auto;/*外邊距上下0，左右居中*/7. }8. /*商品列表區(qū)域-文本輸入框*/9. .goodsBoxinput[type='text']{10. width:25px;/*寬度25px*/11. text-align:center;/*文本水平方向居中*/12. }此時(shí)商品列表區(qū)域的樣式就完成了。4.結(jié)算區(qū)域結(jié)算區(qū)域不需要按照表頭標(biāo)簽拆分，可以用一個(gè)<td>單元格配合屬性colspan="7"來實(shí)現(xiàn)合并7個(gè)單元格豎列。其內(nèi)部使用<divid="toolbar">表示結(jié)算工具欄，該工具欄分為左右結(jié)構(gòu)：左邊區(qū)域是全選框和“清空購物車”按鈕，右邊區(qū)域是結(jié)算總金額文本和“結(jié)算”按鈕。HTML5相關(guān)代碼如下：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)合計(jì)金額-->20.<span>合計(jì)（不含運(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>實(shí)現(xiàn)，其中總金額先默認(rèn)寫為初始值“0.00”，且使用<spanclass="total_price">方便后續(xù)查找更新；“結(jié)算”按鈕和“清空購物車”按鈕均使用<button>實(shí)現(xiàn)。在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. }此時(shí)CSS樣式設(shè)置就全部完成了。11.5.3邏輯實(shí)現(xiàn)1.整體邏輯購物車中的各類操作動(dòng)作均需要使用到j(luò)Query的相關(guān)功能，因此首先在<head>標(biāo)簽中添加對(duì)于jQuery的調(diào)用。在js文件夾中創(chuàng)建cart.js文件，并在ShoppingCart.html文件的<head>首尾標(biāo)簽中聲明對(duì)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>本案例涉及到的所有操作邏輯都來自于商品列表區(qū)域和結(jié)算工具欄區(qū)域。其中商品列表區(qū)域的相關(guān)功能如下：單個(gè)商品勾選/取消：變更當(dāng)前勾選框和全選框狀態(tài)，更新結(jié)算總金額。加/減號(hào)按鈕點(diǎn)擊事件：商品數(shù)量每次加/減1，更新當(dāng)前商品總價(jià)及結(jié)算總金額；數(shù)量文本框輸入事件：顯示用戶輸入的整數(shù)，更新當(dāng)前商品總價(jià)及結(jié)算總金額；“刪除”按鈕事件：刪除對(duì)應(yīng)的商品列表行并更新結(jié)算總金額；結(jié)算工具欄區(qū)域的相關(guān)功能如下：全選框勾選/取消：勾選/取消時(shí)聯(lián)動(dòng)變更全部商品勾選框和結(jié)算總金額；“清空購物車”按鈕點(diǎn)擊事件：清除全部商品列表行，結(jié)算總金額為0。在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單個(gè)商品勾選框點(diǎn)擊事件7.//1-2減號(hào)按鈕點(diǎn)擊事件8.//1-3加號(hào)按鈕點(diǎn)擊事件9.//1-4商品數(shù)量文本框輸入事件10.//1-5刪除按鈕點(diǎn)擊事件11.12.//=====================13.//2結(jié)算工具欄區(qū)域事件14.//=====================15.//2-1全選勾選框點(diǎn)擊事件16.//2-2清空購物車按鈕點(diǎn)擊事件17.});2.函數(shù)封裝從所有需要實(shí)現(xiàn)的功能邏輯中可以總結(jié)出兩個(gè)頻繁被使用的功能：一是更新當(dāng)前商品總價(jià)，二是更新底部工具欄的結(jié)算總金額。在cart.js文件中新增自定義函數(shù)updatePrice()和updateTotalPrice()分別來實(shí)現(xiàn)這兩個(gè)功能模塊方便后續(xù)被其它事件調(diào)用。updatePrice()代碼如下：1.//函數(shù)封裝-更新指定商品總價(jià)2.//參數(shù)td：數(shù)量控件所在的父單元格對(duì)象3.//參數(shù)num：商品數(shù)量4.functionupdatePrice(td,num){5.//獲取當(dāng)前產(chǎn)品單價(jià)6.varunit_price=td.prev().children(".unit_price").text();7.//計(jì)算當(dāng)前商品總價(jià)(保留2位小數(shù))8.varprice=(unit_price*num).toFixed(2);9.//更新當(dāng)前商品總價(jià)10.td.next().children(".price").text(price);11.}上述代碼用到了jQuery同胞遍歷prev()和next()分別獲取參數(shù)單元格td（注：包含加減號(hào)按鈕和數(shù)量文本框的單元格，即每行第5個(gè)單元格）的前后兩個(gè)單元格對(duì)象，使用jQuery后代遍歷children(".unit_price")獲得單價(jià)后通過計(jì)算然后使用children(".price")更新當(dāng)前商品總價(jià)。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">，其返回值是一個(gè)數(shù)組對(duì)象。遍歷該數(shù)組對(duì)象依次確認(rèn)每個(gè)勾選框是否為選中狀態(tài)，如有選中的勾選框則使用jQuery祖先遍歷parents(".goodsBox")獲取當(dāng)前勾選框的祖先元素<tr>單元行，再使用jQuery后代遍歷find(".price")獲得當(dāng)前商品的總價(jià)并加入結(jié)算總金額。最后在頁面上更新結(jié)算總金額且保留2位小數(shù)。3.商品列表邏輯1)單個(gè)商品勾選/取消當(dāng)某一行商品的勾選框被勾選或取消時(shí)，更新底部結(jié)算工具欄中的總金額。如果這是購物車中最后一件被勾選的商品，則將勾選結(jié)算工具欄中的全選按鈕；如果是取消勾選，則讓結(jié)算工具欄中的全選按鈕變更為非勾選狀態(tài)。在cart.js中使用$(".goodsBoxinput:checkbox")來監(jiān)聽商品勾選框的點(diǎn)擊事件，相關(guān)代碼如下：1.//1-1單個(gè)商品勾選框點(diǎn)擊事件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é)算總價(jià)26.updateTotalPrice();27.});上述代碼表示當(dāng)任意一個(gè)勾選框被點(diǎn)擊時(shí)，如果當(dāng)前動(dòng)作是勾選，則遍歷所有商品勾選框看其他商品是否也全都是勾選狀態(tài)，先默認(rèn)標(biāo)記全選框?yàn)檫x中狀態(tài)，只要遍歷時(shí)有任意一個(gè)沒被選中則標(biāo)記全選框?yàn)槿∠麪顟B(tài)；如果當(dāng)前動(dòng)作是取消也是標(biāo)記全選框?yàn)槿∠麪顟B(tài)。最后更新全選框狀態(tài)和結(jié)算總價(jià)。2)加減號(hào)按鈕點(diǎn)擊事件減號(hào)按鈕被點(diǎn)擊時(shí)需要將數(shù)量文本框中的數(shù)字減1，達(dá)到最小數(shù)量1則不再變化，并且更新當(dāng)前商品總價(jià)以及底部結(jié)算工具欄中的總金額。在cart.js中使用$(".minusBtn")來監(jiān)聽減號(hào)按鈕的點(diǎn)擊事件，相關(guān)代碼如下：1.//1-2減號(hào)按鈕點(diǎn)擊事件2.$(".minusBtn").click(function(){3.//查找商品數(shù)量文本輸入框，并獲得取值4.varnum=$(this).siblings("input").val();5.//最少要選1個(gè)商品，所以必須數(shù)量大于1才有動(dòng)作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é)算總價(jià)14.updateTotalPrice();15.}16.});上述代碼先使用jQuery同胞遍歷siblings("input")獲取當(dāng)前減號(hào)按鈕同一個(gè)單元格中的文本輸入框<input>元素，即數(shù)量文本輸入框?qū)ο蟛@取其中的數(shù)值（商品數(shù)量）。判斷數(shù)量大于1時(shí)才可以有后續(xù)動(dòng)作：商品數(shù)量減少1，然后分別更新數(shù)量文本框中顯示的數(shù)字、當(dāng)前商品總金額以及結(jié)算總價(jià)。加號(hào)按鈕被點(diǎn)擊時(shí)將數(shù)量文本框中的數(shù)字加1，達(dá)到最大數(shù)量999則不再變化，并且更新當(dāng)前商品總價(jià)以及底部結(jié)算工具欄中的總金額。在cart.js中使用$(".plusBtn")來監(jiān)聽加號(hào)按鈕的點(diǎn)擊事件，相關(guān)代碼如下：1.//1-3加號(hào)按鈕點(diǎn)擊事件2.$(".plusBtn").click(function(){3.//查找同胞元素文本輸入框，并獲得取值4.varnum=$(this).siblings("input").val();5.//最多不可以超過999個(gè)商品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é)算總價(jià)14.updateTotalPrice();15.}16.});上述代碼先使用jQuery同胞遍歷siblings("input")獲取當(dāng)前加號(hào)按鈕同一個(gè)單元格中的文本輸入框<input>元素，即數(shù)量文本輸入框?qū)ο蟛@取其中的數(shù)值（商品數(shù)量）。判斷數(shù)量小于默認(rèn)最大值999時(shí)才可以有后續(xù)動(dòng)作：商品數(shù)量增加1，然后分別更新數(shù)量文本框中顯示的數(shù)字、當(dāng)前商品總金額以及結(jié)算總價(jià)。3)數(shù)量文本框輸入事件用戶在數(shù)量文本框輸入內(nèi)容時(shí)，輸入的內(nèi)容和顯示結(jié)果對(duì)應(yīng)關(guān)系如下：輸入有效范圍[1,999]之間的整數(shù)：顯示用戶輸入的數(shù)字；輸入超出范圍的數(shù)字：就近顯示1或999，例如輸入0則顯示1，輸入1000則顯示999；輸入非數(shù)字：顯示數(shù)字1，例如輸入“abc”則顯示1；輸入小數(shù)：自動(dòng)四舍五入取整，例如輸入“3.14”則自動(dòng)顯示為3。最后更新當(dāng)前商品總價(jià)以及底部結(jié)算工具欄中的總金額。在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é)算總價(jià)18.updateTotalPrice();19.});上述代碼先獲得了用戶輸入在數(shù)量文本框中的內(nèi)容，然后根據(jù)規(guī)則判斷有效性并重新調(diào)整應(yīng)該顯示的數(shù)字，最后當(dāng)文本框失去焦點(diǎn)時(shí)把正確的數(shù)字顯示出來，并依次更新當(dāng)前商品總金額和結(jié)算總價(jià)。這里節(jié)選了輸入非數(shù)字的效果，開發(fā)者也可以自行嘗試輸入其它情況看是否可以自動(dòng)修正成功顯示正確的數(shù)字。4)“刪除”按鈕點(diǎn)擊事件“刪除”按鈕被點(diǎn)擊時(shí)彈窗提醒用戶做二次確認(rèn)，當(dāng)用戶再次確認(rèn)刪除時(shí)去掉對(duì)應(yīng)的商品列表行并更新底部結(jié)算工具欄中的總金額。在cart.js中使用$(".delBtn")來監(jiān)聽“刪除”按鈕的點(diǎn)擊事件，相關(guān)代碼如下：1.//1-5刪除按鈕點(diǎn)擊事件2.$(".delBtn").click(function(){3.//彈出確認(rèn)框提醒用戶（返回值true表示確認(rèn)）4.varresult=confirm("您確認(rèn)刪除當(dāng)前商品嗎？");5.//用戶確認(rèn)6.if(result){7.//找到按鈕對(duì)應(yīng)的單元行tr并刪除8.$(this).parents(".goodsBox").remove();9.//更新結(jié)算總價(jià)10.updateTotalPrice();11.}12.});上述代碼使用了jQuery祖先遍歷parents(".goodsBox")查找當(dāng)前按鈕的祖先元素<tr>單元行，并使用remove()全部刪除，最后更新結(jié)算總價(jià)。4.結(jié)算工具欄邏輯1)全選框勾選/取消當(dāng)結(jié)算工具欄的全選框被勾選/取消時(shí)讓商品列表中所有商品的勾選按鈕也都處于被勾選/取消狀態(tài)，且更新底部結(jié)算工具欄中的總金額；在cart.js中使用$(".selectAll")來監(jiān)聽全選框的點(diǎn)擊事件，相關(guān)代碼如下：1.//2-1全選勾選框點(diǎn)擊事件2.$(".selectAll").click(function(){3.//被勾選4.if($(this).is(":checked")){5.//讓所有商品都被勾選6.$(".goodsBoxinput:checkbox").prop("checked",true);7.}8.//取消勾選9.else{10.//讓所有商品都取消勾選11.$(".goodsBoxinput:checkbox").prop("checked",false);12.}13.//更新購物車總價(jià)14.updateTotalPrice();15.});上述代碼使用is(":checked")判斷全選框是否被勾選，再使用prop("checked",true)和prop("checked",false)更新勾選框狀態(tài)為勾選或非勾選。2)“清空購物車”按鈕點(diǎn)擊事件當(dāng)“清空購物車”按鈕被點(diǎn)擊時(shí)彈窗提醒用戶做二次確認(rèn)，當(dāng)用戶再次確認(rèn)則清除全部商品列表行并把結(jié)算總價(jià)更新為“0.00”。在cart.js中使用$(".clearBtn")來監(jiān)聽全選框的點(diǎn)擊事件，相關(guān)代碼如下：1.//2-2清空購物車按鈕點(diǎn)擊事件2.$(".clearBtn").click(function(){3.//彈出確認(rèn)框提醒用戶（返回值true表示確認(rèn)）4.varresult=confirm("您確認(rèn)清空購物車嗎？");5.//用戶確認(rèn)6.if(result){7.//刪除所有商品信息行8.$("tr.goodsBox").remove();9.//頁面上更新總價(jià)10.$(".total_price").text("0.00");11.}12.});此時(shí)本項(xiàng)目就已經(jīng)全部完成了。11.5.4案例思考【拓展練習(xí)】請(qǐng)變更商品的圖片、描述和單價(jià)等信息，使其可以顯示更多種類的商品?！具M(jìn)階改造】在結(jié)算工具欄邏輯中新增“結(jié)算”按鈕點(diǎn)擊事件，當(dāng)結(jié)算按鈕被點(diǎn)擊時(shí)彈窗提示已成功支付的總金額并移除已付款商品，然后更新底部結(jié)算工具欄中顯示的結(jié)算總金額。cart.js中部分參考代碼如下；1.//2-3結(jié)算按鈕點(diǎn)擊事件2.$(".submitBtn").click(function(){3.//查找所有商品單元行中的勾選框元素4.//標(biāo)記是否有商品被選中5.varisAny=false;6.//遍歷所有元素檢查是否被勾選，若有被勾選的則移除7.8.//如果有商品被選中9.if(isAny){10.//獲取總支付金額11.//支付成功提醒12.//更新結(jié)算總價(jià)13.}14.//如果沒有15.else{16.//彈窗告知用戶沒有需要支付的商品17.}18.});11.6本章小結(jié)本章首先引入了家族樹的概念，并以此衛(wèi)基礎(chǔ)介紹jQuery遍歷的相關(guān)知識(shí)。jQuery遍歷這一行為主要指的是在HTML頁面上沿著某個(gè)指定元素節(jié)點(diǎn)位置進(jìn)行移動(dòng)，直到查找到需要的HTML元素為止。該技術(shù)主要用于準(zhǔn)確地查找和定位指定的一個(gè)或多個(gè)元素。jQuery遍歷可以根據(jù)查找范圍的不同劃分為后代遍歷、同胞遍歷以及祖先遍歷3種情況。本章階段案例為仿電商購物車效果，通過對(duì)商品列表和結(jié)算工具欄的各種操作復(fù)習(xí)鞏固了jQuery遍歷的各類情形。六、課后習(xí)題什么是HTML家族樹？試將下述代碼轉(zhuǎn)換為HTML家族樹結(jié)構(gòu)圖。<div><ul><li>item01</li><li>item02</li></ul><ul><li>item03</li><li>item04</li></ul></div>答：同一個(gè)HTML頁面上的所有元素按照層次關(guān)系可以形成樹狀結(jié)構(gòu)，這種結(jié)構(gòu)稱為家族樹（FamilyTree）。結(jié)構(gòu)圖如下：什么是jQuery后代遍歷？其中children()和find()函數(shù)的作用分別是？答：jQuery后代遍歷指的是以指定元素為出發(fā)點(diǎn)，遍歷該元素內(nèi)部包含的子、孫、曾孫等后代元素，直到全部查找完畢。常用的方法有：children()：查找元素的直接子元素。find()：查找元素的全部后代，直到查找到最后一層元素。什么是jQuery同胞遍歷？其中siblings()、next()以及prev()函數(shù)的作用分別是？答：jQuery同胞遍歷指的是以指定元素為出發(fā)點(diǎn)，遍歷與該元素具有相同父元素的同胞元素，直到全部查找完畢。常用的方法有：siblings()：查找指定元素的所有同胞元素。next()：查找指定元素的下一個(gè)同胞元素。prev()：查找指定元素的前一個(gè)同胞元素。什么是jQuery祖先遍歷？其中parent()、parents()、parentsUntil()函數(shù)的作用分別是？答：jQuery祖先遍歷指的是以指定元素為出發(fā)點(diǎn)，遍歷該元素的父、祖父、曾祖父元素等，直到全部查找完畢。常用的方法有：parent()：查找指定元素的直接父元素。parents()：查找指定元素的所有祖先元素。parentsUntil()：查找指定元素向上指定范圍的所有祖先元素?！禞avaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》教案第12章jQueryAJAX技術(shù)一、教學(xué)目標(biāo)：了解什么是AJAX以及AJAX技術(shù)的組成部分；了解什么是jQueryAJAX；掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；掌握jQueryAJAX事件的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：掌握jQueryAJAX常用方法（load、get、post和ajax）；難點(diǎn)：jQueryAJAX事件的用法。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：AJAX是一種可以與服務(wù)器異步交互數(shù)據(jù)的網(wǎng)頁開發(fā)技術(shù)，使用該技術(shù)可以在不重新加載整個(gè)頁面的前提下直接更新當(dāng)前頁面中的指定內(nèi)容。本章主要內(nèi)容是jQueryAJAX技術(shù)的應(yīng)用，包括jQueryAJAX技術(shù)簡介、常用方法和事件處理三個(gè)部分組成。五、教學(xué)基本內(nèi)容：12.1jQueryAJAX簡介12.1.1什么是AJAXAJAX來源于英文詞組AsynchronousJavaScriptandXML（異步JavaScript和XML）的首字母縮寫，是一種可以與服務(wù)器異步交互數(shù)據(jù)的網(wǎng)頁開發(fā)技術(shù)。該名稱是在2005年2月首次出現(xiàn)，由AdaptivePath公司的JesseGarrett在Ajax:AnewapproachtoWebApplication一文中提到。使用AJAX技術(shù)可以在不重新加載整個(gè)頁面的前提下直接更新當(dāng)前頁面中的指定內(nèi)容，例如GoogleSuggest和GoogleMaps就是兩種使用了AJAX技術(shù)的Web應(yīng)用。事實(shí)上，AJAX是由多種當(dāng)前主流的技術(shù)組合而成的，包含如下內(nèi)容：使用XTHML和CSS進(jìn)行標(biāo)準(zhǔn)化表達(dá)；使用DOM(DocumentObjectModel)實(shí)現(xiàn)動(dòng)態(tài)展示和交互；使用XMLHttpRequest實(shí)現(xiàn)異步數(shù)據(jù)獲??；使用JavaScript綁定所有技術(shù)綜合應(yīng)用。12.1.2AJAX的實(shí)現(xiàn)原理AJAX可以讓瀏覽器和服務(wù)器端進(jìn)行異步交互，其實(shí)現(xiàn)原理可以分成5個(gè)步驟，如下圖所示。圖12-1AJAX的實(shí)現(xiàn)原理當(dāng)網(wǎng)頁頁面需要顯示從服務(wù)器端查詢到的數(shù)據(jù)信息時(shí)，先使用JavaScript調(diào)用XMLHTTPRequest對(duì)象，該對(duì)象允許JavaScript向服務(wù)器端發(fā)出HTTP請(qǐng)求并且不阻塞用戶。服務(wù)器收到請(qǐng)求后在自身后臺(tái)處理請(qǐng)求并將響應(yīng)結(jié)果返回給瀏覽器，其中有用的數(shù)據(jù)信息可以封裝成文本、HTML、XML或JSON等形式發(fā)出，再由瀏覽器端解析數(shù)據(jù)包后獲取里面的詳細(xì)內(nèi)容。最后，繼續(xù)使用JavaScript操作HTMLDOM對(duì)象來直接更新頁面中的內(nèi)容，無需刷新網(wǎng)頁。12.1.3jQueryAJAX在不使用jQueryAJAX技術(shù)時(shí)，JavaScript創(chuàng)建XMLHTTPRequest對(duì)象時(shí)還得考慮不同瀏覽器的兼容性問題，節(jié)選部分參考代碼如下：//非IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象if(window.XmlHttpRequest){xmlhttpReq=newXmlHttpRequest();}//IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象if(window.ActiveXObject){try{xmlhttpReq=newActiveXObject("Microsoft.XMLHTTP");}catch(e){try{xmlhttpReq=newActiveXObject("msxml2.XMLHTTP");}catch(ex){}}}如果使用了jQueryAJAX技術(shù)，上述代碼的復(fù)雜內(nèi)容只需要一個(gè)$.ajax()就可以完成。jQuery提供了關(guān)于AJAX的一系列方法，使得開發(fā)者可以更方便地從服務(wù)器端請(qǐng)求文本、HTML、XML或JSON形式的數(shù)據(jù)。jQueryAJAX技術(shù)中封裝的函數(shù)可以化簡原本復(fù)雜繁瑣的AJAX相關(guān)代碼，使得程序員可以更多關(guān)注產(chǎn)品的實(shí)現(xiàn)。注：由于Chrome內(nèi)核瀏覽器的安全機(jī)制不允許使用AJAX請(qǐng)求本地文件，因此本章節(jié)均使用了在本地電腦中臨時(shí)搭建服務(wù)器的方式（搭建方式見12.3）作為例題運(yùn)行效果的截圖以供參考，后面不再逐一解釋。讀者在實(shí)際運(yùn)用中如果采用了第三方服務(wù)器環(huán)境則無需考慮瀏覽器的限制問題。12.2準(zhǔn)備工作12.2.1臨時(shí)服務(wù)器的搭建若開發(fā)者條件受限，可以將PC端臨時(shí)部署為模擬服務(wù)器進(jìn)行開發(fā)和測(cè)試。開發(fā)者可以根據(jù)自己的實(shí)際情況選擇Apache、Ngnix、Tomcat等任意一款服務(wù)器軟件進(jìn)行安裝部署，以及選用PHP、Node.js、J2EE等任意一種語言進(jìn)行后端開發(fā)。初學(xué)者可以直接使用第三方免費(fèi)套件幫助我們快速搭建模擬服務(wù)器環(huán)境，這里以phpStudyV8.1套裝軟件（包含了Apache/Nginx、PHP和MySQL）為例，部署步驟如下：（1）下載安裝包（官方網(wǎng)址），在PC端中雙擊安裝。（2）完成后啟動(dòng)Apache/Nginx服務(wù)器，如圖12-2所示。（3）在WWW目錄下創(chuàng)建自定義目錄，例如ajaxDemo，未來可以在該目錄下放置圖片素材或PHP文件。至此臨時(shí)部署完畢，用戶可以隨時(shí)更改服務(wù)器上的目錄地址和PHP文件代碼。一鍵啟動(dòng)WAMP的按鈕位置Apache與MySQL已啟動(dòng)狀態(tài)圖12-2phpStudy啟動(dòng)WAMP示例注：開發(fā)者也可以根據(jù)自己的使用習(xí)慣將Apache改為Nginx，一鍵啟動(dòng)WNMP。不需要用的時(shí)候開發(fā)者可以點(diǎn)擊對(duì)應(yīng)的“停止”按鈕終止服務(wù)器進(jìn)程，恢復(fù)普通電腦狀態(tài)。12.2.2文件訪問測(cè)試臨時(shí)服務(wù)器的WWW目錄就是根目錄，它的網(wǎng)絡(luò)地址是“http://localhost/”或“/”。開發(fā)者可以在根目錄下自行創(chuàng)建目錄和文件，例如在ajaxDemo中創(chuàng)建了hello.txt文件，那么該文件的URL地址就是“http://localhost/miniDemo/hello.txt”。在文本文件中隨意寫一句話，例如寫上“Hello”，然后用瀏覽器訪問該文件的地址，效果如下圖所示。圖12-3瀏覽器測(cè)試訪問TXT文本文件注意：如果要顯示中文需要把文本文件保存為UTF-8編碼格式，否則可能會(huì)顯示亂碼。以PHP類型的文件為例，就可以用來編寫代碼制作請(qǐng)求接口了。PHP文件的返回語句是echo，例如：<?phpecho'你好！';?>這樣發(fā)送ajax請(qǐng)求后將會(huì)收到引號(hào)里面的文字內(nèi)容。開發(fā)者也可以直接用瀏覽器訪問該地址，能獲得同樣的文字內(nèi)容（如下圖所示），因此可以在開發(fā)之前直接使用瀏覽器測(cè)試PHP文件是否正確。12.3jQueryAJAX常用方法12.3.1jQueryAJAXload()方法jQueryAJAXload()方法可以向服務(wù)器端發(fā)送數(shù)據(jù)獲取請(qǐng)求，并將已獲取到的數(shù)據(jù)加載到指定的HTML元素中。其語法格式如下：$(selector).load(URL[,data][,callback]);其中URL為必填參數(shù)，data和callback為可選參數(shù)。具體解釋如下：URL參數(shù)用于規(guī)定需要獲取數(shù)據(jù)的URL地址，可以是文本、XML或者JSON數(shù)據(jù)；data參數(shù)用于規(guī)定與請(qǐng)求一起發(fā)送給服務(wù)器的字符串，該字符串以鍵/值對(duì)集合的形式組成；callback參數(shù)用于規(guī)定load()方法完成后需要執(zhí)行的函數(shù)。1. 常規(guī)使用例如，將文件test.txt的內(nèi)容加載到id="demo"的段落元素<p>中。$("#demo").load("test.txt");jQuery將使用.innerHTML屬性將指定元素中的全部內(nèi)容更新為test.txt中的文本內(nèi)容。如果只需要加載的文件中的某個(gè)HTML元素，則可以在URL參數(shù)中追加jQuery選擇器來篩選需要加載的元素。例如，將文件test.txt中class="style01"的<div>元素加載到id="demo"的段落元素<p>中。$("#demo").load("test.txtdiv.style01");需要注意的是，以上兩種情況的選擇器都必須是在網(wǎng)頁文檔中實(shí)際存在的HTML元素，否則AJAX請(qǐng)求將不會(huì)被發(fā)出。【例12-1】jQueryAJAXload()方法的簡單應(yīng)用使用jQueryAJAXload()方法加載外部的文件資源。其中外部文件example01.txt的內(nèi)容如下：<h2>Hello!</h2><h3>jQueryAJAX!</h3>請(qǐng)將本例題的html文件放在臨時(shí)服務(wù)器WWW下的ajaxDemo目錄（僅為示例，也可以自定義其他名稱目錄）中，并在同一個(gè)目錄下新建txt文件夾用于存放外部文件example01.txt，服務(wù)器搭建和啟動(dòng)方式見12.2節(jié)。此時(shí)本例題在瀏覽器中訪問的地址是：http://localhost/ajaxDemo/Example01jQueryAJAX_load()_1.html其中html文件名稱也可以由開發(fā)者自行修改成其他名稱?！敬a說明】本示例主要包含了一個(gè)段落元素<p>和兩個(gè)按鈕元素<button>用于測(cè)試load()方法是否生效。其中段落元素是用于加載外部數(shù)據(jù)，兩個(gè)按鈕分別用于加載全部數(shù)據(jù)和指定元素片段。圖(a)為頁面初始效果，由圖可見目前段落元素中尚無任何來自外部文件的內(nèi)容；圖(b)為段落元素下方左側(cè)按鈕的點(diǎn)擊效果，由圖可見此時(shí)外部文件中的所有內(nèi)容均顯示在了段落元素中；圖(c)為段落元素下方右側(cè)按鈕的點(diǎn)擊效果，由圖可見此時(shí)外部文件中只有<h3>元素的內(nèi)容被顯示在了段落元素中。2. 回調(diào)函數(shù)的使用jQueryAJAXload()方法中的可選參數(shù)callback規(guī)定了數(shù)據(jù)加載完成后需要執(zhí)行的回調(diào)函數(shù)。該函數(shù)包含了三個(gè)參數(shù)，其語法格式如下：$(selector).load(URL[,data],function(response,status,xhr){//回調(diào)函數(shù)的內(nèi)部代碼略});其中三個(gè)參數(shù)具體解釋如下：response參數(shù)為調(diào)用成功時(shí)的結(jié)果內(nèi)容；status參數(shù)為調(diào)用的狀態(tài)，例如"success"或"error"等；xhr參數(shù)表示XMLHttpRequest對(duì)象?！纠?2-2】jQueryAJAXload()方法中回調(diào)函數(shù)的使用使用jQueryAJAXload()方法的回調(diào)函數(shù)以確認(rèn)當(dāng)前的請(qǐng)求狀態(tài)。其中外部文件example02.txt的內(nèi)容如下：<h3>jQueryAJAXload()方法是用于獲取數(shù)據(jù)最常用的方法之一!</h3>請(qǐng)將本例題的html文件放在臨時(shí)服務(wù)器WWW下的ajaxDemo目錄（僅為示例，也可以自定義其他名稱目錄）中，并在同一個(gè)目錄下新建txt文件夾用于存放外部文件example02.txt，服務(wù)器搭建和啟動(dòng)方式見12.2節(jié)。此時(shí)本例題在瀏覽器中訪問的地址是：http://localhost/ajaxDemo/Example02jQueryAJAX_load()_2.html其中html文件名稱也可以由開發(fā)者自行修改成其他名稱?！敬a說明】本示例主要包含了一個(gè)