7、JS常用文档对象.ppt

JS常用文档对象 制作：潘院明 HTML文档的树状结构 一、DOM DOM－Document Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。 DOM对象模型-1 DOM对象模型-2 二、document（文档）对象 属性 方法 制作浮动的广告图片-1 制作浮动的广告图片-2 实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementByID( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮动的广告图片-3 常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度 制作浮动的广告图片-4 浏览器兼容性 制作带关闭按钮的浮动窗口-1 制作带关闭按钮的浮动窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的显示属性display=none 制作带关闭按钮的浮动窗口-3 制作带关闭按钮的浮动窗口-4 制作带关闭按钮的浮动窗口-5 小结 1 制作右边栏浮动的带关闭按钮的广告图片 制作实现全选效果-1 制作实现全选效果-2 1、复选框是否选中的属性是哪个？ 2、写代码逐个复选框设置为true，有没有更好的办法？ 制作实现全选效果-3 实现思路： 创建一组同名的复选框 编写脚本 1、使用getElementsByName( )方法获得一组同名的复选框对象。 2、通过循环来改变复选框是否被选中属性checked的值。 制作实现全选效果-4 小结 2 编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。 常见错误-1 常见错误-2 小结 请介绍Document对象的常用属性？ 请详细解释Document对象的常用方法？ 请简述制作带关闭按钮的浮动窗口实现思路？ 请简要回答如何制作全选/全不选复选框效果？ 为什么需要表单验证 三、表单（form）对象 表单对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以JS脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。 在页面中定义表单后，通常需要使用JS语言验证表单数据，在JS中验证表单数据需要使用表单对象的属性、方法和事件。 JS的最大优点在于可以处理页面中的表单，可以在表单数据提交服务器之前，对用户输入的数据进行有效的检查。 如不符合规则，则弹出错误提示对话框，告知用户错误信息。（验证工作在客户端完成，降低系统的复杂性，提高页面加载速度） 一个document对象可以包含多个form对象 document.forms数组： document.forms[i] 一个 form对象可以包含多个element对象（表单元素） formName.elements数组： formName.elements[i] 表单（form）对象 当用户在网页中添加form标签后，就创建一个form对象 表单对象属性 form id=“” name=“” method=“post/get” action=“处理页面” document.forms.length：网页中表单的个数 document.forms[i].elements[j].name：表单中的元素名称 表单对象方法 submit()：提交一个表单 reset()：清除一个表单的数据，不需要使用重置按钮也可重置表单 这两个方法等同于提交/重置按钮，当表单使用这两个方法时，不会触发onSubmit/onReset事件 eg: document.forms[0].submit(); 可以在普通按钮上使用onClick事件处理表单提交或表单重置 input type=“button” value=“提交” onclick=“document.forms[0].submit()” 表单（form）对象 表单提交的常见问题 用户多次提交，将会引起创建多次用户请求的错误 解决方法：在表单提交后将表单提交按钮设置为禁用 document.myform.subButton.disabled=true; document.myform.submin(); 表单对象事件 onSubmit事件：提交表单（单击提交按钮时触发） onReset事件：重置表单（单击重置按钮时触发） 表单验证的内容-1 表单验证的内容-2 表单验证的思路-1 如何编写脚本验证表单？ 表单验证的思路-2 常用的String对象 使用 var 语句 var news