第7章JavaScript DOM程序设计案例教程_第1页
第7章JavaScript DOM程序设计案例教程_第2页
第7章JavaScript DOM程序设计案例教程_第3页
第7章JavaScript DOM程序设计案例教程_第4页
第7章JavaScript DOM程序设计案例教程_第5页
已阅读5页，还剩72页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript程序设计案例教程12第7章DOM1DOM介绍2HTML元素操作3DOM节点操作3学习目标了解什么是DOM了解HTML节点树掌握常见HTML元素操作掌握常见DOM节点操作4素质目标体会教育的重要性，增强学生的受教育意识关心国家大事，了解国家最新政策5什么是DOM7.1DOM介绍HTML节点树67.1DOM介绍7.1.1什么是DOMDOM是JavaScript操作HTML文档的重要手段。利用DOM可以获取和访问HTML文档的任何元素，还可以动态地在HTML文档中添加或修改元素、属性及样式等。DOM的前身为Netscape和微软创造的DHTML（动态HTML）。1998年10月，DOM1（DOMLevel1）正式成为W3C的推荐标准。随着网页技术的发展，DOM2（DOMLevel2）、DOM3（DOMLevel3）及DOM4（DOMLevel4）相继出现。DOM2发布于2000年11月，其在DOM1的基础上新增了节点操作方法，提供了访问和改变CSS样式的能力。DOM3发布于2004年4月，其在DOM2基础上新增了一些事件及加载与保存模块。目前DOM已经被大部分浏览器所支持。77.1DOM介绍7.1.2HTML节点树HTML文档包含许多标签，标签加上其中的内容就组成了元素，这些元素共同组成了一个完整的树形结构。标签也称为节点（node），因此一个完整的HTML文档可以看作是由标签组成的节点树，各节点处在节点树的不同位置，具体示例如下：<!DOCTYPEhtml><htmllang="zh-CN"><head>详情见教材87.1DOM介绍上述代码中，不同的HTML标签有不同的作用，如<title>标签标识网页标题，<a>标签标识网页链接；不同的标签又具有不同的属性，如<a>标签具有href属性；不同的标签中也包含不同的内容。一般把标签称为元素节点；属性称为属性节点；标签中的内容，如文本称为文本节点；HTML文档中的注释称为注释节点。一个完整的HTML节点树如右图7-1所示。HTML节点树97.1DOM介绍图7-1展示了HTML节点树中的各节点及它们之间的关系，下面简单介绍常见节点类别。根节点<html>是整个HTML节点树的根节点，一个HTML文档仅有一个html元素。子节点子节点为某个元素节点的下级节点，如<head>和<body>为<html>元素的子节点，通常一个HTML文档仅有一个<head>和一个<body>元素。父节点父节点为某个节点的上级节点，如<head>元素为<meta>元素和<title>元素的父节点。兄弟节点兄弟节点为拥有同一个父节点的节点，如<h1>元素和<div>元素为兄弟节点。叶节点叶节点为无子节点的节点，如文本节点hello。10获取元素7.2HTML元素操作元素内容元素样式元素属性【示例】实现模态对话框117.2HTML元素操作7.2HTML元素操作日常开发中，经常需要对HTML文档元素进行操作，如获取某个元素，修改某个元素内容，修改元素样式等。下面将对常见HTML元素操作进行介绍。127.2.1获取元素通常利用document对象中的方法来获取HTML中的元素，具体如下表7-1所示。7.2HTML元素操作获取元素的方法由表7-1可以看出，除getElementById()方法是获取某一个元素之外，另外3个方法都是获取满足条件的所有元素。13下面通过实例演示几个方法的使用。【例7-1】使用document对象中的方法获取HTML中的元素。（实例位置：example/ch7/7-1.html）（1）编写页面HTML代码。创建HTML文档并构建基本网页结构，然后在文档中添加一个<div>元素，其id为“hello”；一个<a>元素，其name为“link”；两个<p>元素，其中一个<p>元素的class为“tom”，具体代码如下：<divid="hello">hello</div><aname="link">链接</a><p>title</p><pclass="tom">tom</p>7.2HTML元素操作14（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，使用document对象中的方法获取对应元素。//通过id属性hello获取元素console.log(document.getElementById('hello'));//通过name属性link获取元素console.log(document.getElementsByName('link'));//通过<p>标签获取元素console.log(document.getElementsByTagName('p'));//通过class属性tom获取元素console.log(document.getElementsByClassName('tom'));7.2HTML元素操作运行文档，结果如图7-2所示。15由图7-2可知，getElementById()返回了<div>元素，getElementsByName()返回了一个NodeList对象，getElementsByTagName()和getElementsByClassName()都返回了一个HTMLCollection对象。NodeList对象和HTMLCollection对象都属于类数组。所谓类数组就是像数组一样的数据结构，它的取值方式同数组一样，可以从下标0开始获取，同时可以通过length属性获取该对象的长度。7.2HTML元素操作获取HTML元素16下面通过一个示例展示类数组的取值，代码如下：#HTML<divid="hello">hello</div>#JavaScriptvarelm1=document.getElementById('hello');varelm2=document.getElementsByTagName('div')[0];console.log(elm1);//输出结果<divid="hello">hello</div>console.log(elm2);//输出结果<divid="hello">hello</div>console.log(elm1===elm2)；//输出结果true7.2HTML元素操作由上述代码可以看出，通过document.getElementsByTagName('div')[0]获取到了文档中的第一个<div>元素，同时可以看出，使用两种不同的方法可以获取到同一个元素。除上述4种获取元素的方法之外，document还提供了一些属性来获取<html>、<head>、<body>3个元素，document.documentElement能获取<html>元素，document.head能获取<head>元素，document.body能获取<body>元素。17为了更方便获取元素，HTML5还为document对象新增了querySelector()和querySelectorAll()两个方法，querySelector()可返回文档中满足条件的第一个元素，querySelectorAll()可返回文档中满足条件的所有元素。下面通过实例演示这两个方法的使用。【例7-2】使用querySelector()和querySelectorAll()方法获取HTML中的元素。（实例位置：example/ch7/7-2.html）（1）编写页面HTML代码。创建HTML文档并构建基本网页结构，然后在文档中添加两个<div>元素，并分别为它们设置不同的属性。<divid="content"class="big">JavaScript</div><divid="title"name="name"class="small">Java</div>7.2HTML元素操作18（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，使用querySelector()和querySelectorAll()方法获取对应元素并输出到控制台。

