《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH10 jQuery HTML DOM；CH11 jQuery遍历

JavaScript与jQuery

网页前端开发与设计-第2版学校名称：XXXX主讲教师：XXXX第10章jQueryHTMLDOM 前言

DOM指的是DocumentObjectModel（文档对象模型），jQuery提供了一系列与DOM相关的方法能让用户更方便的选择和操作HTML文档中的元素及其属性。本章主要内容是jQueryHTMLDOM技术的应用，包括jQuery获取和设置、添加、删除、类属性设置以及尺寸相关函数的应用。本章学习目标掌握jQuery获取和设置相关函数的使用；掌握jQuery添加相关函数的使用；掌握jQuery删除相关函数的使用；掌握jQuery类属性设置相关函数的使用；掌握jQuery尺寸相关系列函数的使用。目录10.1jQuery获取和设置

10.2jQuery添加 10.3jQuery删除

10.4jQuery类属性

10.5jQuery尺寸10.6阶段案例：仿公众号留言板 10.1jQuery获取和设置jQuery能获取或设置5种特定内容，具体见表所示。10.1jQuery获取和设置10.1.1jQuerytext() 10.1.2jQueryhtml() 10.1.3jQueryval()10.1.4jQueryattr()10.1.5jQuerycss()10.1.1jQuerytext()jQuerytext()可用于获取或设置选定元素标签之间的文本内容，不包含元素标签本身。10.1.1jQuerytext()1. 获取文本内容当使用不带任何参数的text()方法，可以获取选定元素标签之间所有的文本内容。其语法格式如下：该方法的返回结果为字符串类型，包含了所有匹配元素内部的文本内容。$(selector).text()10.1.1jQuerytext()1. 获取文本内容例如id="test01"的段落元素<p>表示如下：使用$("p#test01").text()方法获取其中的文本内容，返回值为：返回值只包含文本内容，不带有前后的HTML标签。<pid="test01">hello</p>hello10.1.1jQuerytext()1. 获取文本内容如果是元素内部的后代元素中包含有文本，则使用text()也会获取其中的文本内容。例如以下情况：<divid="container"><p>element<i>1</i></p><p>element<strong>2</strong></p></div>10.1.1jQuerytext()1. 获取文本内容上述代码在id="container"的<div>元素中包含了两个段落元素<p>，并且这两个段落元素内部的文本内容还分别包括了格式标签<i>和<strong>。此时使用$("div#container").text()方法获取该<div>元素的文本内容，返回值为：返回值只包含文本内容，其中的格式化标签<i>和<strong>均被忽略。element1element210.1.1jQuerytext()1. 获取文本内容需要注意的是，text()方法不能用于处理表单元素的文本内容，如果需要获取或设置表单中<textarea>或<input>元素的文本值需要使用val()方法。10.1.1jQuerytext()2. 设置文本内容设置选定元素标签之间文本内容的方法如下：$(selector).text("新文本内容")10.1.1jQuerytext()【例10-1】jQuerytext()方法获取和设置文本内容10.1.2jQueryhtml()jQueryhtml()用于获取或设置选定元素标签的全部内容，包括内部的文本以及其他HTML标记。该方法调用的是JavaScript原生属性innerHTML。10.1.2jQueryhtml()1. 获取HTML内容获取选定元素标签之间HTML代码内容的方法如下：作为获取元素的HTML内容时，该方法无需带有参数。$(selector).html()10.1.2jQueryhtml()1. 获取HTML内容例如某段HTML代码如下：使用$("div.test").html()获取到的结果如下：<divclass="test"><div>这是一段内容。</div></div><div>这是一段内容。</div>10.1.2jQueryhtml()1. 获取HTML内容需要注意的是，如果符合要求的元素不止一个，该方法也只获取第一个符合选择器要求的元素内部HTML代码。例如：<divclass="test"><divclass="style01">这是第一段内容。</div></div><divclass="test"><divclass="style02">这是第二段内容。</div></div>10.1.2jQueryhtml()1. 获取HTML内容上述代码中有两个<div>均具有相同属性class="test"，其内部HTML代码不同。使用$("div.test").html()方法获取的结果如下：该方法表示获取属性class="test"的<div>标签内部HTML代码。由于class属性可以分配给任意元素，因此如果有多个<div>元素符合class="test"条件，也只获取第一个符合的元素标签内部的HTML代码。<divclass="style01">这是第一段内容。</div>10.1.2jQueryhtml()2. 设置HTML内容设置选定元素标签之间HTML内容的方法如下：$(selector).html("新HTML内容")10.1.2jQueryhtml()【例10-2】jQueryhtml()方法获取和设置HTML内容10.1.3jQueryval()jQueryval()用于获取或设置选定表单元素的value属性值。10.1.3jQueryval()1. 获取表单元素值获取选定元素标签之间文本内容的方法如下：$(selector).val()10.1.3jQueryval()2. 设置表单元素值设置选定元素标签之间文本内容的方法如下：$(selector).val("新文本内容")10.1.3jQueryval()【例10-3】jQueryval()方法获取和设置表单元素字段值10.1.4jQueryattr()jQueryattr()用于获取或设置选定元素的属性值。10.1.4jQueryattr()1. 获取元素属性值获取选定元素标签之间文本内容的方法如下：该方法只能获取符合条件的第一个元素的值。$(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. 设置元素属性值设置选定元素标签之间文本内容的方法如下：该方法可以将所有符合条件的元素属性值全部设置。例如：上述代码会将所有超链接元素<a>的href属性更改为。$(selector).attr(attributeName,value)$("a").attr("href","")10.1.4jQueryattr()【例10-4】jQueryattr()方法获取和设置元素属性值10.1.5jQuerycss()jQuerycss()用于获取或设置选定元素的CSS属性值。10.1.5jQuerycss()1. 获取CSS属性值获取选定元素标签CSS属性的方法如下：其中selector可以是任意有效的jQuery选择器，propertyName参数位置为CSS属性名称。该方法可以获得符合条件的第一个元素的指定CSS属性值。$(selector).css(propertyName)10.1.5jQuerycss()1. 获取CSS属性值例如：上述代码表示获取页面上第一个段落元素<p>的背景颜色。varbgColor=$("p").css("background-color");10.1.5jQuerycss()1. 获取CSS属性值在jQuery1.9版本中新增了数组类型的propertyName参数，用于批量获取元素的多个属性值。其语法格式如下：其中selector参数位置可以是任意有效的选择器，propertyNames参数位置为CSS属性名称的数组。该方法返回值为数据形式，包含了符合条件的第一个元素的指定CSS属性值。$(selector).css(propertyNames)10.1.5jQuerycss()1. 获取CSS属性值例如：上述代码的返回值包含了页面上第一个段落元素<p>的背景颜色、字体颜色与字体大小。varprops=$("p").css(["background-color","color","font-size"]);10.1.5jQuerycss()2. 设置CSS属性值设置选定元素标签CSS属性值的方法如下：其中selector参数位置可以是任意有效的选择器，propertyName参数位置为CSS属性名称，value参数位置为字符串或数值类型的CSS属性值。该方法可以批量设置所有符合条件元素的指定CSS属性值。$(selector).css(propertyName,value)10.1.5jQuerycss()2. 设置CSS属性值例如，将页面上所有段落元素<p>的字体颜色更新为红色，写法如下：$("p").css("color","red");10.1.5jQuerycss()2. 设置CSS属性值如果有多个CSS属性需要同时设置，语法结构如下：即在css()方法中填入一个自定义对象，该对象中的成员名称为CSS属性名称，成员的值为对应的CSS属性值。此时属性名称不需要加引号，并且需要写成Camel标记法的形式。例如字体粗细font-weight在这里需要改写成fontWeight。$(selector).css({propertyName1:value1,propertyName2:value2...,propertyNameN:valueN});10.1.5jQuerycss()2. 设置CSS属性值例如，将所有的段落元素设置为字体加粗、背景颜色为浅蓝色，写法如下：$("p").css({fontWeight:"bold",backgroundColor:"lightblue"});10.1.5jQuerycss()【例10-5】jQuerycss()方法获取和设置元素属性值10.2jQuery添加jQuery可以快速在页面上添加新元素或内容，有四种常见用法如下：append()：在指定元素内部的结尾插入内容。prepend()：在指定元素内部的开头插入内容。after()：在指定元素之后添加内容。before()：在指定元素之前添加内容。10.2jQuery添加10.2.1jQueryappend()和prepend() 10.2.2jQueryafter()和before() 10.2.1jQueryappend()和prepend() jQueryappend()方法用于在所有符合条件的元素内部结尾处追加内容。append()方法的语法格式如下：其中content参数的类型可以是文本、数组、HTML代码或元素标签。append(content[,content])10.2.1jQueryappend()和prepend() jQueryprepend()与append()方法的参数完全相同，只不过追加位置从指定元素内部的结尾处变更为开头处。prepend()方法的语法格式如下：prepend(content[,content])10.2.1jQueryappend()和prepend() 1. 追加文本使用append()或prepend()方法添加文本内容允许带有格式化标签。例如下面这段HTML代码：<divid="test"><div>这是第一个子元素。</div><div>这是第二个子元素。</div></div>10.2.1jQueryappend()和prepend() 1. 追加文本对其使用jQueryappend()方法选定id="test"的<div>元素，并在其内部追加文本内容。相关jQuery代码如下：$("div#test").append("这段文本带有<i>格式化</i>标签。");10.2.1jQueryappend()和prepend() 1. 追加文本HTML代码片段更新如下：<divid="test"><div>这是第一个子元素。</div><div>这是第二个子元素。</div>这段文本带有<i>格式化</i>标签。</div>10.2.1jQueryappend()和prepend() 1. 追加文本上述jQuery代码相当于下面这段JavaScript代码：由此可见，jQuery化简了JavaScript关于文本内容创建与添加的代码。//创建一个新的文本节点vartext=document.createTextNode("这段文本带有<i>格式化</i>标签。");//获取id="test"的<div>元素vardiv=document.getElementById("test");//将新建的文本内容添加到指定的div元素中去div.appendChild(p);10.2.1jQueryappend()和prepend() 1. 追加文本如果换成使用prepend()方法追加文本内容，相关jQuery代码如下：HTML代码片段更新如下：<divid="test">这段文本带有<i>格式化</i>标签。<div>这是第一个子元素。</div><div>这是第二个子元素。</div></div>$("div#test").prepend("这段文本带有<i>格式化</i>标签。");10.2.1jQueryappend()和prepend() 2. 追加元素使用append()或prepend()方法添加新元素可以直接在参数位置填入相关HTML代码。以append()为例，添加一个新的标题元素<h1>的方法如下：append("<h1>这是一个标题</h1>")10.2.1jQueryappend()和prepend() 2. 追加元素例如，使用append()方法在指定元素的内容结尾处添加段落元素<p>。相关HTML代码片段如下：<divid="test"><div>这是第一个子元素。</div><div>这是第二个子元素。</div></div>10.2.1jQueryappend()和prepend() 2. 追加元素使用jQueryappend()方法选定id="test"的<div>元素，并在其内部追加子元素。相关jQuery代码如下：HTML代码片段更新如下：<divid="test"><div>这是第一个子元素。</div><div>这是第二个子元素。</div><p>这是新的子元素。</p></div>$("div#test").append("<p>这是新的子元素。</p>");10.2.1jQueryappend()和prepend() 2. 追加元素上述jQuery代码相当于下面这段JavaScript代码：由此可见，jQuery大幅度化简了JavaScript中关于元素创建与添加的代码。//创建一个新的段落元素<p>varp=document.createElement("p");//为该段落元素添加文本内容p.innerHTML="这是新的子元素。";//获取id="test"的<div>元素vardiv=document.getElementById("test");//将新建的段落元素<p>添加到指定的div元素中去div.appendChild(p);10.2.1jQueryappend()和prepend() 2. 追加元素如果换成使用prepend()方法追加元素，相关jQuery代码如下：HTML代码片段更新如下：<divid="test"><p>这是新的子元素。</p><div>这是第一个子元素。</div><div>这是第二个子元素。</div></div>$("div#test").prepend("<p>这是新的子元素。</p>");10.2.1jQueryappend()和prepend() 2. 追加元素如果在append()或prepend()方法的参数位置使用选择器可以将已存在的其他元素对象移动到指定元素中。例如以下这种情况：<h3>这是一个标题</h3><divid="test"><p>这是一个段落</p></div>10.2.1jQueryappend()和prepend() 2. 追加元素对其使用$("div#test").append($("h3"))会将标题元素<h3>整个移动到<div>元素中。运行结果如下：<divid="test"><h3>这是一个标题</h3><p>这是一个段落</p></div>10.2.1jQueryappend()和prepend() 3. 追加混合内容如果有不同类型的内容（比如文本和HTML元素）需要同时添加，可以在参数位置添加若干个变量，其间用逗号隔开即可。10.2.1jQueryappend()和prepend() 3. 追加混合内容例如这段代码将分别创建新的段落元素、标题元素和一段文本内容，并按照先后顺序添加到id="test"的<div>元素内部的结尾处。//使用HTML代码创建段落元素varp="<p>段落元素</p>";//使用JavaScript代码创建标题元素varh1=document.createElement("h1");h1.innerHTML="标题元素";//创建文本内容vartext="纯文本内容";//依次追加到id="test"的<div>元素中$("div#test").append(p,[h1,text]);10.2.1jQueryappend()和prepend() 【例10-6】jQueryappend()和prepend()方法追加内容10.2.2jQueryafter()和before()jQueryafter()方法分别用于在选定元素之后加入新的内容。after()方法的语法格式如下：其中content参数的类型可以是文本、数组、HTML代码或元素标签。after(content[,content])10.2.2jQueryafter()和before()jQuerybefore()与after()方法的参数完全相同，只不过追加位置从指定元素之后变更为元素之前。before()方法的语法格式如下：before(content[,content])10.2.2jQueryafter()和before()1. 追加文本使用after()或before()方法添加文本内容允许带有格式化标签。例如下面这段HTML代码：<pid="test">这是测试用的段落元素</p>10.2.2jQueryafter()和before()1. 追加文本对其使用jQueryafter()方法在该元素后面追加文本内容。相关jQuery代码如下：HTML代码片段更新如下：这段文本带有<i>格式化</i>标签。$("p#test").append("这段文本带有<i>格式化</i>标签。");<pid="test">这是测试用的段落元素</p>10.2.2jQueryafter()和before()1. 追加文本如果换成使用before()方法追加文本内容，相关jQuery代码如下：HTML代码片段更新如下：$("div#test").before("这段文本带有<i>格式化</i>标签。");这段文本带有<i>格式化</i>标签。<pid="test">这是测试用的段落元素</p>10.2.2jQueryafter()和before()2. 追加元素使用after()或before()方法添加新元素可以直接在参数位置填入相关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>元素，并在其后面追加段落元素。相关jQuery代码如下：HTML代码片段更新如下：<divid="test">这是一个测试元素。</div><p>这是一个段落元素。</p>$("div#test").after("<p>这是一个段落元素。</p>");10.2.2jQueryafter()和before()2. 追加元素如果换成使用before()方法追加元素，相关jQuery代码如下：HTML代码片段更新如下：<p>这是一个段落元素。</p><divid="test">这是一个测试元素。</div>$("div#test").before("<p>这是一个段落元素。</p>");10.2.2jQueryafter()和before()2. 追加元素如果在after()或before()方法的参数位置使用选择器可以将已存在的其他元素对象移动到指定位置。例如以下这种情况：<h3>这是一个标题</h3><div><pid="test">这是一个段落</p></div>10.2.2jQueryafter()和before()2. 追加元素对其使用$("p#test").after($("h3"))会将标题元素<h3>整个移动到<p>元素后面。运行结果如下：<divid="test"><p>这是一个段落</p> <h3>这是一个标题</h3></div>10.2.2jQueryafter()和before()3. 追加混合内容如果有不同类型的内容（比如文本和HTML元素）需要同时添加，可以在参数位置添加若干个变量，其间用逗号隔开即可。10.2.2jQueryafter()和before()3. 追加混合内容例如这段代码将分别创建新的段落元素、标题元素和一段文本内容，并按照先后顺序添加到id="test"的<div>元素内部的结尾处。//使用HTML代码创建段落元素varp="<p>段落元素</p>";//使用JavaScript代码创建标题元素varh1=document.createElement("h1");h1.innerHTML="标题元素";//创建文本内容vartext="纯文本内容";//依次追加到id="test"的<div>元素中$("div#test").after(p,[h1,text]);10.2.2jQueryafter()和before()【例10-7】jQueryafter()和before()方法追加内容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()方法也可以在括号中填入一个参数，用于筛选出特定的元素进行删除。该参数可以是任何jQuery选择器的语法。例如，删除所有class="style01"的段落元素<p>的写法如下：$("p").remove(".style01");10.3.1jQueryremove()【例10-8】jQueryremove()方法的简单应用10.3.2jQueryempty()jQueryempty()用于清空元素，即从指定元素中删除其子元素和文本内容。其语法格式如下：该方法仅用于清空元素内部的内容，但保留元素本身的结构。$(selector).empty();10.3.2jQueryempty()例如下面这种情况：使用$("h1").empty()方法清空标题元素<h1>，运行结果如下：由此可见，指定元素的首尾标签仍保留在页面结构中。<h1>这是标题</h1><p>这是段落</p><h1></h1><p>这是段落</p>10.3.2jQueryempty()【例10-9】jQueryempty()方法的简单应用10.3.3jQueryremoveAttr()jQueryremoveAttr()用于删除元素的指定属性，其语法格式如下：$(selector).removeAttr(propertyName);10.3.3jQueryremoveAttr()例如下面这种情况：使用$("p").removeAttr("id")方法可以清除段落元素的id属性，运行结果如下：<p>这是段落</p><pid="test">这是段落</p>10.3.3jQueryremoveAttr()【例10-10】jQueryremoveAttr()方法的简单应用10.4jQuery类属性jQuery中还有一系列操作CSS类的方法，这里主要介绍其中三种：addClass()：为元素添加指定名称的class属性。removeClass()：为元素删除指定名称的class属性。toggleClass()：为元素添加/删除（切换）指定名称的class属性。10.4jQuery类属性10.4.1jQueryaddClass() 10.4.2jQueryremoveClass() 10.4.3jQuerytoggleClass()10.4.1jQueryaddClass()当需要为元素设置多项CSS样式属性时，除了使用css()方法逐行添加还可以使用addClass()方法直接为元素添加CSS样式表中的类名称。10.4.1jQueryaddClass()例如这段代码为CSS样式表内容，表示声明了一种类名称为style01的样式集合，包括字体颜色为红色，背景颜色为黄色，字体大小为20像素，各边内外边距为20像素。<style>.style01{color:red;background-color:yellow;font-size:20px;margin:20px;padding:20px;}</style>10.4.1jQueryaddClass()如果使用css()方法为指定元素添加这些属性，需要写大量的代码。但若使用addClass()方法只需一行代码，如下：如果有多个CSS类需要同时添加，可以都写在addClass()方法的参数位置，之间用空格隔开即可。例如：上述代码表示为段落元素添加class="style01style02"属性。$("p").addClass("style01");$("p").addClass("style01style02");10.4.2jQueryremoveClass()如果需要为元素取消某个CSS样式的类名称，只要使用removeClass()方法即可。其语法格式如下：其中selector为任意有效的jQuery选择器，className参数位置需要填入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参数位置需要填入CSS样式的类名称。$(selector).toggleClass(className)10.4.3jQuerytoggleClass()例如：上述代码表示为段落元素<p>删除或添加class="style01"属性。同样可以一次性添加或删除多个class属性。例如：上述代码表示为段落元素<p>删除或添加class="style01style02"属性。这里的CSS类名称可以填入任意数量。$("p").toggleClass("style01");$("p").toggleClass("style01style02");10.4.3jQuerytoggleClass()【例10-12】jQuery添加/删除CSS类的切换10.5jQuery尺寸jQuery还提供了一系列方法用于获取和设置元素或浏览器窗口的尺寸。如表所示。方法名称解释width()获取或设置元素的宽度（不包括内外边距和边框宽度）。height()获取或设置元素的高度（不包括内外边距和边框宽度）。innerWidth()获取或设置元素的宽度（包括内边距）。innerHeight()获取或设置元素的高度（包括内边距）。outerWidth()获取或设置元素的宽度（包括内边距和边框宽度）。outerHeight()获取或设置元素的高度（包括内边距和边框宽度）。10.5jQuery尺寸当以上这些方法不带任何参数值时，表示获取元素的尺寸。例如：上述代码表示获取<div>元素的宽度（不包含内外边距和边框宽度）。varwidth=$("div").width();10.5jQuery尺寸当width()或height()方法的参数值为数值时，可以用于设置元素的尺寸。例如：上述代码表示将<div>元素的宽度（不包含内外边距和边框宽度）设置为300像素。varwidth=$("div").width(300);10.5jQuery尺寸如果需要获取带有外边距的尺寸，可以使用outerWidth()或outerHeight()方法加上参数值true来表示。例如：上述代码表示获取<div>元素的宽度（包含内外边距和边框宽度）。varwidth=$("div").outerWidth(true);10.5jQuery尺寸【例10-13】jQuery获取元素尺寸10.6阶段案例：仿公众号留言板10.6.1案例需求10.6.2界面设计10.6.3逻辑实现10.6.4案例思考10.6.1案例需求背景介绍：留言板又被称为留言簿或留言本，也是目前互联网上使用最广泛的一种用户互相沟通交流的方式，例如日常的微博留言、微信公众号留言、微信朋友圈评论留言等。很多主流媒体、地方政府网站也开设了留言或咨询版块倾听人民心声、解决实际问题，例如人民日报在其官网上开设了领导留言板（如上图所示）,是专门为中央部委和地方各级党委政府主要负责同志搭建的网上群众工作平台,走好网上群众路线,开展网上群众工作。功能要求：使用jQuery制作一款仿公众号风格的简易留言板。10.6.2界面设计1. 整体布局本案例主要分成写留言和精选留言两个区域，其中写留言区域内部包含标题、多行文本框和按钮，精选留言区域包含标题、若干个留言列表竖着排列，每个列表项里面均包含用户的头像图片、用户昵称和具体留言内容。结构如图所示。10.6.2界面设计1. 整体布局创建一个HTML文件，文件名可自定义，例如MessageCenter.html。在HTML5中使用<divid="msgCenter">元素声明留言板区域，在其中嵌套<divid="msgLeave">和<divid="msgList">分别表示写留言区域和精选留言区域，相关代码如下：1. <body>2. <!--标题-->3. <h3>简易留言板效果</h3>4. <!--水平线-->5. <hr/>6. <!--留言板区域-->7. <divid="msgCenter">8. <!--1写留言区域-->9. <divid="msgLeave">10. <!--1-1标题-->11. <h4>写留言</h4>12. </div>13. <!--2精选留言区域-->14. <divid="msgList">15. <!--2-1标题-->16. <h4>精选留言</h4>17. </div>18. </div>19. </body>10.6.2界面设计1. 整体布局本示例使用CSS外部样式表规定页面样式。在本地css文件夹中创建message.css文件，并在HTML5文件的<head>首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下：在CSS外部样式表中设置公共样式，相关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;/*盒子尺寸包含了边框和内边距*/4. }5. body{6. background-color:#f5f5f5;/*背景颜色灰白色*/7. text-align:center;/*文本居中*/8. }10.6.2界面设计1. 整体布局为留言板区域和通用标题设置样式，相关CSS代码如下：1. /*留言板区域*/2. #msgCenter{3. width:600px;/*宽度600px*/4. background-color:white;/*背景颜色白色*/5. border-radius:20px;/*圆角边框*/6. margin:0auto;/*外边距上下0左右auto*/7. padding:20px;/*内边距20px*/8. 9. }10. /*留言板区域-h4标题*/11. #msgCenterh4{12. text-align:left;/*文本左对齐*/13. }10.6.2界面设计2.写留言区域使用多行文本框<textarea>和按钮<button>完善写留言区域，代码片段如下：为多行文本框<textarea>和按钮<button>分别添加了id属性方便后续定位，其中多行文本框使用了rows属性表示默认至少显示7行。1. <!--留言板区域-->2. <divid="msgCenter">3. <!--1写留言区域-->4. <divid="msgLeave">5. <!--1-1标题-->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界面设计2.写留言区域在CSS外部样式表中为多行文本框设置样式，相关CSS代码如下：1. /*写留言区域-多行文本框*/2. #msgLeave#txtArea{3. width:100%;/*宽度100%*/4. font-size:18px;/*字体大小18px*/5. margin:0auto;/*外边距上下0左右auto*/6. }10.6.2界面设计3.精选留言区域使用无序列表<ul>配合列表项<li>完善精选留言区域中的留言列表，代码片段如下：1. <!--留言板区域-->2. <divid="msgCenter">3. <!--1写留言区域（…代码略…）-->4. <!--2精选留言区域-->5. <divid="msgList">6. <!--2-1标题-->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）文字区域-->15. <divclass="infoBox"></div>16. </li>17. </ul>18. </div>19. </div>这里可以先制作一个<li>元素查看效果，开发者后续可以自行追加多个列表留言。在<li>元素内部使用了<imgclass="avatarImg"和<divclass="infoBox">分别表示头像和留言信息区域，其中头像图片来源为image/avatar目录下的1.png。（注：因为列表元素随着留言增加会有多个，所以这里不要用id属性来区分头像和留言信息区。）10.6.2界面设计3.精选留言区域在CSS外部样式表中为列表以及内部元素设置样式，相关CSS代码如下：1. /*精选留言区域-列表*/2. #msgListul{3. list-style:none;/*清除列表装饰点*/4. width:100%;/*宽度100%*/5. height:auto;/*高度根据内容自适应*/6. display:block;/*块级元素*/7. margin:0;/*清除外边距*/8. padding:0;/*清除内边距*/9. text-align:left;/*文本左对齐*/10. }11. /*精选留言区域-列表项*/12. #msgListulli{13. width:100%;/*宽度100%*/14. height:auto;/*高度根据内容自适应*/15. margin:30px0;/*外边距上下30px左右0*/16. position:relative;/*相对位置参照物*/17. }18. /*精选留言区域-头像*/19. #msgList.avatarImg{20. width:60px;/*宽度60px*/21. height:60px;/*高度60px*/22. position:absolute;/*绝对定位*/23. top:10px;/*距离顶部10px*/24. left:0;/*距离左边0px*/25. }26. /*精选留言区域-文字区域*/27. #msgList.infoBox{28. margin-left:80px;/*外边距左侧80px*/29. }10.6.2界面设计3.精选留言区域细化一下留言文字区域内部的内容，分成用户昵称和留言文字，代码如下：这里的昵称和留言内容可以由开发者自定义。1. <!--2-2-1单个列表项-->2. <li>3. <!--2-2-1（1）头像（…代码略…）-->4. <!--2-2-1（2）文字区域-->5. <divclass="infoBox">6. <!--2-2-1（2）文字区域-昵称-->7. <divclass="nickName">萌小兔</div>8. <!--2-2-1（2）文字区域-留言内容-->9. <divclass="msgBox">新年快乐，万事顺意！</div>10. </div>11. </li>10.6.2界面设计3.精选留言区域为文字区域内部的昵称和留言内容设置样式，相关CSS代码如下：此时CSS样式设置就全部完成了，运行效果如图所示。1. /*精选留言区域-文字区域-昵称*/2. #msgList.infoBox.nickName{3. width:100%;/*宽度100%*/4. height:50px;/*高度50px*/5. line-height:50px;/*行高60px*/6. }7. /*精选留言区域-文字区域-留言消息*/8. #msgList.infoBox.msgBox{9. font-size:20px;/*字体大小20px*/10. }10.6.3逻辑实现留言提交动作需要使用到jQuery的相关功能，因此首先在<head>标签中添加对于jQuery的调用。在js文件夹中创建message.js文件，并在MessageCenter.html文件的<head>首尾标签中声明对JS文件的引用。相关HTML5代码修改后如下：在message.js文件中先声明用户昵称和头像来源，相关代码如下：1. <head>2. <metacharset="utf-8">3. <title>简易留言板效果</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>1. //初始化参数2. varnick_name="用户001";//当前用户名称可更改3. varavatar_url="image/avatar/2.png";//当前用户头像10.6.3逻辑实现在message.js文件中封装一个自定义函数appendMsg(msg)，将留言文本以参数msg传递给函数使用，在精选留言区域的留言列表中新增列表项，相关代码如下：1. //追加留言2. functionappendMsg(msg){3. //在留言列表末尾追加列表项4. $("#msgList

ul").append("<li></li>");5. //获取该列表项6. varli=$("#msgList

ul>li:last-child");7. 8. //生成头像9. varavatarImg='<imgclass="avatarImg"src="'+avatar_url+'"alt="">';10. //添加头像11. li.append(avatarImg);12. 13. //添加留言文字区域14. li.append('<divclass="infoBox"></div>');15. //生成昵称16. varnickName='<divclass="nickName">'+nick_name+'</div>';17. //生成留言内容18. varmsgBox='<divclass="msgBox">'+msg+'</div>';19. //在留言文字区域内依次添加昵称和留言内容20. $("#msgList

ul>li:last-child.infoBox").append(nickName,msgBox);21. }10.6.3逻辑实现在message.js的文档准备就绪函数中监听写留言区域按钮点击事件，相关代码如下：1. //文档准备就绪2. $(document).ready(function(){3. //提交按钮点击事件4. $("#submitBtn").click(function(){5. //获取留言文字内容6. varmsg=$("#txtArea").val();7. 8. //检查是否有内容9. if(msg==""){10. alert("尚未填写任何内容。");11. }else{12. //处理换行符号13. msg=msg.replace(/\n/g,"<br>");14. //追加留言15. appendMsg(msg);16. //清空留言文字内容17. $("#txtArea").val("");18. }19. });20. });由于多行文本框中获取到的留言内容是不带换行符号<br>的，因此使用replace()方法把全文中的”\n”都替换为换行符号<br>，这样最后就可以实现换行的显示效果了。10.6.3逻辑实现此时本项目就已经全部完成了，运行效果如图所示。10.6.4案例思考【拓展练习】是否可以在精选留言列表中为自己提交的留言显示“删除”按钮，点击后可删除此条留言数据？【进阶改造】是否可以在精选留言列表中为每条留言新增“回复”按钮，将同一条留言的回复以二级列表的形式展示出来？本章小结本章小结本章主要内容是jQuery对于文档对象模型DOM的使用方法。首先介绍了jQuery获取或重置元素的文本、HTML、表单值、元素属性值以及CSS属性值的方法；其次介绍了jQuery快速在页面上添加新元素或内容的用法；然后介绍了jQuery删除元素、清空内容或元素属性的方法；之后讲解了如何为元素添加、删除或切换类属性；最后介绍了获取/设置元素或浏览器窗口尺寸的一系列函数。本章阶段案例介绍了仿公众号留言板效果，使用jQueryDOM获取表单元素取值以及对列表项元素进行动态添加，最终实现了留言提交和展示功能。Thankyou！JavaScript与jQuery

网页前端开发与设计-第2版学校名称：XXXX主讲教师：XXXX第11章jQuery遍历本章学习目标了解什么是HTML家族树结构；掌握jQuery后代遍历相关函数children()、find()的使用；掌握jQuery同胞遍历相关函数siblings()、next()系列函数、prev()系列函数的使用；掌握jQuery祖先遍历相关函数parent()、parents()、parentsUntil()的使用。目录11.1HTML家族树简介 11.2jQuery后代遍历 11.3jQuery同胞遍历

11.4jQuery祖先遍历11.5阶段案例：仿电商购物车效果

11.1HTML家族树简介同一个HTML页面上的所有元素按照层次关系可以形成树状结构，这种结构称为家族树（FamilyTree）。最常见的遍历方式统称为树状遍历（TreeTraversal）。11.1HTML家族树简介根据移动的层次方向可以分为向下移动（后代遍历）、水平移动（同胞遍历）和向上移动（祖先遍历）。其中后代遍历指的是元素的子、孙、曾孙元素等；同胞遍历指的是具有同一个父元素的其他元素；祖先遍历指的是元素的父、祖父、曾祖父元素等。11.1HTML家族树简介例如以下这段HTML代码：<div><ul> <li>item01</li> <li>item02</li> </ul> <p>

这是一个<span>段落元素</span> </p></div>11.1HTML家族树简介元素关系解释如下：<div>元素：是无序列表元素<ul>和段落元素<p>的父元素，同时也是其他所有元素的祖先元素。<ul>元素：是两个列表选项元素<li>的父元素，也是<div>的子元素。与段落元素<p>互为同胞元素。<p>元素：是<span>元素的父元素，也是<div>的子元素。与无序列表元素<ul>互为同胞元素。<li>元素：是<ul>元素的子元素，同时也是<div>元素的后代。两个<li>元素互为同胞元素。<span>元素：是<p>元素的子元素，同时也是<div>元素的后代。该元素没有同胞元素。11.2jQuery后代遍历jQuery后代遍历指的是以指定元素为出发点，遍历该元素内部包含的子、孙、曾孙等后代元素，直到全部查找完毕。常用的方法有：children()：查找元素的直接子元素。find()：查找元素的全部后代，直到查找到最后一层元素。11.2jQuery后代遍历11.2.1jQuerychildren() 11.2.2jQueryfind()11.2.1jQuerychildren()jQuerychildren()方法只能查找指定元素的第一层子元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的子元素。.children([selector])11.2.1jQuerychildren()如果不填写任何参数，则表示查找所有的子元素。例如：上述代码表示查找HTML页面上所有段落元素<p>的子元素。$("p").children()11.2.1jQuerychildren()如果加上参数，可以进一步匹配子元素。例如：上述代码表示在HTML页面上所有段落元素<p>中查找class="style01"的子元素。$("p").children(".style01")11.2.1jQuerychildren()【例11-1】jQuery后代遍历children()方法的应用11.2.2jQueryfind()jQueryfind()方法可用于查找指定元素的所有后代元素，其语法结构如下：其中selector参数可以是任意jQuery选择器，用于进一步筛选需要匹配的子元素。.find(selector)11.2.2jQueryfind()例如：上述代码表示在段落元素<p>中找到所有的<span>元素，并为其设置1像素宽的红色实线边框。$("p").find("span").css("border","1pxsolidred");11.2.2jQueryfind()selector参数位置也可以填入元素对象。例如上述代码可以改写为以下内容：修改后的代码运行效果完全相同。varspans=$("span");$("p").find(spans).css("border","1pxsolidred");11.2.2jQueryfind()【例11-2】jQuery后代遍历find()方法的应用11.3jQuery同胞遍历jQuery同胞遍历指的是以指定元素为出发点，遍历与该元素具有相同父元素的同胞元素，直到全部查找完毕。11.3jQuery同胞遍历常用的方法有：siblings()：查找指定元素的所有同胞元素。next()：查找指定元素的下一个同胞元素。nextAll()：查找指定元素后面的所有同胞元素。nextUntil()：查找指定元素后面指定范围内的所有同胞元素。prev()：查找指定元素的前一个同胞元素。prevAll()：查找指定元素前面的所有同胞元素。prevUntil()：查找指定元素前面指定范围内的所有同胞元素。11.3jQuery同胞遍历11.3.1jQuerysiblings() 11.3.2jQuerynext()、nextAll()和nextUtil() 11.3.3jQueryprev()、prevAll()和prevUtil() 11.3.1jQuerysiblings()jQuerysiblings()方法可以查找指定元素的其他所有同胞元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的同胞元素。.siblings([selector])11.3.1jQuerysiblings()如果不填写任何参数，则表示查找所有的子元素。例如：上述代码表示查找段落元素<p>的所有同胞元素。$("p").siblings()11.3.1jQuerysiblings()如果加上参数，可以进一步匹配子元素。例如：上述代码表示查找所有与段落元素<p>具有相同的父元素，并且class="style01"的元素。$("p").siblings(".style01")11.3.1jQuerysiblings()【例11-3】jQuery同胞遍历siblings()方法的应用11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()jQuerynext()方法可以查找指定元素的下一个同胞元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的同胞元素。.next([selector])11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()如果不填写任何参数，则表示查找指定元素的下一个同胞元素。例如：上述代码表示查找段落元素<p>的下一个同胞元素。$("p").next()11.3.2jQuerynext()、nextAll()和nextUtil()1. jQuerynext()如果加上参数，可以进一步匹配同胞元素。例如：上述代码表示查找段落元素<p>的下一个同胞元素，并且该元素必须带有class="style01"属性，否则认为没有找到匹配元素。$("p").next(".style01")11.3.2jQuerynext()、nextAll()和nextUtil()2. jQuerynextAll()jQuerynextAll()方法可以查找指定元素后面的全部同胞元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的同胞元素。.nextAll([selector])11.3.2jQuerynext()、nextAll()和nextUtil()2. jQuerynextAll()如果不填写任何参数，则表示查找指定元素后面的所有同胞元素。例如：上述代码表示查找段落元素<p>后面所有的同胞元素。$("p").nextAll()11.3.2jQuerynext()、nextAll()和nextUtil()2. jQuerynextAll()如果加上参数，可以进一步匹配子元素。例如：上述代码表示查找class="style01"并在位置处于段落元素<p>后面的所有同胞元素。$("p").nextAll(".style01")11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()jQuerynextUntil()方法可以查找从指定元素开始，往后水平遍历直到指定元素结束的所有同胞元素，不包括作为结束标识的元素本身。其语法结构如下：其中selector和filter参数均为可选内容，可填入有效的jQuery选择器。参数selector表示水平遍历同胞元素时的结束位置，参数filter表示进一步筛选指定范围内的同胞元素。.nextUntil([selector][,filter])11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()例如以下这种情况：<div><pid="test1">第一个子元素</p><pid="test2">第二个子元素</p><pid="test3">第三个子元素</p><span>第四个子元素</span></div>11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()使用nextUntil()方法如下：上述语句表示从id="test1"的段落元素<p>后面开始查找其同胞元素，直到<span>元素为止，不包括结尾的<span>元素本身。查找结果为：$("p#test1").nextUntil("span")<pid="test2">第二个子元素</p><pid="test3">第三个子元素</p>11.3.2jQuerynext()、nextAll()和nextUtil()3. jQuerynextUntil()如果加上filter参数，可以进一步筛选指定范围内的同胞元素。例如：上述语句则表示在上述结果中进一步筛选id="test3"的元素。查找结果为：$("p#test1").nextUntil("span","#test3")<pid="test3">第三个子元素</p>11.3.2jQuerynext()、nextAll()和nextUtil()【例11-4】jQuery同胞遍历next()、nextAll()、nextUntil()方法的应用11.3.3jQueryprev()、prevAll()和prevUtil()1. jQueryprev()jQueryprev()方法可以查找指定元素的前一个同胞元素，其语法结构如下：其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的同胞元素。.prev([selector])11.3.3jQu