j6DOM编程-document对象练习.pptVIP

第6讲 DOM编程－document对象 回顾 window对象有哪些常用的方法及其含义？ 请说明Date对象包含的方法有哪些？ 请说明setTimeout( )方法如何使用？ 回顾 …… SELECT name=selTopic id=selPTopic OPTION value=gard.html网上谈兵/OPTION OPTION value=IT.htmlIT茶馆/OPTION OPTION value=news.html 新闻贴图/OPTION OPTION value=education.html教育大家谈/OPTION /SELECT …… 本讲问题 document对象有哪些常用方法？ bgcolor属性的作用？ 简要说明如何制作浮动的广告图片？ 本讲任务 制作浮动的广告图片特效 制作带关闭按钮的浮动窗口 制作全选/全不选特效 本讲目标 document对象 属性 方法 制作浮动的广告图片-1 制作浮动的广告图片-2 实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementById( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮动的广告图片-3 常见的页面坐标的介绍: top:指定元素的上边界位置 pixelTop:设置或返回元素的上边界 left:指定元素的左边界位置 scrollTop:页面滚动的高度 制作浮动的广告图片-4 制作带关闭按钮的浮动窗口-1 制作带关闭按钮的浮动窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的显示属性display=none 制作带关闭按钮的浮动窗口-3 制作带关闭按钮的浮动窗口-4 制作带关闭按钮的浮动窗口-5 小结 1 制作右边栏浮动的带关闭按钮的广告图片 制作实现全选效果-1 制作实现全选效果-2 1、判断复选框是否选中的属性是？ 2、为了实现多选效果，写代码逐个设置复选框为true比较麻烦，有没有更好的办法？ 制作实现全选效果-3 实现思路： 创建一组同名的复选框 编写脚本 1、使用getElementsByName( )方法获得一组同名的复选框对象的集合 2、通过循环遍历的方式获取集合中每一个单独的复选框 3、通过修改复选框的checked属性改变其选中的状态 制作实现全选效果-4 小结 2 编写如图所示，通过复选框来实现全选/全不选切换的效果 常见错误-1 常见错误-2 总结 请详细解释document对象的常用属性和方法？ 请简述制作带关闭按钮的浮动窗口实现思路？ 请简要回答如何实现复选框的全选/全不选效果？ * * 如果要把新闻贴图设为默认选中选项，该如何修改下面代码？ 在相应的OPTION标签中设置selected属性 演示示例1：浮动的广告图片 演示示例2：带关闭按钮的浮动窗口 演示示例3：全选/全不选特效 会使用document对象的getElementById( )方法访问DIV层对象 会使用document对象的getElementsByName( )方法访问表单元素 会使用DIV对象的样式属性控制层的隐藏和显示 设置或检索 Document 对象的背景色 bgColor 说明 名称 根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象 getElementById( ) 根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能) getElementsByName( ) 说明 名称 如何在页面上方显示广告图片？如何控制图片的移动？ 使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标 方法一：document.documentElement.scrollTop 方法二： document.body.scrollTop 获取页面滚动距离的方法:由于浏览器版本存在差异，有可能引发对页面中相同对象或属性的读取结果不同。因而可采用以下来两种方式进行读取 SCRIPT language=javascript var advInitTop=0; function inix( ){ advInitTop=document.getElementById(advLayer).style.pixelTop; } function move( ){ document.getElementById(advLayer).st