//获取第一个<div>元素

console.log(document.querySelector('div'));//获取第一个id为content的元素

console.log(document.querySelector('#content'));详情见教材7.2HTML元素操作由上述代码可以看出，querySelector()函数支持传入多种类型的参数，如元素标签，元素id（#xxx），元素class（.xxx），元素标签和class的组合（xxx.yyy），元素标签和id的组合（xxx#yyy）、元素标签和name属性的组合（xxx[name]）等。querySelectorAll()和querySelector()的用法一致，也可以传入多种类型的参数。197.2.2元素内容日常开发中，经常需要获取和修改某个元素的内容，DOM提供了几个属性和方法来解决此类问题，具体如下表7-2所示。7.2HTML元素操作获取和修改元素内容的属性和方法20由表7-2可知，innerText属性用于获取当前元素去除所有标签和样式的文本，innerHTML属性用于获取当前元素内所有HTML内容，textContent属性用于获取当前元素去除标签后的内容。为了更好地区分三个属性，下面通过一个实例演示它们的用法。【例7-3】获取元素内容。（实例位置：example/ch7/7-3.html）（1）编写页面HTML代码。创建HTML文档并构建基本网页结构，然后在文档中添加一个id为“content”的<div>元素，并在其中嵌套一个<p>元素和一个<script>元素，其中<p>元素中包含两个<span>元素和一个<a>元素，其中一个<span>元素为隐藏状态。具体代码如下：<divid="content"><p><span>JavaScriptisveryintersting</span><spanstyle="display:none;">hidecontent</span><ahref="#">thisisalink</a></p><script>vara=1;</script></div>7.2HTML元素操作21（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，使用document属性获取对应的元素内容。console.log(document.getElementById('content').innerText);console.log(document.getElementById('content').innerHTML);console.log(document.getElementById('content').textContent);7.2HTML元素操作运行文档，结果如图7-3所示。227.2HTML元素操作获取元素内容由图7-3可知，innerText返回结果中去除了content元素内所有元素的标签和样式，其中隐藏元素的内容和<script>元素内容也去除了；innerHTML返回了content元素内的完整HTML元素；textContent返回结果中去除了content元素内的所有标签。23上述三个属性除了能获取对应元素的内容外，还可以通过赋值操作修改对应元素的内容，下面通过实例说明。【例7-4】修改元素内容。（实例位置：example/ch7/7-4.html）（1）编写页面HTML代码。创建HTML文档并构建基本网页结构，然后在文档中添加一个id值为content的<div>元素，以及一个id值为btn的<button>元素，具体代码如下：<divid="content">今天是个晴天</div><buttonid="btn">修改天气</button>7.2HTML元素操作24（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，监听按钮单击事件，单击按钮时执行函数，修改<div>元素内容，具体代码如下：document.getElementById('btn').onclick=function(){document.getElementById('content').innerHTML='<h2>今天是个阴天</h2>';}7.2HTML元素操作运行文档，结果如下图7-4所示。修改元素内容25由于innerText属性和textContent属性未纳入HTML5规范，所以部分浏览器不支持这两个属性，在使用之前最好进行环境检测。提示7.2HTML元素操作当单击“修改天气”按钮时，对<div>元素的innerHTML属性进行赋值操作，修改其元素内容。使用document.write()和document.writeln()方法可修改整个<body>元素的内容，它们之间的唯一区别是document.writeln()方法会增加一个换行符。267.2.3元素样式网页前端开发离不开HTML和CSS，因此DOM也提供了两种方式来修改元素样式。它们分别是修改元素的style属性和class属性，下面分别讲解。7.2HTML元素操作271．通过style属性修改元素样式CSS样式中的单词之间是以“-”间隔的，而通过DOM设置的style属性是以驼峰方式命名。例如，CSS中的样式background-color，在style属性中设置时使用backgroundColor。表7-3展示了常见的style属性。7.2HTML元素操作287.2HTML元素操作常见style属性29下面通过一个实例演示修改元素style属性的方法。【例7-5】通过style属性修改元素样式。（实例位置：example/ch7/7-5.html）（1）编写页面HTML代码。创建HTML文档并构建基本网页结构，然后在文档中添加一个id值为content的<div>元素，具体代码如下：<divid="content">JavaScript</div>7.2HTML元素操作（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，首先获取id值为content的元素，然后修改其style对象的width、height、color和backgroundColor属性，具体代码如下：//获取id为content的元素var$content=document.getElementById('content'); $content.style.width='200px'; //设置元素宽度为200px详情见教材30如果直接使用CSS进行元素样式设置，可使用以下代码。#HTML<divid="content"style="width:200px;height:200px;color:red;background-color:green;">JavaScript</div>7.2HTML元素操作运行文档，结果如下图7-5所示。通过style属性修改元素样式31大部分CSS属性都可以一一对应到DOM中的style属性，其中float属性在JavaScript中属于保留字，所以在DOM2中规定，DOM设置CSS中的float属性需要使用cssFloat属性。大部分浏览器支持cssFloat属性，但是IE浏览器使用styleFloat属性。拓展阅读7.2HTML元素操作322．通过class属性修改元素样式除style属性之外，还可以通过class属性修改元素样式。一个元素可以有多个类选择器，开发时若要对某个元素的类选择器列表进行操作，可以使用HTML5新增的classList对象。例如，假设<div>元素的class值为“bgboxtitle”，则可以利用“<div>元素.classList”获取类选择器列表，但如果想要删除列表中的某个值，如bg，那就需要使用classList对象的相关属性和方法，如表7-4所示。7.2HTML元素操作337.2HTML元素操作classList对象的属性和方法34下面通过实例演示classList对象的属性和方法的应用。【例7-6】通过class属性修改元素样式。（实例位置：example/ch7/7-6.html）（1）编写页面HTML代码。首先创建HTML文档并构建基本网页结构；然后在文档中添加一个id值为content，class值为big的<div>元素；接着准备好三个类样式，具体代码如下：<style>.big{font-size:28px;}.green{color:green;}.red{color:red;}</style><divid="content"class="big">JavaScript</div>7.2HTML元素操作35（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，首先获取id为content的元素，然后获取并输出元素classList长度及value值，接着分别调用add()、remove()、toggle()、replace()、contains()函数，并查看函数调用之后元素classList.value的结果，具体代码如下：//获取<div>元素var$content=document.getElementById('content');//获取并输出元素类名的个数，结果为1console.log($content.classList.length);详情见教材7.2HTML元素操作367.2HTML元素操作运行上述文档，结果如下图7-6所示。通过class属性修改元素样式37

