《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》 第10章教案-jQuery HTML DOM

《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》教案第10章jQueryHTMLDOM一、教學(xué)目標(biāo)：掌握jQuery獲取和設(shè)置相關(guān)函數(shù)text()、html()、val()、attr()、css()的使用；掌握jQuery添加相關(guān)函數(shù)append()和prepend()、after()和before()的使用；掌握jQuery刪除相關(guān)函數(shù)remove()、empty()和removeAttr()的使用；掌握jQuery類(lèi)屬性設(shè)置相關(guān)函數(shù)addClass()、removeClass()和toggleClass()的使用；掌握jQuery尺寸相關(guān)width()、height()系列函數(shù)的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery常用DOM函數(shù)的用法（獲取/設(shè)置、添加、刪除）；難點(diǎn)：jQuery類(lèi)屬性設(shè)置相關(guān)函數(shù)的使用。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：DOM指的是DocumentObjectModel（文檔對(duì)象模型），jQuery提供了一系列與DOM相關(guān)的方法能讓用戶(hù)更方便的選擇和操作HTML文檔中的元素及其屬性。本章主要內(nèi)容是jQueryHTMLDOM技術(shù)的應(yīng)用，包括jQuery獲取和設(shè)置、添加、刪除、類(lèi)屬性設(shè)置以及尺寸相關(guān)函數(shù)的應(yīng)用。五、教學(xué)基本內(nèi)容：10.1jQuery獲取和設(shè)置jQuery能獲取或設(shè)置5種特定內(nèi)容，具體見(jiàn)表10-1所示。表10-SEQ表12-\*ARABIC1jQuery獲取或設(shè)置常見(jiàn)方法方法名稱(chēng)解釋text()獲取或設(shè)置選定元素標(biāo)簽之間的文本內(nèi)容。html()獲取或設(shè)置選定元素標(biāo)簽的全部?jī)?nèi)容，包括HTML標(biāo)記本身。val()獲取或設(shè)置選定表單元素字段的值。attr()獲取或設(shè)置選定元素的屬性值。css()獲取或設(shè)置選定元素的CSS屬性值。以上5種方法用于獲取特定內(nèi)容時(shí)，括號(hào)中不填寫(xiě)任何內(nèi)容；用于設(shè)置時(shí)，括號(hào)中需要添加用于設(shè)置的新內(nèi)容，并且用引號(hào)括住。10.1.1jQuerytext()jQuerytext()可用于獲取或設(shè)置選定元素標(biāo)簽之間的文本內(nèi)容，不包含元素標(biāo)簽本身。1. 獲取文本內(nèi)容當(dāng)使用不帶任何參數(shù)的text()方法，可以獲取選定元素標(biāo)簽之間所有的文本內(nèi)容。其語(yǔ)法格式如下：$(selector).text()該方法的返回結(jié)果為字符串類(lèi)型，包含了所有匹配元素內(nèi)部的文本內(nèi)容。例如id="test01"的段落元素<p>表示如下：<pid="test01">hello</p>使用$("p#test01").text()方法獲取其中的文本內(nèi)容，返回值為：hello返回值只包含文本內(nèi)容，不帶有前后的HTML標(biāo)簽。如果是元素內(nèi)部的后代元素中包含有文本，則使用text()也會(huì)獲取其中的文本內(nèi)容。例如以下情況：<divid="container"><p>element<i>1</i></p><p>element<strong>2</strong></p></div>上述代碼在id="container"的<div>元素中包含了兩個(gè)段落元素<p>，并且這兩個(gè)段落元素內(nèi)部的文本內(nèi)容還分別包括了格式標(biāo)簽<i>和<strong>。此時(shí)使用$("div#container").text()方法獲取該<div>元素的文本內(nèi)容，返回值為：element1element2返回值只包含文本內(nèi)容，其中的格式化標(biāo)簽<i>和<strong>均被忽略。需要注意的是，text()方法不能用于處理表單元素的文本內(nèi)容，如果需要獲取或設(shè)置表單中<textarea>或<input>元素的文本值需要使用val()方法。2. 設(shè)置文本內(nèi)容設(shè)置選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).text("新文本內(nèi)容")【例10-1】jQuerytext()方法獲取和設(shè)置文本內(nèi)容使用text()方法獲取和設(shè)置指定元素的文本內(nèi)容。【代碼說(shuō)明】需要注意的是，text()方法只能用于設(shè)置元素中的純文本內(nèi)容，無(wú)法帶有格式化標(biāo)簽。如果需要添加格式化標(biāo)簽或其他子元素標(biāo)簽，可以使用html()方法。10.1.2jQueryhtml()jQueryhtml()用于獲取或設(shè)置選定元素標(biāo)簽的全部?jī)?nèi)容，包括內(nèi)部的文本以及其他HTML標(biāo)記。該方法調(diào)用的是JavaScript原生屬性innerHTML。1. 獲取HTML內(nèi)容獲取選定元素標(biāo)簽之間HTML代碼內(nèi)容的方法如下：$(selector).html()作為獲取元素的HTML內(nèi)容時(shí)，該方法無(wú)需帶有參數(shù)。例如某段HTML代碼如下：<divclass="test"><div>這是一段內(nèi)容。</div></div>使用$("div.test").html()獲取到的結(jié)果如下：<div>這是一段內(nèi)容。</div>需要注意的是，如果符合要求的元素不止一個(gè)，該方法也只獲取第一個(gè)符合選擇器要求的元素內(nèi)部HTML代碼。例如：<divclass="test"><divclass="style01">這是第一段內(nèi)容。</div></div><divclass="test"><divclass="style02">這是第二段內(nèi)容。</div></div>上述代碼中有兩個(gè)<div>均具有相同屬性class="test"，其內(nèi)部HTML代碼不同。使用$("div.test").html()方法獲取的結(jié)果如下：<divclass="style01">這是第一段內(nèi)容。</div>該方法表示獲取屬性class="test"的<div>標(biāo)簽內(nèi)部HTML代碼。由于class屬性可以分配給任意元素，因此如果有多個(gè)<div>元素符合class="test"條件，也只獲取第一個(gè)符合的元素標(biāo)簽內(nèi)部的HTML代碼。2. 設(shè)置HTML內(nèi)容設(shè)置選定元素標(biāo)簽之間HTML內(nèi)容的方法如下：$(selector).html("新HTML內(nèi)容")【例10-2】jQueryhtml()方法獲取和設(shè)置HTML內(nèi)容使用html()方法獲取和設(shè)置指定元素的HTML內(nèi)容。10.1.3jQueryval()jQueryval()用于獲取或設(shè)置選定表單元素的value屬性值。1. 獲取表單元素值獲取選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).val()2. 設(shè)置表單元素值設(shè)置選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).val("新文本內(nèi)容")【例10-3】jQueryval()方法獲取和設(shè)置表單元素字段值使用val()方法獲取和設(shè)置表單元素的值。10.1.4jQueryattr()jQueryattr()用于獲取或設(shè)置選定元素的屬性值。1. 獲取元素屬性值獲取選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).attr(attributeName)該方法只能獲取符合條件的第一個(gè)元素的值。例如以下這種情況：<imgsrc="image/flower.jpg"/><imgsrc="image/balloon.jpg"/>如果使用$("img").attr("src")只能獲取第一個(gè)<img>元素的src屬性值，即image/flower.jpg。2. 設(shè)置元素屬性值設(shè)置選定元素標(biāo)簽之間文本內(nèi)容的方法如下：$(selector).attr(attributeName,value)該方法可以將所有符合條件的元素屬性值全部設(shè)置。例如：$("a").attr("href","")上述代碼會(huì)將所有超鏈接元素<a>的href屬性更改為?！纠?0-4】jQueryattr()方法獲取和設(shè)置元素屬性值使用attr()方法獲取和設(shè)置圖像元素<img>的src屬性值。10.1.5jQuerycss()jQuerycss()用于獲取或設(shè)置選定元素的CSS屬性值。1. 獲取CSS屬性值獲取選定元素標(biāo)簽CSS屬性的方法如下：$(selector).css(propertyName)其中selector可以是任意有效的jQuery選擇器，propertyName參數(shù)位置為CSS屬性名稱(chēng)。該方法可以獲得符合條件的第一個(gè)元素的指定CSS屬性值。例如：varbgColor=$("p").css("background-color");上述代碼表示獲取頁(yè)面上第一個(gè)段落元素<p>的背景顏色。在jQuery1.9版本中新增了數(shù)組類(lèi)型的propertyName參數(shù)，用于批量獲取元素的多個(gè)屬性值。其語(yǔ)法格式如下：$(selector).css(propertyNames)其中selector參數(shù)位置可以是任意有效的選擇器，propertyNames參數(shù)位置為CSS屬性名稱(chēng)的數(shù)組。該方法返回值為數(shù)據(jù)形式，包含了符合條件的第一個(gè)元素的指定CSS屬性值。例如：varprops=$("p").css(["background-color","color","font-size"]);上述代碼的返回值包含了頁(yè)面上第一個(gè)段落元素<p>的背景顏色、字體顏色與字體大小。2. 設(shè)置CSS屬性值設(shè)置選定元素標(biāo)簽CSS屬性值的方法如下：$(selector).css(propertyName,value)其中selector參數(shù)位置可以是任意有效的選擇器，propertyName參數(shù)位置為CSS屬性名稱(chēng)，value參數(shù)位置為字符串或數(shù)值類(lèi)型的CSS屬性值。該方法可以批量設(shè)置所有符合條件元素的指定CSS屬性值。例如，將頁(yè)面上所有段落元素<p>的字體顏色更新為紅色，寫(xiě)法如下：$("p").css("color","red");如果有多個(gè)CSS屬性需要同時(shí)設(shè)置，語(yǔ)法結(jié)構(gòu)如下：$(selector).css({propertyName1:value1,propertyName2:value2...,propertyNameN:valueN});即在css()方法中填入一個(gè)自定義對(duì)象，該對(duì)象中的成員名稱(chēng)為CSS屬性名稱(chēng)，成員的值為對(duì)應(yīng)的CSS屬性值。此時(shí)屬性名稱(chēng)不需要加引號(hào)，并且需要寫(xiě)成Camel標(biāo)記法的形式（第一個(gè)單詞小寫(xiě)，后面每個(gè)單詞首字母大寫(xiě)的形式，例如testDemo）。例如字體粗細(xì)font-weight在這里需要改寫(xiě)成fontWeight。例如，將所有的段落元素設(shè)置為字體加粗、背景顏色為淺藍(lán)色，寫(xiě)法如下：$("p").css({fontWeight:"bold",backgroundColor:"lightblue"});【例10-5】jQuerycss()方法獲取和設(shè)置元素屬性值使用css()方法獲取和設(shè)置段落元素<p>的CSS屬性值。10.2jQuery添加jQuery可以快速在頁(yè)面上添加新元素或內(nèi)容，有四種常見(jiàn)用法如下：append()：在指定元素內(nèi)部的結(jié)尾插入內(nèi)容。prepend()：在指定元素內(nèi)部的開(kāi)頭插入內(nèi)容。after()：在指定元素之后添加內(nèi)容。before()：在指定元素之前添加內(nèi)容。10.2.1jQueryappend()和prepend()jQueryappend()方法用于在所有符合條件的元素內(nèi)部結(jié)尾處追加內(nèi)容。append()方法的語(yǔ)法格式如下：append(content[,content])其中content參數(shù)的類(lèi)型可以是文本、數(shù)組、HTML代碼或元素標(biāo)簽。jQueryprepend()與append()方法的參數(shù)完全相同，只不過(guò)追加位置從指定元素內(nèi)部的結(jié)尾處變更為開(kāi)頭處。prepend()方法的語(yǔ)法格式如下：prepend(content[,content])1. 追加文本使用append()或prepend()方法添加文本內(nèi)容允許帶有格式化標(biāo)簽。例如下面這段HTML代碼：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>對(duì)其使用jQueryappend()方法選定id="test"的<div>元素，并在其內(nèi)部追加文本內(nèi)容。相關(guān)jQuery代碼如下：$("div#test").append("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div>這段文本帶有<i>格式化</i>標(biāo)簽。</div>上述jQuery代碼相當(dāng)于下面這段JavaScript代碼：//創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)vartext=document.createTextNode("這段文本帶有<i>格式化</i>標(biāo)簽。");//獲取id="test"的<div>元素vardiv=document.getElementById("test");//將新建的文本內(nèi)容添加到指定的div元素中去div.appendChild(p);由此可見(jiàn)，jQuery化簡(jiǎn)了JavaScript關(guān)于文本內(nèi)容創(chuàng)建與添加的代碼。如果換成使用prepend()方法追加文本內(nèi)容，相關(guān)jQuery代碼如下：$("div#test").prepend("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：<divid="test">這段文本帶有<i>格式化</i>標(biāo)簽。<div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>2. 追加元素使用append()或prepend()方法添加新元素可以直接在參數(shù)位置填入相關(guān)HTML代碼。以append()為例，添加一個(gè)新的標(biāo)題元素<h1>的方法如下：append("<h1>這是一個(gè)標(biāo)題</h1>")例如，使用append()方法在指定元素的內(nèi)容結(jié)尾處添加段落元素<p>。相關(guān)HTML代碼片段如下：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>使用jQueryappend()方法選定id="test"的<div>元素，并在其內(nèi)部追加子元素。相關(guān)jQuery代碼如下：$("div#test").append("<p>這是新的子元素。</p>");HTML代碼片段更新如下：<divid="test"><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div><p>這是新的子元素。</p></div>上述jQuery代碼相當(dāng)于下面這段JavaScript代碼：//創(chuàng)建一個(gè)新的段落元素<p>varp=document.createElement("p");//為該段落元素添加文本內(nèi)容p.innerHTML="這是新的子元素。";//獲取id="test"的<div>元素vardiv=document.getElementById("test");//將新建的段落元素<p>添加到指定的div元素中去div.appendChild(p);由此可見(jiàn)，jQuery大幅度化簡(jiǎn)了JavaScript中關(guān)于元素創(chuàng)建與添加的代碼。如果換成使用prepend()方法追加元素，相關(guān)jQuery代碼如下：$("div#test").prepend("<p>這是新的子元素。</p>");HTML代碼片段更新如下：<divid="test"><p>這是新的子元素。</p><div>這是第一個(gè)子元素。</div><div>這是第二個(gè)子元素。</div></div>如果在append()或prepend()方法的參數(shù)位置使用選擇器可以將已存在的其他元素對(duì)象移動(dòng)到指定元素中。例如以下這種情況：<h3>這是一個(gè)標(biāo)題</h3><divid="test"><p>這是一個(gè)段落</p></div>對(duì)其使用$("div#test").append($("h3"))會(huì)將標(biāo)題元素<h3>整個(gè)移動(dòng)到<div>元素中。運(yùn)行結(jié)果如下：<divid="test"><h3>這是一個(gè)標(biāo)題</h3><p>這是一個(gè)段落</p></div>3. 追加混合內(nèi)容如果有不同類(lèi)型的內(nèi)容（比如文本和HTML元素）需要同時(shí)添加，可以在參數(shù)位置添加若干個(gè)變量，其間用逗號(hào)隔開(kāi)即可。例如：//使用HTML代碼創(chuàng)建段落元素varp="<p>段落元素</p>";//使用JavaScript代碼創(chuàng)建標(biāo)題元素varh1=document.createElement("h1");h1.innerHTML="標(biāo)題元素";//創(chuàng)建文本內(nèi)容vartext="純文本內(nèi)容";//依次追加到id="test"的<div>元素中$("div#test").append(p,[h1,text]);上述代碼將分別創(chuàng)建新的段落元素、標(biāo)題元素和一段文本內(nèi)容，并按照先后順序添加到id="test"的<div>元素內(nèi)部的結(jié)尾處?！纠?0-6】jQueryappend()和prepend()方法追加內(nèi)容使用append()和prepend()方法為指定元素內(nèi)部開(kāi)頭和結(jié)尾處追加內(nèi)容。10.2.2jQueryafter()和before()jQueryafter()方法分別用于在選定元素之后加入新的內(nèi)容。after()方法的語(yǔ)法格式如下：after(content[,content])其中content參數(shù)的類(lèi)型可以是文本、數(shù)組、HTML代碼或元素標(biāo)簽。jQuerybefore()與after()方法的參數(shù)完全相同，只不過(guò)追加位置從指定元素之后變更為元素之前。before()方法的語(yǔ)法格式如下：before(content[,content])1. 追加文本使用after()或before()方法添加文本內(nèi)容允許帶有格式化標(biāo)簽。例如下面這段HTML代碼：<pid="test">這是測(cè)試用的段落元素</p>對(duì)其使用jQueryafter()方法在該元素后面追加文本內(nèi)容。相關(guān)jQuery代碼如下：$("p#test").append("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：<pid="test">這是測(cè)試用的段落元素</p>這段文本帶有<i>格式化</i>標(biāo)簽。如果換成使用before()方法追加文本內(nèi)容，相關(guān)jQuery代碼如下：$("div#test").before("這段文本帶有<i>格式化</i>標(biāo)簽。");HTML代碼片段更新如下：這段文本帶有<i>格式化</i>標(biāo)簽。<pid="test">這是測(cè)試用的段落元素</p>2. 追加元素使用after()或before()方法添加新元素可以直接在參數(shù)位置填入相關(guān)HTML代碼。以after()為例，添加一個(gè)新的段落元素<p>的方法如下：after("<p>這是一個(gè)段落元素。</p>")例如以下情況：<divid="test">這是一個(gè)測(cè)試元素。</div>使用jQueryafter()方法選定id="test"的<div>元素，并在其后面追加段落元素。相關(guān)jQuery代碼如下：$("div#test").after("<p>這是一個(gè)段落元素。</p>");HTML代碼片段更新如下：<divid="test">這是一個(gè)測(cè)試元素。</div><p>這是一個(gè)段落元素。</p>如果換成使用before()方法追加元素，相關(guān)jQuery代碼如下：$("div#test").before("<p>這是一個(gè)段落元素。</p>");HTML代碼片段更新如下：<p>這是一個(gè)段落元素。</p><divid="test">這是一個(gè)測(cè)試元素。</div>如果在after()或before()方法的參數(shù)位置使用選擇器可以將已存在的其他元素對(duì)象移動(dòng)到指定位置。例如以下這種情況：<h3>這是一個(gè)標(biāo)題</h3><div><pid="test">這是一個(gè)段落</p></div>對(duì)其使用$("p#test").after($("h3"))會(huì)將標(biāo)題元素<h3>整個(gè)移動(dòng)到<p>元素后面。運(yùn)行結(jié)果如下：<divid="test"><p>這是一個(gè)段落</p><h3>這是一個(gè)標(biāo)題</h3></div>3. 追加混合內(nèi)容如果有不同類(lèi)型的內(nèi)容（比如文本和HTML元素）需要同時(shí)添加，可以在參數(shù)位置添加若干個(gè)變量，其間用逗號(hào)隔開(kāi)即可。例如：//使用HTML代碼創(chuàng)建段落元素varp="<p>段落元素</p>";//使用JavaScript代碼創(chuàng)建標(biāo)題元素varh1=document.createElement("h1");h1.innerHTML="標(biāo)題元素";//創(chuàng)建文本內(nèi)容vartext="純文本內(nèi)容";//依次追加到id="test"的<div>元素中$("div#test").after(p,[h1,text]);上述代碼將分別創(chuàng)建新的段落元素、標(biāo)題元素和一段文本內(nèi)容，并按照先后順序添加到id="test"的<div>元素內(nèi)部的結(jié)尾處?！纠?0-7】jQueryafter()和before()方法追加內(nèi)容使用after()和before()方法為指定元素內(nèi)部開(kāi)頭和結(jié)尾處追加內(nèi)容。10.3jQuery刪除10.3.1jQueryremove()jQueryremove()用于刪除指定元素及其子元素，其語(yǔ)法格式如下：$(selector).remove();其中selector可以是任意有效的jQuery選擇器。例如，刪除頁(yè)面上所有段落元素<p>的寫(xiě)法如下：$("p").remove();jQueryremove()方法也可以在括號(hào)中填入一個(gè)參數(shù)，用于篩選出特定的元素進(jìn)行刪除。該參數(shù)可以是任何jQuery選擇器的語(yǔ)法。例如，刪除所有class="style01"的段落元素<p>的寫(xiě)法如下：$("p").remove(".style01");【例10-8】jQueryremove()方法的簡(jiǎn)單應(yīng)用使用remove()方法刪除指定元素及其內(nèi)部的所有子元素。10.3.2jQueryempty()jQueryempty()用于清空元素，即從指定元素中刪除其子元素和文本內(nèi)容。其語(yǔ)法格式如下：$(selector).empty();該方法僅用于清空元素內(nèi)部的內(nèi)容，但保留元素本身的結(jié)構(gòu)。例如下面這種情況：<h1>這是標(biāo)題</h1><p>這是段落</p>使用$("h1").empty()方法清空標(biāo)題元素<h1>，運(yùn)行結(jié)果如下：<h1></h1><p>這是段落</p>由此可見(jiàn)，指定元素的首尾標(biāo)簽仍保留在頁(yè)面結(jié)構(gòu)中。【例10-9】jQueryempty()方法的簡(jiǎn)單應(yīng)用使用empty()方法清空指定元素內(nèi)部的所有子元素。10.3.3jQueryremoveAttr()jQueryremoveAttr()用于刪除元素的指定屬性，其語(yǔ)法格式如下：$(selector).removeAttr(propertyName);例如下面這種情況：<pid="test">這是段落</p>使用$("p").removeAttr("id")方法可以清除段落元素的id屬性，運(yùn)行結(jié)果如下：<p>這是段落</p>【例10-10】jQueryremoveAttr()方法的簡(jiǎn)單應(yīng)用使用removeAttr()方法清除元素的指定屬性。10.4jQuery類(lèi)屬性jQuery中還有一系列操作CSS類(lèi)的方法，這里主要介紹其中三種：addClass()：為元素添加指定名稱(chēng)的class屬性。removeClass()：為元素刪除指定名稱(chēng)的class屬性。toggleClass()：為元素添加/刪除（切換）指定名稱(chēng)的class屬性。10.4.1jQueryaddClass()當(dāng)需要為元素設(shè)置多項(xiàng)CSS樣式屬性時(shí)，除了使用css()方法逐行添加還可以使用addClass()方法直接為元素添加CSS樣式表中的類(lèi)名稱(chēng)。例如：<style>.style01{color:red;background-color:yellow;font-size:20px;margin:20px;padding:20px;}</style>上述代碼為CSS樣式表內(nèi)容，表示聲明了一種類(lèi)名稱(chēng)為style01的樣式集合，包括字體顏色為紅色，背景顏色為黃色，字體大小為20像素，各邊內(nèi)外邊距為20像素。如果使用css()方法為指定元素添加這些屬性，需要寫(xiě)大量的代碼。但若使用addClass()方法只需一行代碼，如下：$("p").addClass("style01");如果有多個(gè)CSS類(lèi)需要同時(shí)添加，可以都寫(xiě)在addClass()方法的參數(shù)位置，之間用空格隔開(kāi)即可。例如：$("p").addClass("style01style02");上述代碼表示為段落元素添加class="style01style02"屬性。10.4.2jQueryremoveClass()如果需要為元素取消某個(gè)CSS樣式的類(lèi)名稱(chēng)，只要使用removeClass()方法即可。其語(yǔ)法格式如下：$(selector).removeClass(className)其中selector為任意有效的jQuery選擇器，className參數(shù)位置需要填入CSS樣式的類(lèi)名稱(chēng)。例如：$("p").removeClass("style01");上述代碼表示為段落元素<p>刪除class="style01"屬性?！纠?0-11】jQuery添加和刪除CSS類(lèi)使用addClass()和removeClass()方法為元素添加和刪除指定名稱(chēng)的CSS類(lèi)。10.4.3jQuerytoggleClass()如果需要為元素切換（輪流刪除/添加）某個(gè)CSS樣式的類(lèi)名稱(chēng)，只要使用toggleClass()方法即可。其語(yǔ)法格式如下：$(selector).toggleClass(className)其中selector為任意有效的jQuery選擇器，className參數(shù)位置需要填入CSS樣式的類(lèi)名稱(chēng)。例如：$("p").toggleClass("style01");上述代碼表示為段落元素<p>刪除或添加class="style01"屬性。同樣可以一次性添加或刪除多個(gè)class屬性。例如：$("p").toggleClass("style01style02");上述代碼表示為段落元素<p>刪除或添加class="style01style02"屬性。這里的CSS類(lèi)名稱(chēng)可以填入任意數(shù)量?！纠?0-12】jQuery添加/刪除CSS類(lèi)的切換使用toggleClass()方法為元素切換添加/刪除指定名稱(chēng)的CSS類(lèi)。10.5jQuery尺寸jQuery還提供了一系列方法用于獲取和設(shè)置元素或?yàn)g覽器窗口的尺寸。如表10-2所示。表10-SEQ表12-\*ARABIC2jQuery尺寸相關(guān)用法示例方法名稱(chēng)解釋width()獲取或設(shè)置元素的寬度（不包括內(nèi)外邊距和邊框?qū)挾龋?。height()獲取或設(shè)置元素的高度（不包括內(nèi)外邊距和邊框?qū)挾龋nnerWidth()獲取或設(shè)置元素的寬度（包括內(nèi)邊距）。innerHeight()獲取或設(shè)置元素的高度（包括內(nèi)邊距）。outerWidth()獲取或設(shè)置元素的寬度（包括內(nèi)邊距和邊框?qū)挾龋?。outerHeight()獲取或設(shè)置元素的高度（包括內(nèi)邊距和邊框?qū)挾龋?。?dāng)以上這些方法不帶任何參數(shù)值時(shí)，表示獲取元素的尺寸。例如：varwidth=$("div").width();上述代碼表示獲取<div>元素的寬度（不包含內(nèi)外邊距和邊框?qū)挾龋?。?dāng)width()或height()方法的參數(shù)值為數(shù)值時(shí)，可以用于設(shè)置元素的尺寸。例如：varwidth=$("div").width(300);上述代碼表示將<div>元素的寬度（不包含內(nèi)外邊距和邊框?qū)挾龋┰O(shè)置為300像素。如果需要獲取帶有外邊距的尺寸，可以使用outerWidth()或outerHeight()方法加上參數(shù)值true來(lái)表示。例如：varwidth=$("div").outerWidth(true);上述代碼表示獲取<div>元素的寬度（包含內(nèi)外邊距和邊框?qū)挾龋??！纠?0-13】jQuery獲取元素尺寸使用jQuery的系列方法獲取元素的尺寸。【代碼說(shuō)明】本示例包含了一個(gè)<div>元素用于測(cè)試獲取其尺寸效果。在CSS內(nèi)部樣式表中為其設(shè)置樣式：寬高均為200像素，各邊的內(nèi)外邊距均為20像素，帶有7像素寬的銀色實(shí)線邊距，背景顏色為淺藍(lán)色。在<div>元素下方添加一個(gè)<button>按鈕，并在其click點(diǎn)擊事件的回調(diào)函數(shù)中獲取<div>元素的尺寸，然后將數(shù)據(jù)顯示在<div>元素內(nèi)部的段落中。由圖可見(jiàn)，其中width和height值就是CSS內(nèi)部樣式表中設(shè)置的元素寬與高，不包含內(nèi)外邊距和邊框的寬度；innerWidth與innerHeight值是包含了元素內(nèi)邊距寬度后的數(shù)值，因此是200+20*2=240px；outerWidth與outerHeight值是包含了元素內(nèi)邊距與邊框?qū)挾群蟮臄?shù)值，因此是200+20*2+7*2=254px；outerWidth(true)與outerHeight(true)值是在之前的基礎(chǔ)上包含了外邊距的數(shù)值，因此是200+20*2+7*2+20*2=294px。10.6階段案例：仿公眾號(hào)留言板10.6.1案例需求背景介紹：留言板又被稱(chēng)為留言簿或留言本，也是目前互聯(lián)網(wǎng)上使用最廣泛的一種用戶(hù)互相溝通交流的方式，例如日常的微博留言、微信公眾號(hào)留言、微信朋友圈評(píng)論留言等。很多主流媒體、地方政府網(wǎng)站也開(kāi)設(shè)了留言或咨詢(xún)版塊傾聽(tīng)人民心聲、解決實(shí)際問(wèn)題，例如人民日?qǐng)?bào)在其官網(wǎng)上開(kāi)設(shè)了領(lǐng)導(dǎo)留言板,是專(zhuān)門(mén)為中央部委和地方各級(jí)黨委政府主要負(fù)責(zé)同志搭建的網(wǎng)上群眾工作平臺(tái),走好網(wǎng)上群眾路線,開(kāi)展網(wǎng)上群眾工作。功能要求：使用jQuery制作一款仿公眾號(hào)風(fēng)格的簡(jiǎn)易留言板。10.6.2界面設(shè)計(jì)1. 整體布局本案例主要分成寫(xiě)留言和精選留言?xún)蓚€(gè)區(qū)域，其中寫(xiě)留言區(qū)域內(nèi)部包含標(biāo)題、多行文本框和按鈕，精選留言區(qū)域包含標(biāo)題、若干個(gè)留言列表豎著排列，每個(gè)列表項(xiàng)里面均包含用戶(hù)的頭像圖片、用戶(hù)昵稱(chēng)和具體留言?xún)?nèi)容。創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如MessageCenter.html。在HTML5中使用<divid="msgCenter">元素聲明留言板區(qū)域，在其中嵌套<divid="msgLeave">和<divid="msgList">分別表示寫(xiě)留言區(qū)域和精選留言區(qū)域，相關(guān)代碼如下：1. <body>2. <!--標(biāo)題-->3. <h3>簡(jiǎn)易留言板效果</h3>4. <!--水平線-->5. <hr/>6. <!--留言板區(qū)域-->7. <divid="msgCenter">8. <!--1寫(xiě)留言區(qū)域-->9. <divid="msgLeave">10. <!--1-1標(biāo)題-->11. <h4>寫(xiě)留言</h4>12. </div>13. <!--2精選留言區(qū)域-->14. <divid="msgList">15. <!--2-1標(biāo)題-->16. <h4>精選留言</h4>17. </div>18. </div>19. </body>本示例使用CSS外部樣式表規(guī)定頁(yè)面樣式。在本地css文件夾中創(chuàng)建message.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>簡(jiǎn)易留言板效果</title>4. <linkrel="stylesheet"href="css/message.css">5. </head>在CSS外部樣式表中設(shè)置公共樣式，相關(guān)CSS代碼如下：1. /*公共樣式*/2. *{3. box-sizing:border-box;/*盒子尺寸包含了邊框和內(nèi)邊距*/4. }5. body{6. background-color:#f5f5f5;/*背景顏色灰白色*/7. text-align:center;/*文本居中*/8. }為留言板區(qū)域和通用標(biāo)題設(shè)置樣式，相關(guān)CSS代碼如下：1. /*留言板區(qū)域*/2. #msgCenter{3. width:600px;/*寬度600px*/4. background-color:white;/*背景顏色白色*/5. border-radius:20px;/*圓角邊框*/6. margin:0auto;/*外邊距上下0左右auto*/7. padding:20px;/*內(nèi)邊距20px*/8. 9. }10. /*留言板區(qū)域-h4標(biāo)題*/11. #msgCenterh4{12. text-align:left;/*文本左對(duì)齊*/13. }2. 寫(xiě)留言區(qū)域使用多行文本框<textarea>和按鈕<button>完善寫(xiě)留言區(qū)域，代碼片段如下：1. <!--留言板區(qū)域-->2. <divid="msgCenter">3. <!--1寫(xiě)留言區(qū)域-->4. <divid="msgLeave">5. <!--1-1標(biāo)題-->6. <h4>寫(xiě)留言</h4>7. <!--1-2多行文本框-->8. <textareaid="txtArea"rows="7"></textarea>9. <!--1-3提交按鈕-->10. <buttonid="submitBtn">提交</button>11. </div>12. </div>為多行文本框<textarea>和按鈕<button>分別添加了id屬性方便后續(xù)定位，其中多行文本框使用了rows屬性表示默認(rèn)至少顯示7行。在CSS外部樣式表中為多行文本框設(shè)置樣式，相關(guān)CSS代碼如下：1. /*寫(xiě)留言區(qū)域-多行文本框*/2. #msgLeave#txtArea{3. width:100%;/*寬度100%*/4. font-size:18px;/*字體大小18px*/5. margin:0auto;/*外邊距上下0左右auto*/6. }3. 精選留言區(qū)域使用無(wú)序列表<ul>配合列表項(xiàng)<li>完善精選留言區(qū)域中的留言列表，代碼片段如下：1. <!--留言板區(qū)域-->2. <divid="msgCenter">3. <!--1寫(xiě)留言區(qū)域（…代碼略…）-->4. <!--2精選留言區(qū)域-->5. <divid="msgList">6. <!--2-1標(biāo)題-->7. <h4>精選留言</h4>8. <!--2-2留言列表-->9. <ul>10. <!--2-2-1單個(gè)列表項(xiàng)-->11. <li>12. <!--2-2-1（1）頭像-->13. <imgclass="avatarImg"src="image/avatar/1.png"alt="">14. <!--2-2-1（2）文字區(qū)域-->15. <divclass="infoBox"></div>16. </li>17. </ul>18. </div>19. </div>這里可以先制作一個(gè)<li>元素查看效果，開(kāi)發(fā)者后續(xù)可以自行追加多個(gè)列表留言。在<li>元素內(nèi)部使用了<imgclass="avatarImg"和<divclass="infoBox">分別表示頭像和留言信息區(qū)域，其中頭像圖片來(lái)源為image/avatar目錄下的1.png。（注：因?yàn)榱斜碓仉S著留言增加會(huì)有多個(gè)，所以這里不要用id屬性來(lái)區(qū)分頭像和留言信息區(qū)。）在CSS外部樣式表中為列表以及內(nèi)部元素設(shè)置樣式，相關(guān)CSS代碼如下：1. /*精選留言區(qū)域-列表*/2. #msgListul{3. list-style:none;/*清除列表裝飾點(diǎn)*/4. width:100%;/*寬度100%*/5. height:auto;/*高度根據(jù)內(nèi)容自適應(yīng)*/6. display:block;/*塊級(jí)元素*/7. margin:0;/*清除外邊距*/8. padding:0;/*清除內(nèi)邊距*/9. text-align:left;/*文本左對(duì)齊*/10. }11. /*精選留言區(qū)域-列表項(xiàng)*/12. #msgListulli{13. width:100%;/*寬度100%*/14. height:auto;/*高度根據(jù)內(nèi)容自適應(yīng)*/15. margin:30px0;/*外邊距上下30px左右0*/16. position:relative;/*相對(duì)位置參照物*/17. }18. /*精選留言區(qū)域-頭像*/19. #msgList.avatarImg{20. width:60px;/*寬度60px*/21. height:60px;/*高度60px*/22. position:absolute;/*絕對(duì)定位*/23. top:10px;/*距離頂部10px*/24. left:0;/*距離左邊0px*/25. }26. /*精選留言區(qū)域-文字區(qū)域*/27. #msgList.infoBox{28. margin-left:80px;/*外邊距左側(cè)80px*/29. }細(xì)化一下留言文字區(qū)域內(nèi)部的內(nèi)容，分成用戶(hù)昵稱(chēng)和留言文字，代碼如下：1. <!--2-2-1單個(gè)列表項(xiàng)-->2. <li>3. <!--2-2-1（1）頭像（…代碼略…）-->4. <!--2-2-1（2）文字區(qū)域-->5. <divclass="infoBox">6. <!--2-2-1（2）文字區(qū)域-昵稱(chēng)-->7. <divclass="nickName">萌小兔</div>8. <!--2-2-1（2）文字區(qū)域-留言?xún)?nèi)容-->9. <divclass="msgBox">新年快樂(lè)，萬(wàn)事順意！</div>10. </div>11. </li>這里的昵稱(chēng)和留言?xún)?nèi)容可以由開(kāi)發(fā)者自定義。為文字區(qū)域內(nèi)部的昵稱(chēng)和留言?xún)?nèi)容設(shè)置樣式，相關(guān)CSS代碼如下：1. /*精選留言區(qū)域-文字區(qū)域-昵稱(chēng)*/2. #msgList.infoBox.nickName{3. width:100%;/*寬度100%*/4. height:50px;/*高度50px*/5. line-height:50px;/*行高60px*/6. }7. /*精選留言區(qū)域-文字區(qū)域-留言消息*/8. #msgList.infoBox.msgBox{9. font-size:20px;/*字體大小20px*/10. }此時(shí)CSS樣式設(shè)置就全部完成了。10.6.3邏輯實(shí)現(xiàn)留言提交動(dòng)作需要使用到j(luò)Query的相關(guān)功能，因此首先在<head>標(biāo)簽中添加對(duì)于jQuery的調(diào)用。在js文件夾中創(chuàng)建message.js文件，并在MessageCenter.html文件的<head>首尾標(biāo)簽中聲明對(duì)JS文件的引用。相關(guān)HTML5代碼修改后如下：1. <head>2. <metacharset="utf-8">3. <title>簡(jiǎn)易留言板效果</title>4. <linkrel="stylesheet"href="css/message.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/message.js"></script>7. </head>在message.js文件中先聲明用戶(hù)昵稱(chēng)和頭像來(lái)源，相關(guān)代碼如下：1. //初始化參數(shù)2. varnick_name="用戶(hù)001";//當(dāng)前用戶(hù)名稱(chēng)可更改3. varavatar_url="image/avatar/2.png";//當(dāng)前用戶(hù)頭像在message.js文件中封裝一個(gè)自定義函數(shù)appendMsg(msg)，將留言文本以參數(shù)msg傳遞給函數(shù)使用，在精選留言區(qū)域的留言列表中新增列表項(xiàng)，相關(guān)代碼如下：1. //追加留言