TP3V2.0.ppt

DOM编程 document对象 第三章 回顾 window对象有哪些常用的方法及其含义 请说明Date对象包含的方法有哪些 请说明setTimeout 方法如何使用 回顾 网上谈兵IT茶馆新闻贴图教育大家谈 如果要把 新闻贴图 设为默认选中选项 该如何修改下面代码 在相应的OPTION标签中设置selected属性 预习检查 document对象有哪些常用方法 bgcolor属性的作用 简要说明如何制作浮动的广告图片 本章任务 演示示例1 浮动的广告图片 演示示例2 带关闭按钮的浮动窗口 演示示例3 全选 全不选特效 制作浮动的广告图片特效制作带关闭按钮的浮动窗口制作全选 全不选特效 本章目标 会使用document对象的getElementById 方法访问DIV层对象会使用document对象的getElementsByName 方法访问表单元素会使用DIV对象的样式属性控制层的隐藏和显示 document对象 属性方法 制作浮动的广告图片 1 如何在页面上方显示广告图片 如何控制图片的移动 使用DIV层 把图片放在层中 然后使用JavaScript控制层的位置坐标 制作浮动的广告图片 2 实现思路 在页面中插入层 然后在层中插入图片编写脚本1 使用getElementById 方法获取层对象2 捕获鼠标滚动事件 改变层对象的位置坐标 制作浮动的广告图片 3 常见的页面坐标的介绍 top 指定元素的上边界位置pixelTop 设置或返回元素的上边界left 指定元素的左边界位置scrollTop 页面滚动的高度 方法一 document documentElement scrollTop方法二 document body scrollTop 获取页面滚动距离的方法 由于浏览器版本存在差异 有可能引发对页面中相同对象或属性的读取结果不同 因而可采用以下来两种方式进行读取 制作浮动的广告图片 4 varadvInitTop 0 functioninix advInitTop document getElementById advLayer style pixelTop functionmove document getElementById advLayer style pixelTop advInitTop document body scrollTop window onscroll move 当页面滚动时调用move 函数 查看完整代码 获取层的初始与上边界的距离 通过页面滚动的高度来改变层距离上边界的距离 制作带关闭按钮的浮动窗口 1 如何实现带关闭功能的浮动窗口 把带关闭的图标放到层中 当点击图标时层消失 制作带关闭按钮的浮动窗口 2 实现思路 在页面中插入层 在层中插入图片编写脚本1 使用getElementById 方法获得层对象2 设置层的样式style的显示属性display none 制作带关闭按钮的浮动窗口 3 varadvInitTop 0 functioninix advInitTop document getElementById advLayer style pixelTop functionmove document getElementById advLayer style pixelTop advInitTop document body scrollTop functioncloseMe document getElementById closeLayer style display none document getElementById advLayer style display none window onscroll move 当页面滚动时调用move 函数 查看完整代码 隐藏关闭图标所在的层和浮动窗口所在的层 制作带关闭按钮的浮动窗口 4 上一张PPT中示例能实现关闭了 但关闭图片不能跟随滚动 怎么办 让关闭图标所在的层像浮动窗口一样 也跟随滚动条同步滚动 解决办法 在move 方法中添加图标所在的层与页面滚动的高度保持同步的代码即可 制作带关闭按钮的浮动窗口 5 varadvInitTop 0 varcloseInitTop 0 functioninix advInitTop document getElementById advLayer style pixelTop closeInitTop document getElementById closeLayer style pixelTop functionmove document getElementById advLayer style pixelTop advInitTop document body scrollTop document getElementById closeLayer style pixelTop closeInitTop document body scrollTop functioncloseMe document getElementById closeLayer style display none document getElementById advLayer style display none window onscroll move 窗口的滚动事件 查看完整代码 关闭图片所在的层和滚动条同步滚动 小结1 制作右边栏浮动的带关闭按钮的广告图片 与滚动条同步滚动广告窗口 练习答案 练习代码 制作实现全选效果 1 如何实现如图所示的全选或全不选效果 全选效果 全不选效果 制作实现全选效果 2 1 判断复选框是否选中的属性是 2 为了实现多选效果 写代码逐个设置复选框为true比较麻烦 有没有更好的办法 checked属性 解决办法 使用复选框数组 通过循环给checked属性赋值 制作实现全选效果 3 实现思路 创建一组同名的复选框编写脚本1 使用getElementsByName 方法获得一组同名的复选框对象的集合2 通过循环遍历的方式获取集合中每一个单独的复选框3 通过修改复选框的checked属性改变其选中的状态 制作实现全选效果 4 functioncheckAll boolValue varallCheckBoxs document getElementsByName isBuy for vari 0 i 全选全不选 查看完整代码 判断同名元素中是否是复选框 是复选框就改变是否选中属性checked的值 小结2 编写如图所示 通过复选框来实现全选 全不选切换的效果 练习答案 练习代码 常见错误 1 functioncheckAll boolValue alert OK varallCheckBoxs document getElementsByName isBuy alert allCheckBoxs 0 type for vari 0 i 这里是判断关系所以应该是比较运算符 而不是赋值运算符 functioncheckAll boolValue varallCheckBoxs docu