《（中职）JavaScript项目式实例教程项目七ppt课件.pptx》由会员分享，可在线阅读，更多相关《（中职）JavaScript项目式实例教程项目七ppt课件.pptx（48页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）JavaScript项目式实例教程项目七电子课件工信版 JavaScriptJavaScript项目式实例教程项目式实例教程项目七商品列表商品列表 DOM DOM对象对象 JavaScriptJavaScript项目式实例教程项目式实例教程如图7.1所示，页面展示了一个服装商品的列表，在该列表中，效果及功能有：1、表格行背景色采用红灰隔行变色显示，当鼠标悬停在某一行上时，该行背景色变为黄色；当鼠标离开该行时，背景色还原为原来的颜色。2、当鼠标悬停在服装图片上时，跟随鼠标显示该件服装的大图，并且以提示信息的方式显示该款服装目前的销量；当鼠标离开服装图片时，服装大图消失。3、当点击“按照销
2、量排序”按钮时，列表中的行将按照服装销量的多少升序排列；再次点击该按钮，列表中的行将按照服装销量的多少降序排列。但是每一行中的序号不变。项目情境图7.1 商品列表 JavaScriptJavaScript项目式实例教程项目式实例教程掌握利用DOM获取文档节点的方法。掌握利用DOM操作文档节点的方法。掌握利用DOM获取或设置文档节点样式的方法。掌握利用DOM操作表格的方法。学习目标 JavaScriptJavaScript项目式实例教程项目式实例教程如图7.2所示，页面上有一个文本区域框，用户在其中输入评论文字，点击“发表评论”按钮，该评论文字以列表的形式显示在按钮下面，并自动添加发表日期和“删
3、除”超级链接，后发表的评论文字排在评论列表的上部。点击某条评论文字行后面的“删除”链接，该条评论文字被删除。当鼠标悬停在一条评论行上时，该行背景变为黄色，鼠标离开，背景色还原为白色。任务1 评论管理图7.2 评论管理 JavaScriptJavaScript项目式实例教程项目式实例教程1、DOM对象对象DOM是Document Object Model(文档对象模型)的首字母缩写，它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。DOM是以层次结构组织的节点或信息片断的集合，它是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序
4、语言沟通的桥梁。浏览器对象是一个分层的结构，我们可以把一个网页文档看成一棵倒立的树。如图7.3所示。【相关知识】图7.3 文档树型结构 JavaScriptJavaScript项目式实例教程项目式实例教程图7.3对应的HTML文档 列表 以下是列表 1 2 3 【相关知识】图7.3 文档树型结构 JavaScriptJavaScript项目式实例教程项目式实例教程2、节点类型、节点类型在DOM中，最常用的节点类型有三个，分别是元素节点（element node）、属性节点（attribute node）和文本节点（text node）。另外还有注释节点（comments node）和文档节点（
5、document node）。可以通过节点的nodeType属性的值来判断节点的类型，nodeType的值及其含义如表所示。【相关知识】节点点类型型nodeType属性属性值元素元素节点点1属性属性节点点2文本文本节点点3注注释节点点8文档文档节点点9 JavaScriptJavaScript项目式实例教程项目式实例教程1）元素节点在前面DOM树对应的HTML文档中，、等标签元素都是元素节点。元素节点可以包含其他元素，例如节点包含了3个节点。2）属性节点有些元素节点中会有属性，这些属性就是属性节点。因为属性总是被放在起始标签中，所以属性节点总是被包含在元素节点中。比如，在前面DOM树对应的HT
6、ML文档中，节点是一个元素节点，其中有属性title，例如title=one就是一个属性节点。3）文本节点在上述文档中，元素节点中包含了文字“以下是列表”，这段文字就是一个文本节点。一般来说，在XHTML文档中，文本节点总是被包含在元素节点起始标签和结束标签中间。但是在IE9及以上版本浏览器、FF火狐浏览器中，会把两个元素节点之间的空格或者换行也当成一个文本节点。比如，在前面DOM树对应的HTML文档中，下的子节点在这些浏览器中识别的个数不是3，而是7。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程3、获取元素节点1）getElementById()方法此方法
7、返回对拥有指定 ID 的第一个对象的引用，其语法为：document.getElementById(“对象对象的的id属性值属性值”)2）getElementsByName()方法此方法返回一个对象数组，每个对象对应着文档中有着给定名称的一个元素，其语法为：document.getElementsByName(“对象对象的的name属性值属性值”)3）getElementsByTagName()方法方法此方法返回一个对象数组，每个对象分别对应着文档中有着给定标签的一个元素，语法为：document.getElementsByTagName(对象的标签名称对象的标签名称)【相关知识】JavaSc
8、riptJavaScript项目式实例教程项目式实例教程4、获取元素子、获取元素子节点节点1）childNodes属性该属性返回被选节点的子节点集合，其语法为：元素节点元素节点.childNodes需要注意的是，由于IE9及以上版本浏览器、FF火狐浏览器将一个元素节点下的空文本节点也当作一个子节点，所以在这些浏览器中会将这些空文本节点也包含在childNodes集合中。2）children属性该属性返回被选节点的子节点集合，其语法为：元素节点.children与childNodes不同的是，在IE9及以上版本浏览器、FF火狐浏览器中，children将忽略空文本节点，不把空文本节点也包含在ch
9、ildren集合中。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程5、获取元素父节点、获取元素父节点利用parentNode属性可以返回被选节点的父节点，其语法为：元素节点.parentNode6、获取首尾子节点、获取首尾子节点1）firstChild属性和lastChild属性firstChild属性可以返回被选节点的第一个子节点，其语法为：元素节点.firstChildlastChild属性可以返回被选节点的最后一个子节点，其语法为：元素节点.lastChild这两个属性在IE9及以上版本浏览器、FF火狐浏览器中也会遇到将空文本节点也当作一个子节点的问题，
10、所以使用时应该注意。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程2）firstElementChild属性和lastElementChild属性firstElementChild属性可以返回被选节点的第一个子节点，其语法为：元素节点.firstElementChildlastElementChild属性可以返回被选节点的最后一个子节点，其语法为：元素节点.lastElementChild这两个属性只在IE9及以上版本浏览器、FF火狐浏览器中使用，IE9之前的版本不支持这两个属性。与firstChild、lastChild属性不同的是，这两个属性将忽略空文本节
11、点。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程7、获取兄弟节点、获取兄弟节点1）nextSibling属性和previousSibling属性nextSibling属性可以返回与被选节点同级的下一个节点，其语法为：元素节点.nextSiblingpreviousSibling属性可以返回与被选节点同级的前一个节点，其语法为：元素节点.previousSibling这两个属性在IE9及以上版本浏览器、FF火狐浏览器中也会遇到将空文本节点也当作一个子节点的问题，所以使用时应该注意。2）nextElementSibling属性和previousElementSi
12、bling属性nextElementSibling属性可以返回与被选节点同级的下一个节点，其语法为：元素节点.nextElementSibling【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程2）nextElementSibling属性和previousElementSibling属性nextElementSibling属性可以返回与被选节点同级的下一个节点，其语法为：元素节点.nextElementSiblingpreviousElementSibling属性可以返回与被选节点同级的前一个节点，其语法为：元素节点.previousElementSiblin这
13、两个属性只在IE9及以上版本浏览器、FF火狐浏览器中使用，IE9之前的版本不支持这两个属性。与nextSibling、previousSibling属性不同的是，这两个属性将忽略空文本节点。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程8、创建元素节点、创建元素节点利用createElement()方法可以动态的创建一个元素节点，其语法为：document.createElement(“元素标签名”)9、添加元素节点、添加元素节点利用createElement()方法创建的元素节点实际上还没有添加到页面文档中，还必须依靠添加元素节点的方法。1）appendCh
14、ild()方法该方法在指定元素节点的最后一个子节点之后添加节点，如果指定元素节点没有子节点，则直接插入，其语法为：父元素节点.appendChild(要添加的子元素节点)2）insertBefore()方法该方法可在已有的子节点前插入一个新的子节点，其语法为：父元素节点.insertBefore(要添加的子元素节点,参考子节点)【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程10、删除元素节点、删除元素节点利用removeChild()方法可以在指定元素节点中删除一个子节点，其语法为：父元素节点.removeChild(要删除的子元素节点)【相关知识】JavaS
15、criptJavaScript项目式实例教程项目式实例教程1、在标签内部输入以下代码，创建一个文本区域框，一个按钮，一个准备显示评论列表行的空项目列表。【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输入以下代码：window.onload=function()function getMsgDate()/得到当前日期var date=new Date();var year=date.getFullYear();var month=date.getMonth()+1;var day=date.getDay()+1;var msgDate=year+/
16、+month+/+day;return msgDate;var ul=document.getElementById(ul1);var msgBtn=document.getElementById(msgBtn);var msgTextArea=document.getElementById(msgTextArea);msgBtn.onclick=function()var newLi=document.createElement(li);var delMsg=删除newLi.innerHTML=msgTextArea.value+-+getMsgDate()+delMsg;var lis=d
17、ocument.getElementsByTagName(li);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程if(ul.children.length=0)/添加新的评论ul.appendChild(newLi);elseul.insertBefore(newLi,lis0);var delLink=document.getElementById(delLink);delLink.onclick=function()/删除评论ul.removeChild(this.parentNode);for(i=0;ilis.length;i+)/鼠标悬停行变色lis
18、i.onmouseover=function()this.style.backgroundColor=yellow;lisi.onmouseout=function()this.style.backgroundColor=;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程设计一个鼠标跟随效果，当鼠标在页面上移动时，有一个红色矩形跟随着鼠标移动。当鼠标单击时，红色矩形消失；当鼠标再次单击时，红色矩形又出现在鼠标当前所在的位置。任务2 鼠标跟随 JavaScriptJavaScript项目式实例教程项目式实例教程定位定位position在CSS样式表中，主要有四种页
19、面元素定位方式，分别为：static（静态定位）、fixed（固定定位）、relative（相对定位）和absolute（绝对定位），当我们需要用JavaScript代码控制页面元素的位置时，通常使用该页面元素的left和top样式，此时该页面元素必须要设置定位方式，但不可以使用static方式定位，原因是static定位方式下left和top样式不起作用。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程在标签对中输入以下代码：window.onload=function()var div=document.createElement(div);document
20、.body.appendChild(div);div.style.width=100px;div.style.height=100px;div.style.backgroundColor=red;div.style.position=absolute;document.onmousemove=function(ev)var oEvent=ev|event;div.style.left=oEvent.clientX+px;div.style.top=oEvent.clientY+px;document.onclick=function()if(div.style.display=none)div
21、.style.display=block;elsediv.style.display=none;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程如图7.4所示，设计一个横向的图片墙，其中的每一幅图片每隔一秒钟都从右向左移动一格。任务3 循环移动图片墙图7.4 图片墙 JavaScriptJavaScript项目式实例教程项目式实例教程重新认识重新认识appendChild()方法方法在任务一中，我们已经初步学习了appendChild()方法，知道其作用是将新创建的元素节点添加到指定的元素节点的最后。实际上appendChild()方法还可以将已有的元素节点添加
22、到指定的元素节点中。此时，该方法将会实现两步操作，第一步是从原来的位置移除该元素节点，第二步是将该元素节点添加到指定元素节点中。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程1、在标签内部输入以下代码，创建一个项目列表，每个列表项是一副图片。【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程2、定义CSS样式表，代码如下：Imgwidth:100px;heiht:100px;border:1px#999 solid;ullist-style-type:none;lidisplay:inline;margin:5px;【任务实现】J
23、avaScriptJavaScript项目式实例教程项目式实例教程3、在标签对中输入以下代码：window.onload=function()var ul1=document.getElementById(ul1);window.setInterval(move,1000);function move()var lis=document.getElementsByTagName(li);ul1.appendChild(lis0);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程如图7.5所示，有一个7行一列的表格，其中有无序数字，当点击“降序排列”按钮后，表格中
24、的数字按照降序排列。任务4 表格排序图7.5 表格排序 JavaScriptJavaScript项目式实例教程项目式实例教程1、获取表格元素、获取表格元素1）标准表格通常，我们在编写表格HTML代码时，都是形如下列写法：内容 其他标签对其他标签对【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程实际上，一个完整的表格需要包括表头，表体和表尾。其中，表头被包含在标签对中；表体被包含在标签对中；表尾被包含在标签对中。表头和表尾分别显示在表格的最上端和最下端，表体显示在表头和表尾之间，表体可以有一个或多个。例如，下列HTML就是一个比较完整的表格代码。【相关知识】序号
25、姓名 1 张三 2 李四 3 王五 4 赵六 制表人：JavaScriptJavaScript项目式实例教程项目式实例教程2）获取表头tHead属性可以获取表头，其语法为：表格对象.tHead3）获取表尾tFoot属性可以获取表尾，其语法为：表格对象.tFoot4）获取表体tBodies属性可以获取表体，其语法为：表格对象.tBodies5）获取行rows属性可以获取表格各个部分的行，其语法为：表格对象.表头对象|表体对象|表尾对象.rows (“|”代表“或者”)【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程6）获取单元格cells属性可以获取表格中的任意一
26、个单元格，其语法为：表格对象.表头对象|表体对象|表尾对象.rows索引号.cells (“|”代表“或者”)【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程2、数组排序、数组排序对于一个数组，如果希望对其中的元素进行排序，可以使用很多排序算法，但是一种比较简便的做法是使用数组对象提供的sort()方法，该方法可以对数组元素按照升序或者降序排序。其语法为：数组对象.sort(fn)其中，fn是一个自定义的函数，该函数形如：function fn(n1,n2)return n1-n2;/或者 return n2-n1;因为只有当n1n2时，该函数返回值才大于0，s
27、ort()方法排序成功，而当n1n1时，该函数返回值才大于0，同理，最后数组对象中的数组元素就按照降序排列。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程需要注意的是，sort()方法只能对数组对象进行排序，对于表格元素如行、单元格等集合对象则不能排序。如果需要对这些集合对象使用sort()方法排序，必须将集合对象转换为数组对象后才能使用sort()方法排序。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程 数字 2 3 【任务实现】5 1 4 6 1、在标签内部输入以下代码，创建一个按钮和一个表格。JavaScriptJava
28、Script项目式实例教程项目式实例教程window.onload=function()function fn(tr1,tr2)var num1=parseInt(tr1.cells0.innerHTML);var num2=parseInt(tr2.cells0.innerHTML);return num2-num1;var sortBtn=document.getElementById(sortBtn);sortBtn.onclick=function()var table=document.getElementById(table1);var trRows=table.tBodies0.
29、rows;var arr=;for(i=0;itrRows.length;i+)arri=trRowsi;arr.sort(fn);for(i=0;iarr.length;i+)table.tBodies0.appendChild(arri);【任务实现】2、在标签对中输入以下代码：JavaScriptJavaScript项目式实例教程项目式实例教程任务5“项目七”的实现 JavaScriptJavaScript项目式实例教程项目式实例教程获取或设置元素节点属性获取或设置元素节点属性1）getAttribute()方法该方法可以获取元素节点的某个指定的属性，其语法为：元素节点.getAttri
30、bute(属性)2）setAttribute()方法该方法可以设置元素节点的某个指定的属性的值，其语法为：元素节点.setAttribute(属性,属性的值)【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程3）兼容性问题）兼容性问题对于以上两个方法，都存在浏览器兼容性问题。比如，对于以上两个方法，都存在浏览器兼容性问题。比如，style属性、属性、class属性以及属性以及for属性等在属性等在I6、IE7浏览器中用上面的两浏览器中用上面的两个方法都无法识别。因此对于元素节点的属性获取和设置，一个方法都无法识别。因此对于元素节点的属性获取和设置，一般建议如下：般
31、建议如下：常规常规属性建议使用属性建议使用“元素节点元素节点.属性属性”的形式，如的形式，如id属性、属性、title属性。属性。自定义自定义属性一般用以上两个方法。属性一般用以上两个方法。当当获取或设置的属性是获取或设置的属性是JavaScript里的关键字时建议使用以里的关键字时建议使用以上两个方法，比如上两个方法，比如标签中的标签中的for属性。属性。当当获取或设置属性是保留字获取或设置属性是保留字,如：如：class属性属性,建议使用建议使用“元素元素节点节点.className”【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程1、在本项目中，图片可以通
32、过遍历表体所有的行设置其中标签的src属性设置。2、对表格进行排序时，考虑到表格行作为集合对象不能直接使用sort()方法排序，可以将销量赋值给数组，对数组排序后作为子节点添加到表体中。3、由于排序后要求各行前面的序号不变，因此排序后要重新设置各行前面的序号。4、鼠标悬停到图片小图上显示大图可以利用鼠标跟随技术，显示销量提示可以设置标签的title属性值。5、项目中要尽量考虑到浏览器兼容性问题。【任务分析】JavaScriptJavaScript项目式实例教程项目式实例教程1、在标签对中建立一个“按照销量排序”按钮，一个含有标签的表格：【任务实现】序号 图片 销量（件）200 100 150
33、50 180 300 JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中定义如下CSS样式表，以便为各行变色提供两种背景样式（0407行）。注意，02行设置了body的定位方式，是为了使得放置大图的div更好的定位，否则当鼠标在表格行中的小图上移动时，鼠标跟随效果出现闪烁。代码如下：bodyposition:absolute;.class1background-color:#CCC;.class2background-color:#F9F;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程3、在标签对中输入如下代码：window.o
34、nload=function()var tb=document.getElementById(tb1);var sortBtn=document.getElementById(sortBtn);var trRows=tb.tBodies0.rows;var isAsc=true;var oDiv;function createDiv()/创建一个div用于显示大图oDiv=document.createElement(div);document.body.appendChild(oDiv);oDiv.style.width=200+px;oDiv.style.height=200+px;oDi
35、v.style.position=absolute;createDiv();function setRowColor()/设置隔行变色for(i=0;itrRows.length;i+)i%2=0?trRowsi.className=class1:trRowsi.className=class2;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程setRowColor();function mouseRowColor()/鼠标悬停改变行背景色，离开还原背景色var rowColor;for(i=0;itrRows.length;i+)trRowsi.onmouse
36、over=function()rowColor=this.style.backgroundColor;this.style.backgroundColor=yellow;trRowsi.onmouseout=function()this.style.backgroundColor=rowColor;mouseRowColor();var imgs=document.getElementsByTagName(img);for(i=0;iimgs.length;i+)/给每行添加图片，为每张图片添加鼠标事件imgsi.width=50;imgsi.height=50;imgsi.src=image
37、s/+(i+1)+.jpg;imgsi.onmousemove=function(ev)【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程var oEvent=ev|event;oDiv.style.display=block;oDiv.style.left=oEvent.clientX+px;oDiv.style.top=oEvent.clientY+px;oDiv.innerHTML=;/下面给图片添加title属性if(this.parentNode.nextSibling.nodeType=3)var titleValue=this.parentNode.
38、nextSibling.nextSibling.innerHTML;elsevar titleValue=this.parentNode.nextSibling.innerHTML;this.setAttribute(title,该款销量为：+titleValue+件);imgsi.onmouseout=function()oDiv.style.display=none;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程function setRowID()/设置每一行的序号for(i=0;itrRows.length;i+)trRowsi.cells0.inne
39、rHTML=i+1;setRowID();function fn(tr1,tr2)/准备传入sort()方法中的函数var num1=parseInt(tr1.cells2.innerHTML);var num2=parseInt(tr2.cells2.innerHTML);if(isAsc)return num1-num2;elsereturn num2-num1;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程sortBtn.onclick=function()/点击按钮按照销量排序var arr=;for(i=0;itrRows.length;i+)/将行转存为数组arri=trRowsi;arr.sort(fn);for(i=0;iarr.length;i+)/将排好序的数组添加到表体中tb.tBodies0.appendChild(arri);setRowID();setRowColor();isAsc=!isAsc;/变换升降序【任务实现】