32TP03

BOM编程第三章回顾与作业点评常用的系统函数有哪些？如何调用自定义函数？Function事件名=function(){…}window.onload=function(){…}当打开一个页面时，如何弹出一个没有地址栏、菜单栏等内容的新窗口？open()方法中的location（地址栏），menubar（菜单栏）如何在页面上显示当前时间？var日期对象=newDate(参数)预习检查如何在页面上实现前进、后退的功能？答：history中的go();back()如何动态的改变一个ID为adver的层中内容？getElementByID()使用什么方法可以制作一个树形菜单？本章任务制作树形菜单特效制作TAB切换效果制作复选框的全选效果本章目标使用getElementByID()方法访问DOM元素使用getElementByName()方法访问DOM元素使用getElementByTagName()方法访问DOM元素使用display样式属性控制元素的隐藏和显示location和history对象history对象back()forward()go()locationhrefreload()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对象的常用方法方法描述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;}元素的显示和隐藏如何实现如图所示的页面效果？页面中图片、层等元素的显示和隐藏visibilityvisibility属性的值值描述visible表示元素是可见的hidden表示元素是不可见的object.style.visibility=值displaydisplay属性的值值描述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的文本框个数