第5章 浏览器对象_3.pptVIP

4.2浏览器对象编程 徐州师范大学 计算机学院 4.2.1 IE对象模型 4.2.1 IE对象模型 在IE对象模型中，Widow对象是所有对象的父类。 Navigator对象模型与IE对象模型是兼容的。 二者区别是： Navigator对象模型只能是用JavaScript脚本语言； IE对象模型既可以使用JavaScript脚本语言，也可以使用VBScript脚本语言。 最为常用的是Document对象和Window（方法、属性等）对象。 4.2.1 IE对象模型 围绕常用的浏览器对象从以下几个例子进行分析和讨论： 下拉菜单的设计实例分析； 常用注册表单验证方法与实现； 读取数据库中的数据并分页显示。 4.2.2 浏览器对象编程案例与分析 案例1 某类型开关控制设备，可以提供如下6种控制模式： 立即关 控制操作码0 立即开 控制操作码1 立即重启 控制操作码2 延时关 控制操作码3 延时开 控制操作码4 延时重启 控制操作码‘6’ 链接：实现后的效果 4.2.2 浏览器对象编程案例与分析 案例1 实现后的效果如图4.2-2所示： 4.2.2 浏览器对象编程案例与分析 案例1 分析： 采用下拉菜单的形式； 下拉菜单中包含6种可选的控制模式，点击相应的可选项将执行相应的操作； 鼠标滑过相应的文本域（链接文本域） ，下拉菜单显示；滑出文本域，下拉菜单隐藏。因此，下拉菜单的显示与隐藏由鼠标事件来触发； 下拉菜单显示在相应文本域（链接文本域）的正下方，因此下拉菜单的位置与相应的文本域位置有关。 4.2.2 浏览器对象编程案例与分析 案例1 分析： 获取相应链接文本域在浏览器中位置，即坐标。 定义函数getLeft获取横坐标； 定义函数getTop获取纵坐标。 为相应的链接文本域的鼠标事件定制函数。 为鼠标的滑过事件（onMouseOver）定义函数over； 为鼠标的滑出事件（onMouseOut）定义函数out。 4.2.2 浏览器对象编程案例与分析 案例1 实现： div id=back01 onMouseOut=“… onMouseOver=“…” style=“① span onmouseover=menu01.style.visibility=visible a href=#选择操作/a div border=1 id=menu01“ style=“② a id=link href=“…op=0立 即 关/abr / … a id=link href=“…op=6延时重启/abr / /div /span /div ①width:80px;height:18;visibility:visible; ②position:absolute;width:75;left:0;top:0;visibility:hidden; background:#B7E7EC; 4.2.2 浏览器对象编程案例与分析 案例1 实现： /** * 获取元素的横坐标 * e为要获取横坐标的对象或元素 * 返回对象或元素的横坐标 */ function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } 4.2.2 浏览器对象编程案例与分析 案例1 实现： /** * 获取元素的纵坐标 * e为要获取纵坐标的对象或元素 * 返回对象或元素的纵坐标 */ function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } 4.2.2 浏览器对象编程案例与分析 案例1 实现： /** * 鼠标滑过显示菜单 * menuID 要隐藏的对象或元素的标识 * posname 引出下拉菜单的对象或元素标识 */ function over(menuID,posname){ document.