第4章 表单验证与特效.pptVIP

* 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” document对象“用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 * * * * * 讲解要点： 我们上网时，一般是在IE浏览器中，键入某个网址：如，然后打开google网页， 引出浏览器对象。为了让学员容易理解，不要1求过去完整而枯燥的概念定义。 1）整个浏览器窗口，称为window窗口对象。 2）窗口对象又包括上方的地址栏和下方的页面内容。地址栏称为location地址对象，表示网页的地址信息。 3）下方的页面内容代表整个网页文档，称为document文档对象，存放网页的文档信息。 4）文档对象又包含段落、图片、表单等。例如表单对象FORM 5) 总结：从这张图可以看出，浏览器对象是分层次的. 所以表单中的文本框完整的名称应该是： window.document.myform.text1 ，其中window可以省略，所以我们前面写为： document.myform.text1 就是这样来的。 * * * * * css部分 style .m{ //标题栏 background-image:url(n.jpg);height:26;cursor:hand; color:#ffffff; font-weight:bold;text-align:center;font-size:13px;} .n{//未选中的选项栏 background-color:#FFFFCC;height:26;cursor:hand; text-align:left;padding-left:40;font-size:13px;color:#FF3333;} .distd{//选项栏整体 display:none;} .cgbar{//选中以后的标题栏 background-color:#FFFFCC;height:26;cursor:hand; background-color:#FAAF9A;border-style:solid; border-width:1px;text-align:left;padding-left:40; font-size:13px;font-weight:bold;color:#FF0000;} /style 鼠标样式 内容的对齐方式 * javascript部分 script function changetd(obj){ var ctd = document.getElementById(obj); if(ctd.style.display==inline){ ctd.style.display=none; }else{ ctd.style.display=inline; } } /script 单击标题栏时触发 判断标题栏对应的选项栏是否显示 * 框架的应用 要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组。 通过下标实现不同框架的访问: parent.frames[Index1].docuement.forms[index2] 通过parent.frames.length确定窗口中窗体的数目。 使用框架名和窗体名来实现各元素的访： parent.framesName.decument.formNames.elementName.(m/p) * 上部框架 下部框架 框架示例 鼠标划过下部变色 HTML HEAD TITLE New Document /TITLE /HEAD BODY /BODY /HTML * Frame示例 HTML HEAD TITLE New Document /TITLE /HEAD frameset rows=80,* frame src=top.html/frame frame src=main.html/frame /frameset /HTML 主框架 下部页面 main.html * Frame示例 HTML HEAD TITLE New Document /TITLE /HEAD style.tb td{width:20px;height:20px;}/style script function setcolor(obj){ window.parent.frames[1].document.body.style.backgroundColor=obj.style.backgroundColor; } /script BOD