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

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計-第2版學(xué)校名稱：XXXX主講教師：XXXX第10章jQueryHTMLDOM 前言

DOM指的是DocumentObjectModel（文檔對象模型），jQuery提供了一系列與DOM相關(guān)的方法能讓用戶更方便的選擇和操作HTML文檔中的元素及其屬性。本章主要內(nèi)容是jQueryHTMLDOM技術(shù)的應(yīng)用，包括jQuery獲取和設(shè)置、添加、刪除、類屬性設(shè)置以及尺寸相關(guān)函數(shù)的應(yīng)用。本章學(xué)習(xí)目標(biāo)掌握jQuery獲取和設(shè)置相關(guān)函數(shù)的使用；掌握jQuery添加相關(guān)函數(shù)的使用；掌握jQuery刪除相關(guān)函數(shù)的使用；掌握jQuery類屬性設(shè)置相關(guān)函數(shù)的使用；掌握jQuery尺寸相關(guān)系列函數(shù)的使用。目錄10.1jQuery獲取和設(shè)置

10.2jQuery添加 10.3jQuery刪除

10.4jQuery類屬性

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