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

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