60javaScript3

BOM编程第三章回顾与作业点评常用的系统函数有哪些？如何调用自定义函数？当打开一个页面时，如何弹出一个没有地址栏、菜单栏等内容的新窗口？如何在页面上显示当前时间？预习检查如何在页面上实现前进、后退的功能？如何动态的改变一个ID为adver的层中内容？使用什么方法可以制作一个树形菜单？本章任务制作树形菜单特效制作TAB切换效果制作复选框的全选效果演示示例：制作TAB切换效果演示示例：制作树形菜单特效演示示例：制作复选框的全选效果本章目标使用getElementByID()方法访问DOM元素使用getElementByName()方法访问DOM元素使用getElementByTagName()方法访问DOM元素使用display样式属性控制元素的隐藏和显示location和history对象history对象back()forward()go()locationhrefreload()location和history对象的应用主页面使用href实现跳转和刷新本页鲜花详情页面实现返回主页面功能ahref=javascript:location.href='flower.html'查看鲜花详情/aahref=javascript:location.reload()刷新本页/aahref=javascript:history.back()返回主页面/a演示示例：页面的转转、刷新及返回练习——查看一年四季变化需求说明主页面实现链接到其他页面及刷新本页功能其他页面实现前进、后退和链接到其他页面功能参考代码完成时间：10分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解Document对象的常用属性Document对象的常用属性属性描述referrer返回载入当前文档的文档的URLURL返回当前文档的URLdocument.referrerdocument.URL例子-判断页面来源并跳转判断页面是否是链接进入自动跳转到登录页面varpreUrl=document.referrer;//载入本页面文档的地址if(preUrl==){document.write(“h2您不是从领奖页面进入，5秒后将自动跳转到登录页面/h2);setTimeout(javascript:location.href='login.html',5000);}演示示例：Document的属性应用Document对象的常用方法Document对象的常用方法方法描述getElementById()返回对拥有指定id的第一个对象的引用getElementsByName()返回带有指定名称的对象的集合getElementsByTagName()返回带有指定标签名的对象的集合write()向文档写文本、HTML表达式或JavaScript代码三种访问页面元素的区别getElementById()按元素的ID名称来访问getElementsByName()按元素的name名称来访问getElementsByTagName()按标签来访问例子-访问页面元素1动态改变层、标签中的内容访问相同name的元素访问相同标签的元素functionchangeLink(){document.getElementById(node).innerHTML=搜狐;}例子-访问页面元素2functionall_input(){varaInput=document.getElementsByTagName(input);varsStr=;for(vari=0;iaInput.length;i++){sStr+=aInput[i].value+br/;}document.getElementById(s).innerHTML=sStr;}functions_input(){varaInput=document.getElementsByName(season);varsStr=;for(vari=0;iaInput.length;i++){sStr+=aInput[i].value+br/;}document.getElementById(s).innerHTML=sStr;}演示示例：Document的方法应用元素的显示和隐藏如何实现如图所示的页面效果？页面中图片、层等元素的显示和隐藏visibilityvisibility属性的值使用此属性会占据文档中的位置值描述visible表示元素是可见的hidden表示元素是不可见的object.style.visibility=值displaydisplay属性的值使用此属性，不会占据文档的位置值描述none表示此元素不会被显示block表示此元素将显示为块级元素，此元素前后会带有换行符object.style.display=值例子-隐藏图片使用visibility和display隐藏图片functionhidden_b2(){document.getElementById(b2).style.visibility=hidden;}functionnone_b2(){document.getElementById(b2).style.display=none;}演示示例：元素的显示和隐藏例子-制作简单的树形菜单使用getElementById()访问ul的ID使用display显示或隐藏ulfunctionshow(){if(document.getElementById(art).style.display=='block'){document.getElementById(art).style.display='none';}else{document.getElementById(art).style.display='block';}}演示示例：制作简单的树形菜单练习-制作树形菜单1需求说明使用项目列表制作一个完整的树形菜单使用带参数的函数，通过参数来控制显示或隐藏某个列表练习完整代码完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解练习-Tab切换效果1训练要点document对象的getElementById()方法使用CSS的属性display控制层的显示和隐藏使用JavaScript动态的改变CSS属性需求说明使用getElementById()方法访问图片的ID，与display结合控制图片的显示和隐藏，实现Tab切换效果当鼠标移到“笔记本”上时，显示笔记本对应的界面，当鼠标移动“手机充值”上时，显示手机充值对应的界面练习-Tab切换效果2实现思路和关键代码使用6个图片完成整个Tab切换效果使用display属性隐藏或显示图片使用带参函数控制哪些图片需要显示或隐藏鼠标移至图片上使用onmouseover事件functionchange(ss){if(ss==top1){document.getElementById(left1).style.display=block;……//省略部分代码}else{document.getElementById(left1).style.display=none;……//省略部分代码}}练习完整代码完成时间：30分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解如何实现复选框的全选效果如何实现全选效果？复选框的属性复选框的checked属性值选中：true未选中：false相同name的复选框全部被同时选中，如何设置？例子-复选框全选效果使用getElementsByName()方法访问同名复选框使用checked属性选中复选框functioncheck(){varoInput=document.getElementsByName(product);for(vari=0;ioInput.length;i++){if(document.getElementById(all).checked==true){oInput[i].checked=true;}}}演示示例：复选框全选效果练习_制作复选框的全选/全不选效果需求说明“全选”选中时，所有复选框被选中“全选”取消选中时，所有复选框也取消选中练习完整代码完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解总结……//省略部分HTMLbodyinputname=classNotype=textvalue=s001/inputname=classNotype=textvalue=s002/inputname=classNotype=textvalue=s003/inputname=classNotype=textvalue=s004/inputname=gradetype=textvalue=t001/inputname=gradetype=textvalue=t002/inputname=gradetype=textvalue=t003//body/html使用document方法分别获取页面中input标签的个数、name为classNo的文本框个数、name为grade的文本框个数布置作业课后作业必做教员备课时在此添加内容选做教员备课时在此添加内容提交时间：xxx提交形式：xxx预习作业背诵英文单词教员备课时在此添加内容