7.2.4元素属性为便于JavaScript获取和修改指定HTML元素的相关属性，DOM提供了相关的属性和方法，如下表7-5所示。7.2HTML元素操作元素属性的相关属性和方法38下面通过一个实例演示如何使用这些属性和方法操作元素属性。【例7-7】使用DOM提供的属性和方法操作元素属性。（实例位置：example/ch7/7-7.html）（1）编写页面HTML代码。首先创建HTML文档并构建基本网页结构，然后在文档中添加一个id值为content，class值为big的<div>元素，具体代码如下：<divid="content"class="big">JavaScript</div>7.2HTML元素操作39（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，首先获取id为content的元素，然后依次使用attributes.id.value、getAttribute()函数、setAttribute()函数、attributes.num.value、removeAttribute()函数、attributes.class、hasAttribute()函数获取或操作元素属性。具体代码如下：//获取<div>元素var$content=document.getElementById('content');//获取并输出元素id值，结果为content详情见教材7.2HTML元素操作407.2HTML元素操作运行上述文档，结果如下图7-7所示。网页运行结果417.2.5【示例】实现模态对话框Windows应用程序中的对话框可分为模态对话框和非模态对话框两种。模态对话框是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应，如单击“确定”或“取消”按钮关闭对话框。模态对话框与非模态对话框的区别:在对话框打开时，是否允许用户对其他对象进行操作。7.2HTML元素操作421．编写HTML代码创建HTML文档并构建基本网页结构，首先在页面中添加<style></style>标签对，并在其中设置一个类选择器modal；然后添加一个<h1>标签显示标题；接着添加一个id为open-btn的<button>元素；最后新增一个class为modal的<div>元素，并在其内部嵌套一个<h1>元素和一个id为close-btn的<button>元素，该<div>元素默认处于隐藏状态，具体代码如下：7.2HTML元素操作模态对话框是日常开发中最常用的功能之一，使用它能将部分功能隐藏在网页中，在需要的时候进行显示。（实例位置：example/ch7/example7.2.5.html）<style>.modal{position:fixed;top:20%;详情见教材432．编写JavaScript代码添加<script></script>标签对，然后在其中添加以下代码。7.2HTML元素操作//绑定打开按钮的单击事件document.querySelector('#open-btn').onclick=function(){//事件触发时，将模态框的dislay属性设置为blockdocument.querySelector('.modal').style.display='block';}//绑定关闭按钮的单击事件document.querySelector('#close-btn').onclick=function(){//事件触发时，将模态框的dislay属性设置为nonedocument.querySelector('.modal').style.display='none';}44上述代码首先设置id为open-btn的<button>元素单击事件，当按钮被单击时，获取class为modal的<div>元素，并将其style对象的display属性设置为block，此时模态框将会显示在页面上。然后设置id为close-btn的<button>元素单击事件，当按钮被单击时，获取class为modal的<div>元素，并将其style对象的display属性设置为none，此时模态框变为隐藏状态。7.2HTML元素操作45使用浏览器打开实例文档example7.2.5.html，初始状态如图7-8所示；单击“打开模态框”按钮，模态框将显示在页面上，如图7-9所示。单击“关闭模态框”按钮，模态框将再次隐藏。7.2HTML元素操作模态框隐藏模态框显示46获取节点7.3DOM节点操作增加节点删除节点【示例】线上点菜477.3DOM节点操作7.3DOM节点操作一个完整的HTML文档是由一个个元素标签嵌套组成的，大部分元素内部都包含其他元素节点，本节将介绍如何对元素节点进行操作。487.3.1获取节点之前曾介绍过，HTML文档是树形结构，每个元素标签是DOM树的节点（node）。JavaScript提供了一些属性来获取当前节点、父节点、子节点等，具体如下表7-6所示。7.3DOM节点操作获取节点或节点属性的属性列表49想要获取某个节点属性，首先需要获取当前节点，可以通过7.2节获取元素的方式获取节点，然后使用表7-6所列属性获取元素的相关节点或属性。下面通过实例演示使用上述属性获取相关节点或属性的方法。【例7-8】获取节点或属性。（实例位置：example/ch7/7-8.html）（1）编写页面HTML代码。首先创建HTML文档并构建基本网页结构，然后在文档中添加一个<h1>标签用于显示标题，接着添加一个id值为container的<div>元素，并在其中嵌套一个<span>标签和一个<a>标签，最后在<div>元素下方添加一个<p>元素，具体代码如下：<h1>元素节点操作</h1><divid="container"><span>我是一个span标签</span><!--我是一个注释--><ahref="#">我是一个a标签</a></div><p>我是一个p标签</p>7.3DOM节点操作50（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，首先获取id为container的元素，然后使用下表7-6所列属性获取相应节点和相关属性，并进行输出。//获取id为container的元素var$container=document.getElementById('container');//输出$container的所有子节点console.log('childNodes:',$container.childNodes);详情见教材7.3DOM节点操作51使用浏览器访问该文件，可以看到控制台输出id为container的<div>元素的相关节点和属性，效果如下图7-10所示。7.3DOM节点操作获取<div>元素的相关节点和属性由图7-10可知，id为container的<div>元素拥有7个子节点，其中使用firstChild、lastChild、previousSibling和nextSibling属性获取的都是文本节点（#text），这是因为换行符也属于文本节点，也就是说上述4个属性所获取的节点都是换行符文本节点。<div>元素的父节点为<body>节点，其节点名称为DIV，节点类型为1，节点值为null。527.3.2增加节点除了获取某个元素的相关节点外，DOM也提供了一些方法用于创建节点或插入节点到对应元素中，如可以创建一个<tr>元素，插入到对应的<table>元素中。常用增加节点的方法如下表7-7所示。7.3DOM节点操作常用增加节点的方法537.3DOM节点操作表7-7（续）54由表7-7可以看出，创建节点的相关方法属于document对象，插入或替换节点的相关方法属于element对象。下面通过一个创建节点、插入节点的实例演示增加节点的方法。【例7-9】创建或插入节点。（实例位置：example/ch7/7-9.html）（1）编写页面HTML代码。首先创建HTML文档并构建基本网页结构，然后在文档中添加一个id值为container的<div>元素，具体代码如下：<divid="container"></div>7.3DOM节点操作55（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，首先获取id为container的元素，然后使用表7-7所列方法创建或设置相应节点，最后在控制台输出container元素。var$container=document.getElementById('container');//创建一个<p>元素节点详情见教材7.3DOM节点操作使用浏览器访问网页文档，可以看到控制台输出编辑后的id为container的<div>元素，效果如下图7-11所示。输出编辑后的元素节点567.3.3删除节点删除节点的方法主要有removeChild()和removeAttributeNode()。使用removeChild()方法可删除指定元素节点，使用removeAttributeNode()方法可删除指定属性节点。下面通过实例演示删除节点的操作。【例7-10】删除节点。（实例位置：example/ch7/7-10.html）（1）编写页面HTML代码。首先创建HTML文档并构建基本网页结构，然后在文档中添加一个id值为container，class值为big的<div>元素，并在其中嵌套一个<p>元素，具体代码如下：7.3DOM节点操作<divid="container"class="big"> <p>这是一个p标签</p></div>57（2）编写页面JavaScript代码。在页面中添加<script></script>标签对，并在其中输入代码，首先获取id为container的元素，然后使用前面所讲的两个方法删除元素和属性节点，最后在控制台输出container元素。//获取<div>元素var$container=document.getElementById('container');var$p=document.getElementsByTagName('p')[0]; //获取<p>元素$container.removeChild($p); //从<div>元素中删除<p>元素节点//从<div>元素中获取class属性节点varclassNode=$container.getAttributeNode('class');//从<div>元素中删除class属性节点$container.removeAttributeNode(classNode); console.log($container);7.3DOM节点操作58使用浏览器访问网页文档，可以看到控制台输出删除节点后的<div>元素，效果如下图7-12所示。7.3DOM节点操作删除节点后的元素597.3.4【示例】线上点菜日常生活中，去饭店吃饭时，偶尔会使用手机或平板点菜下单，本节将实现简单的线上点菜功能。（实例位置：example/ch7/example7.3.4.html）7.3DOM节点操作创建HTML文档并构建基本网页结构。首先在页面上添加一个<h1>元素，设置网页标题为“已点菜品”；然后添加一个<ul>元素用于显示订单数据，其内部包含一个<li>元素，<li>元素内包含一个<span>元素用于显示菜品名称，还包含一个<button>元素，用于删除当前已点菜品。<button>元素包含一个class属性和一个onclick属性，其中onclick属性调用了deleteNode()函数，并传入了一个this参数。this参数在此代表<button>元素本身，等同于使用document对应方法获取该元素。1．编写HTML代码60在<ul>元素下方添加一个<div>元素，其内部包含一个<input>元素用于输入菜品名称，还包含一个id为add-btn的<button>元素，用于将输入框中的菜品添加到<ul>列表中。<h1>已点菜品</h1><ul><li><span>麻辣水煮鱼</span><buttonclass="delete-btn"onclick="deleteNode(this);">删除</button></li></ul><div><inputtype="text"width="200px"><buttonid="add-btn">添加菜品</button></div>7.3DOM节点操作61首先为“添加菜品”按钮绑定单击事件，单击事件触发后，判断输入框中的内容是否为空，如果为空则提示用户输入，否则调用addFood()函数，传入输入框中的内容，最后将输入框内容清空。2．编写JavaScript代码//为“添加菜品”按钮绑定单击事件document.getElementById('add-btn').onclick=function(){//获取输入框元素

