TP03 BOM编程 ACCP 6.0 S2-4-使用JavaScript增强交互效果 PPT课件.pptVIP

总结 ……//省略部分HTML body input name=classNo type=text value=s001 / input name=classNo type=text value=s002 / input name=classNo type=text value=s003 / input name=classNo type=text value=s004 / input name=grade type=text value=t001 / input name=grade type=text value=t002 / input name=grade type=text value=t003 / /body/html 使用document方法分别获取页面中input标签的个数、name为classNo的文本框个数、name为grade的文本框个数 布置作业 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式：xxx 预习作业 背诵英文单词 教员备课时在此添加内容 * * * * * * * BOM编程 第三章 回顾与作业点评 常用的系统函数有哪些？如何调用自定义函数？ 当打开一个页面时，如何弹出一个没有地址栏、菜单栏等内容的新窗口？ 如何在页面上显示当前时间？ 预习检查 如何在页面上实现前进、后退的功能？ 如何动态的改变一个ID为adver的层中内容？ 使用什么方法可以制作一个树形菜单？ 本章任务 制作树形菜单特效 制作TAB切换效果 制作复选框的全选效果 演示示例：制作TAB切换效果 演示示例：制作树形菜单特效 演示示例：制作复选框的全选效果 本章目标 使用getElementByID()方法访问DOM元素 使用getElementByName()方法访问DOM元素 使用getElementByTagName()方法访问DOM元素 使用display样式属性控制元素的隐藏和显示 location和history对象 history对象 back() forward() go() location href reload() location和history对象的应用 主页面使用href实现跳转和刷新本页 鲜花详情页面实现返回主页面功能 a href=javascript:location.href=flower.html查看鲜花详情/a a href=javascript:location.reload()刷新本页/a a href=javascript:history.back()返回主页面/a 演示示例：页面的转转、刷新及返回 练习——查看一年四季变化 需求说明 主页面实现链接到其他页面及刷新本页功能 其他页面实现前进、后退和链接到其他页面功能 参考代码 完成时间：10分钟 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 Document对象的常用属性 Document对象的常用属性 属性 描述 referrer 返回载入当前文档的文档的URL URL 返回当前文档的URL document.referrer document.URL 例子-判断页面来源并跳转 判断页面是否是链接进入 自动跳转到登录页面 var preUrl=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的元素 访问相同标签的元素 function changeLink(){ document.getElementById(node).innerHTML=搜狐; } 例子-访问页面元素2 function a