JavaScript基础.ppt

DOM编程 document对象 2 回顾 网上谈兵IT茶馆新闻贴图教育大家谈 如果要把 新闻贴图 设为默认选中选项 该如何修改下面代码 3 预习检查 document对象有哪些常用方法 bgcolor属性用来设置什么 简要说明如何制作浮动的广告图片 4 本章任务 演示示例1 浮动的广告图片 演示示例2 带关闭按钮的浮动窗口 演示示例3 全选 全不选特效 制作浮动的广告图片特效制作带关闭按钮的浮动窗口制作全选 全不选特效 5 本章目标 会使用document对象的getElementById 方法访问DIV层对象会使用document对象的getElementsByName 方法访问表单元素会使用DIV对象的样式属性控制层的隐藏和显示 6 document对象 属性方法 7 制作浮动的广告图片 1 如何在页面上方显示广告图片 如何控制图片的移动 使用DIV层 把图片放在层中 然后使用JavaScript控制层的位置坐标 8 制作浮动的广告图片 2 实现思路 在页面中插入层 然后在层中插入图片编写脚本1 使用getElementByID 方法获取层对象2 捕获鼠标滚动事件 改变层对象的位置坐标 9 制作浮动的广告图片 3 常见的页面坐标的介绍top 指定元素的上边界位置 pixelTop 设置或返回元素的上边界 left 指定元素的左边界位置 scrolltop 页面滚动的高度 10 制作浮动的广告图片 4 varadvInitTop 0 functioninix x document getElementById advLayer style pixelTop functionmove document getElementById advLayer style pixelTop advInitTop document body scrollTop window onscroll move 当页面滚动时调用move 函数 查看完整代码 获取层的初始与上边界的距离 通过页面滚动的高度来改变层距离上边界的距离 11 制作带关闭按钮的浮动窗口 1 如何实现带关闭功能的浮动窗口 把带关闭的图标放到层中 当点击图标时层消失 12 制作带关闭按钮的浮动窗口 2 实现思路 在页面中插入层 在层中插入图片编写脚本1 使用getElementById 方法获得层对象2 设置层的样式style的显示属性display none 13 制作带关闭按钮的浮动窗口 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 函数 查看完整代码 隐藏关闭图标所在的层和浮动窗口所在的层 14 制作带关闭按钮的浮动窗口 4 上一张PPT中示例能实现关闭了 但关闭图片不能跟随滚动 怎么办 让关闭图标所在的层像浮动窗口一样 也跟随滚动条同步滚动 解决办法 在move 方法中添加图标所在的层与页面滚动的高度保持同步的代码即可 15 制作带关闭按钮的浮动窗口 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 窗口的滚动事件 查看完整代码 关闭图片所在的层和滚动条同步滚动 16 小结1 制作右边栏浮动的带关闭按钮的广告图片 与滚动条同步滚动广告窗口 练习答案 练习代码 17 制作实现全选效果 1 如何实现如图所示的全选或全不选效果 全选效果 全不选效果 18 制作实现全选效果 2 1 复选框是否选中的属性是哪个 2 写代码逐个复选框设置为true 有没有更好的办法 checked属性 解决办法 使用复选框数组 通过循环给checked属性赋值 19 制作实现全选效果 3 实现思路 创建一组同名的复选框编写脚本1 使用getElementsByName 方法获得一组同名的复选框对象 2 通过循环来改变复选框是否被选中属性checked的值 20 制作实现全选效果 4 functioncheckAll boolValue varallCheckBoxs document getElementsByName isBuy for vari 0 i 全选全不选 查看完整代码 判断同名元素中是否是复选框 是复选框就改变是否选中属性checked的值 21 小结2 编写如左图所示 通过全选 全不选前面加个复选框来实现全选 全不选切换的效果 练习答案 练习代码 22 常见错误 1 functioncheckAll boolValue alert OK varallCheckBoxs document getElementsByName isBuy alert allCheckBoxs 0 type for vari 0 i 这里是判断关系所以应该是比较运算符 而不是赋值运算符 23 functioncheckAll boolValue varallCheckBoxs document getElementsByName isBuy for vari 0 i 全选全不选 常见错误 2 调用时 参数不要加单引号 false和 false 的含义不一样 24 总结 请介绍Document对象的常用属性 请详细解释Document对象的常用方法 请简述制作带关闭按钮的浮动窗口实现思路 请简要回答如何制作全选 全不选复选框效果 CSS样式特效 26 回顾 详述getElementById 的主要功能详述getElementsByName 的主要功能简述制作浮动广告图片的实现思路简述制作全选 反选多个复选框的实现思路 27 本章任务 演示示例2 页面效果 演示示例1 页面效果 演示示例3 页面效果 制作51job的弹出层效果 制作 点卡 图片切换的特效 制作改变边框样式 按钮图片样式的特效 28 本章目标 会使用style样式属性动态改变边框颜色会使用className类名属性动态改变按钮背景图片会使用display显示属性实现层或图片的隐藏 显示和切换特效 29 回顾已学的CSS样式表 1 样式规则的语法是什么 用法有哪些 演示示例4 行内样式 演示示例5 内嵌样式 演示示例6 外部样式表 30 回顾已学的CSS样式表 2 1 回顾HTML中讲过的CSS样式表 常见的样式有哪些 31 回顾已学的CSS样式表 2 2 32 回顾已学的CSS样式表 2 3 33 回顾已学的CSS样式表 3 制作如下图所示的 回顾样式 html 的页面效果 练习答案 练习代码 细边框样式 图片按钮样式 超链接样式 34 制作改变字体大小的样式特效 实现思路1 创建改变样式的JavaScript代码this style fontSize 24px this style fontSize 14px 2 利用鼠标相关事件调用JavaScript代码onMouseOver this style fontSize 24px onMouseOut this style fontSize 14px 使用了style属性 样式表 font size脚本代码 fontSize 演示示例7 改变字号大小的样式特效 35 小结1 请编写如下图所示 实现随鼠标移入改变边框色的效果 练习代码 练习答案 鼠标移入边框颜色变为红色 36 制作改变按钮背景图片的特效 1 如何实现如下图所示 按钮的图片背景效果 鼠标移入按钮背景变色 37 制作改变按钮背景图片的特效 2 演示示例8 改变样式backgroundImage演示 演示 通过改变样式backImage能否实现 onMouseOver this style backgroundImage url images back2 jpg 失败的原因 当鼠标移到按钮上方时 除了图片要换以外 还应保留border margin padding等样式 即使用多行代码onmouseOver this style backImage url images back2 jpg this style boder 0 this style padding 0 解决办法 创建mouseOver和mouseOut两种类样式 然后使用className类属性进行切换 38 制作改变按钮背景图片的特效 3 mouseOverStyle background image url images back2 jpg color CC0099 border 0px margin 0px padding 0px height 23px width 82px font size 14px mouseOutStyle background image url images back1 jpg color 0000FF border 0px margin 0px padding 0px height 23px width 82px font size 14px 查看完整代码 定义样式 39 制作改变按钮背景图片的特效 4 查看完整代码 利用鼠标相关事件调用样式代码 使用className应用类样式 40 小结2 编写如下图所示 鼠标移入改变按钮背景图片的特效 练习代码 练习答案 按钮背景图片改变 41 层的显示 隐藏特效 1 显示属性display 显示属性display适用于所有HTML标签 常用于层DIV 图片Img的显示和隐藏 42 层的显示 隐藏特效 2 如何实现如下图所示的页面上广告层的效果 显示广告层 隐藏广告层 43 层的显示 隐藏特效 3 1 插入两个层 分别插入对应图片 注意设置两个层的z index属性 2 写脚本函数 当单击时同时关闭这两个层 44 层的显示 隐藏特效 4 查看完整代码 弹出 关闭层 advLayer position absolute left 62px top 44px width 367px height 194px z index 2 functioncloseMe document getElementById advLayer style display none functionshowMe document getElementById advLayer style display block 隐藏id为advLayer的层 显示id为advLayer的层 单击事件调用loseMe 方法 45 层的显示 隐藏特效 5 查看完整代码 advLayer position absolute left 5px top 101px width 100px height 224px z index 1 closeLayer position absolute left 70px top 329px width 35px height 22px z index 2 functioncloseMe document getElementById closeLayer style display none document getElementById advLayer style display none 单击事件调用closeMe 方法 获取层对象 显示属性 46 小结3 编写如下图所示 层的显示隐藏特效 练习代码 练习答案 使用函数的参数 传递超链接的内容 修改按钮值 document myform placeButton value place 47 图片的显示 隐藏特效 1 如何实现如下图所示的图片切换特效 如何获取图片Img对象 48 图片的显示 隐藏特效 2 1 可以使用DIV中插入图片来实现 但更简洁的办法是直接使用图片的display属性 2 访问图片Img对象的方法 document getElementById 图片ID 49 图片的显示 隐藏特效 3 functionInitImage document getElementById gameTab2 style display none document getElementById game style display none document getElementById mobileTab1 style display none functionshowGame document getElementById gameTab1 style display none document getElementById gameTab2 style display block document getElementById game style display block document getElementById mobile style display none document getElementById mobileTab2 style display none document getElementById mobileTab1 style display block 隐藏id为gameTab1的层 显示id为gameTab2的层 点卡图片切换特效 查看完整代码 50 小结4 编写如下图所示 图片的显示隐藏特