var$input=document.getElementsByTagName('input')[0]; //如果未输入任何内容，使用alert提示

if($input.value.length===0){alert('请输入想添加的菜品');return;}addFood($input.value); //调用addFood()函数，并传入输入值

$input.value=''; //将输入框内容清空}7.3DOM节点操作62接下来定义addFood()函数，在函数内部创建对应的<li>、<span>及<button>节点，并调用appendTextNode()函数为对应节点添加文本内容。然后调用appendClassAttribute()和appendClickAttribute()函数为<button>节点添加class属性及onclick属性。最后将<span>节点和<button>节点添加到<li>节点，<li>节点添加到<ul>列表中。//添加菜品函数functionaddFood(value){//创建对应的<li>、<span>节点

varliNode=document.createElement('li');varspanNode=document.createElement('span');详情见教材7.3DOM节点操作63定义节点操作的函数appendTextNode()，函数中使用document.createTextNode()函数创建一个文本节点，并添加到相应的节点中；appendClassAttribute()和appendClickAttribute()函数中都使用document.createAttribute()函数创建对应的属性节点class和onclick；deleteNode()函数中通过dom.parentNode属性获取当前订单的<li>元素，然后通过removeChild()函数将<li>元素从列表中删除。//添加文本节点函数functionappendTextNode(node,value){//创建文本节点

