任务1下拉菜单的设计.ppt

编写JavaScript脚本使得每个第一级li在鼠标移入或移出时添加或移除sfhover样式类。 说明： 全局语句window.onload = windowLoad;为窗口加载成功事件指派了windowLoad处理函数。 使用循环结构为多个li元素指派事件处理函数，编程效率比较高。 上面这段代码将所有的超链接对象遍历了一遍，效率不高，可以使用一个全局变量保存上次点击过的超链接对象，避免遍历过程，提高执行效率。改进代码如下： 1）定义全局变量，保存上次点击的超链接对象 var prevlink = null; 2）修改对于超链接for语句 一个文档是有任意多个节点的分层组成的。下面是一个合法DOM文档，提供了一个无序列表，文档中包含了最常用的节点类型,它们是元素节点、属性节点和文本节点。 一、元素（Element）节点 元素（Element）节点是构建DOM树形结构的基础，可以作为非终端节点，可以有自己的属性节点、下级元素节点和下级文本节点，下级元素节点实现了DOM树纵向扩展，同级元素节点实现了DOM树向横扩展。元素节点在没有如何子节点的情况下它就是终端节点。元素节点的节点类型号为1。 二、属性（Attitude）节点 属性（Attitude）节点是一个键值对，键是属性名，值是属性值，属性节点不能成为独立节点，它必须从属于元素节点，只来描述元素节点的属性，充实元素节点的内容，因此，可以说属性节点不是节点，在DOM的操作中使用的方法也与其它节点不同。属性节点的节点类型号为2。 三、文本（Text）节点 文本（Text）节点表示一段文本，只能作为独立的终端节点，没有子节点和属性节点。 文本节点的节点类型号为3。 四、注释节点 注释节点是用来说明你用的XHTML或者HTML是什么版本，或用来添加注释文本的。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd这些代码称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。 !--　注释文本　--表示一段注释。 以上两个例子有个共同的特点就是都带有感叹号“!”。注释节点的节点类型号为8。 五、文档节点 文档节点是HTML文档的父节点，也是整个DOM文档唯一的根节点，它是浏览器的内内置对象document。最常用的节点类型如表5-11所示。 说明： 在color.css和layout.css都有对body标签样式类的定义，它们之间的关系是合并不同样式设置与覆盖相同样式设置。 stripeTables函数适合多个table。其中使用了global.js中的定义的addClass与removeClass函数实现添加与移出行的指定样式。 考察本任务中的table标签中涉及的数据，思考以下如何用JavaScript 组织与读取这些数据，一种方法是用XML数据，另一种方法是用JSON(JavaScript Object Notation)数据。 表格数据由表头(header)和表体(body)两部分组成，表体部分的数据用数组表示。 说明： 以上两个元素节点表示的数据基本是相同的，但使用属性节点比较简捷，不过属性节点的使用是有条件的，即属性节点自身不能被扩展。如果某个节点从属节点不需要被扩展，则可以考虑使用属性节点描述数据。 说明： 为了使用全局方法insertBefore，程序添加了对上个任务中定义的global.js引用。 对元素节点的属性设置有三种情况： 标准属性：可以直接赋值，如ul.id = nav，这样更简捷。 style是对象属性，它有下级属性。 自定义属性：可以对属性节点的value属性赋值。利用JavaScript语言弱类型（赋值即被定义）的特点，直接将创建、添加和赋值三步用一条赋值方法或赋值语句来完成，本示例中对标签a的mydata属性来说，赋值方法为“a.setAttribute(mydata, 我是一个属性节点);”，赋值语句为“a.mydata = 我是一个属性节点;”。 事件属性：在程序中不能用字符串，而应用函数对象作为其属性值。 本示例中属性的类型是字符串，也可以是其它类型，甚至可以是自定义的json对象, json对象不仅有数据字段，也可以有行为方法（或行为函数）。json对象做属性节点的值将在拓展部分介绍。 以上代码，看起来比较长，但条理比较清楚。对于大量节点来说，使用JavaScript编