vartextNode=document.createTextNode(value);详情见教材7.3DOM节点操作64使用浏览器打开网页文档example7.3.4.html，添加多个菜品之后，效果如下图7-13所示。7.3DOM节点操作线上点菜65综合案例：电商购物车提起网络购物，肯定离不开购物车功能，用户可以把想购买的商品一一加入购物车中，然后一键结算。本节使用前面所学知识实现电商购物车功能。创建HTML文档并构建基本网页结构。首先在页面上添加一个<h1>元素显示网页标题，接着添加一个<ul>元素放置商品列表，其内部第一个<li>元素作为商品列表的头部，<li>元素内包含选择商品、商品信息、单价、数量、金额、操作等文本内容。1．编写页面HTML代码66综合案例：电商购物车第二个<li>元素内包含相应商品的内容，分别是勾选复选框、商品标题、商品单价、商品数量、商品金额、删除按钮。其中勾选复选框使用<span>元素定义，当选中时选项颜色变为红色；商品数量使用数量选择器呈现，数量左侧为“减”按钮，右侧为“加”按钮。第三个<li>元素与第二个<li>元素结构相同，也是放置的商品相关内容。最后在<ul>元素底部添加一个<div>元素，用于展示所勾选商品的总数量、总价及结算按钮。（实例位置：example/ch7/shopping_cart.html）<h1>商品购物车</h1><ul><liclass="header">详情见教材创建好网页结构后还要定义CSS样式，在<h1>标签前输入<style></style>标签对，并在其中定义网页样式，具体代码见shopping_cart.html文档。67综合案例：电商购物车首先分析页面上需要绑定单击事件的元素，具体包括勾选复选框、数量计数器的加减按钮及删除按钮，每个商品都包含这些元素。为了简化多个相同元素的事件绑定操作，此处定义一个addAllElesEvent()函数为相同元素绑定事件，其传入参数为元素标识tag和回调函数cb。2．编写页面JavaScript代码68综合案例：电商购物车在函数内部使用document.querySelectorAll()函数获取所有标记元素，然后对所有元素进行for循环，为每一个元素绑定单击事件。//为相同标识元素绑定单击事件functionaddAllElesEvent(tag,cb){//查找所有相同标识元素

var$tags=document.querySelectorAll(tag);//循环所有相同标识元素，并绑定单击事件

for(vari=0;i<$tags.length;i++){//将回调函数赋值给单击事件

$tags[i].onclick=cb;}}69综合案例：电商购物车首先为数量计数器的加减按钮绑定单击事件，调用前面定义的addAllElesEvent()函数。在“减”按钮单击事件中，使用this.nextSibling.nextSibling获取商品数量，由于商品数量的<span>元素和“减”<span>元素中间包含一个换行元素，所以使用两个nextSibling属性。当商品数量大于1时，将当前商品数量值减1，同时调用calcSingleTotalPrice()函数计算单个商品的总价。“加”按钮元素的单击事件和“减”按钮元素的单击事件代码类似，主要区别是单击“加”按钮时，商品数量加1。//绑定所有数量选择器“减”单击事件addAllElesEvent('.decrease',function(){//获取当前商品数量详情见教材70综合案例：电商购物车首先为数量计数器的加减按钮绑定单击事件，调用前面定义的addAllElesEvent()函数。在“减”按钮单击事件中，使用this.nextSibling.nextSibling获取商品数量，由于商品数量的<span>元素和“减”<span>元素中间包含一个换行元素，所以使用两个nextSibling属性。当商品数量大于1时，将当前商品数量值减1，同时调用calcSingleTotalPrice()函数计算单个商品的总价。“加”按钮元素的单击事件和“减”按钮元素的单击事件代码类似，主要区别是单击“加”按钮时，商品数量加1。//绑定所有数量选择器“减”单击事件addAllElesEvent('.decrease',function(){//获取当前商品数量详情见教材71综合案例：电商购物车定义计算单个商品总价的函数c

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论