《JS常用文档对象》PPT课件.ppt

《《JS常用文档对象》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《JS常用文档对象》PPT课件.ppt（70页珍藏版）》请在装配图网上搜索。

1、 JS常用文档对象 制作：潘院明 HTML文档的树状结构 根节点 根节点 的子节点 有什么办法对 HTML中的内容进行动态改变呢？ 演示示例 3： 动态改变 HTML中的内容 使用 Document Object Model 相邻节点 一、 DOM DOM Document Object Model ,它是 W3C国 际组织的一套 Web标准，它定义了访问 HTML文档对象的一套属性、方法和事件 。 function changeLink() document.getElementById(myAnchor).innerHTML=搜狐 ; document.getElementById(myA

2、nchor).href= ; 淘宝 修改内容 修改属性 HTML文档的每个节点都是对象，类似 WinForm中的控件，都具备属性、方法和事件 定位链接元 素（对象） DOM对象模型 -1 window 窗口对象 location 地址对象 FORM 表单对象 浏览器对象的分层结构 window.document. myform.text1 document 文档对象 DOM对象模型 -2 浏览器对象的分层结构 二、 document（文档） 对象 属性 方法 名称 说明 bgColor 设置或检索 Document 对象的背景色 名称 说明 getElementByID( ) 根据 HTML元

3、素指定的 ID， 获得 唯一的一个 HTML元素 。 如：访问 DIV层对象 、 图片 Img 对象 getElementsByName( ) 根据 HTML元素指定的 name， 获得 相同名称 的一组元素 。 如：访问表单元素 (全选功能 ) 制作浮动的广告图片 -1 如何在页面上方显示广告图片？如何控制图片的移动？ 使用 DIV层，把图片放在层中，然后使用 JavaScript控制 层的位置坐标 制作浮动的广告图片 -2 实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用 getElementByID( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮

4、动的广告图片 -3 常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度 制作浮动的广告图片 -4 var advInitTop=0; function inix( ) advInitTop=document.getElementById(advLayer).style.pixelTop; function move( ) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrol

5、lTop; window.onscroll=move ; /当页面滚动时调用 move( )函数 查看完整代码 获取层的初始与上 边界的距离 通过页面滚动的 高度来改变层距 离上边界的距离 浏览器兼容性 var scrollTop; if(typeof window.pageYOffset != undefined) scrollTop = window.pageYOffset; else if(typeof patMode != undefined else if(typeof document.body != undefined) scrollTop = document.body.scr

6、ollTop; 制作带关闭按钮的浮动窗口 -1 如何实现带关闭功能的浮动窗口？ 把带关闭的图标放到层中，当点击图标时层消失。 制作带关闭按钮的浮动窗口 -2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、 使用 getElementById( )方法获得层对象 2、设置层的样式 style的显示属性 display=none 制作带关闭按钮的浮动窗口 -3 var advInitTop=0; function inix( ) advInitTop=document.getElementById(advLayer).style.pixelTop; function move( ) d

7、ocument.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop; function closeMe( ) document.getElementById(closeLayer).style.display=none; document.getElementById(advLayer).style.display=none; window.onscroll=move ; /当页面滚动时调用 move( )函数 查看完整代码 隐藏关闭图标所在 的层和浮动窗口所 在的层 制作带关闭按钮的浮动窗口

8、-4 上一张 PPT中示例能实现关闭了，但关闭图片不能跟随滚 动，怎么办？ 让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步 滚动。 解决办法：在 move( )方法中添加图标所在 的层与页面滚动的高度保持同步的代码即可 制作带关闭按钮的浮动窗口 -5 var advInitTop=0; var closeInitTop=0; function inix( ) advInitTop=document.getElementById(advLayer).style.pixelTop;closeIn itTop=document.getElementById(closeLayer).style.p

9、ixelTop; function move( ) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop ; document.getElementById(closeLayer).style.pixelTop= closeInitTop+document.body.scrollTop ; function closeMe( ) document.getElementById(closeLayer).style.display=none; document.getElementB

10、yId(advLayer).style.display=none; window.onscroll=move ; /窗口的滚动事件 查看完整代码 关闭图片所在的 层和滚动条同步 滚动 小结 1 制作右边栏浮动的带关闭按钮的广告图片 与滚动 条同步 滚动广 告窗口 练习答案 练习代码 制作实现全选效果 -1 如何实现如图所示的全选或全不选效果？ 全选 效果 全不选 效果 制作实现全选效果 -2 1、复选框是否选中的属性是哪个？ 2、写代码逐个复选框设置为 true，有没有更好的 办法？ checked属性 解决办法 : 使用复选框数组， 通过循环给 checked属性赋值 制作实现全选效果 -3

11、 实现思路： 创建一组同名的复选框 编写脚本 1、 使用 getElementsByName( )方法获得一组同名的复选框对象。 2、通过循环来改变复选框是否被选中属性 checked的值。 制作实现全选效果 -4 function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.type=checkbox) allCheckBoxsi.checked=boolValue ; 全选 全

12、不选 查看完整代码 判断同名元素中是 否是复选框 是复选框就改变 是否选中属性 checked的值 小结 2 编写如左 图所示， 通过全选 / 全不选前 面加个复 选框来实 现全选 /全 不选切换 的效果。 练习答案 练习代码 常见错误 -1 function checkAll(boolValue ) alert(OK); var allCheckBoxs=document.getElementsByName(isBuy) ; alert(allCheckBoxs0.type); for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.t

13、ype=checkbox) allCheckBoxsi.checked=boolValue ; 这里是判断关系所以应该 是比较运算符 =，而不 是赋值运算符 = function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.type=checkbox) allCheckBoxsi.checked=boolValue ; 全选 全不选 常见错误 -2 调用时 ，参数 不要加 单引号，

14、 false和 false的含义不一样 小结 请介绍 Document对象的常用属性？ 请详细解释 Document对象的常用方法？ 请简述制作带关闭按钮的浮动窗口实现 思路？ 请简要回答如何制作全选 /全不选复选框 效果？ 为什么需要表单验证 服务器 IE 脚本在客户端执行，减轻服务器端的压力 客户端 用户输入 客户端 用户输入 客户端 用户输入 三、表单（ form）对象 表单对象是文档对象的一个元素，它含有多种格式的对象储存信息， 使用它可以 JS脚本中编写程序进行文字输入，并可以用来动态改变文 档的行为。 在页面中定义表单后，通常需要使用 JS语言验证表单数据，在 JS中验 证表单数据

15、需要使用表单对象的属性、方法和事件。 JS的最大优点在于可以处理页面中的表单，可以在表单数据提交服务 器之前，对用户输入的数据进行有效的检查。 如不符合规则，则弹出错误提示对话框，告知用户错误信息。（验证工 作在客户端完成，降低系统的复杂性，提高页面加载速度） 一个 document对象可以包含多个 form对象 document.forms数组： document.formsi 一个 form对象可以包含多个 element对象（表单元素） formName.elements数组： formName.elementsi 表单（ form）对象 当用户在网页中添加 标签后，就创建一个 form

16、对象 表单对象属性 document.forms.length：网页中表单的个数 document.formsi.elementsj.name：表单中的元素名称 表单对象方法 submit()：提交一个表单 reset()：清除一个表单的数据，不需要使用重置按钮也可重置表单 这两个方法等同于提交 /重置按钮，当表单使用这两个方法时，不 会触发 onSubmit/onReset事件 eg: document.forms0.submit(); 可以在普通按钮上使用 onClick事件处理表单提交或表单重置 表单（ form）对象 表单提交的常见问题 用户多次提交，将会引起创建多次用户请求的错误 解

17、决方法：在表单提交后将表单提交按钮设置为禁用 document.myform.subButton.disabled=true; document.myform.submin(); 表单对象事件 onSubmit事件：提交表单（单击提交按钮时触发） onReset事件：重置表单（单击重置按钮时触发） 表单验证的内容 -1 不能为空且 不能有数字 不能为空且 不能有数字 不能为空，且只 能包括字母、数 字和下划线字符 密码不能为空并且最 少为 6位，还要求两 次输入的密码要一致 表单验证的内容 -2 不能为空且包含 字符 和 . 只能二选一 年月日不能 为空，且不 能超出其要 求的范围 表单验证的

18、思路 -1 如何编写脚本验证表单？ 1、获取表单元素的值（ String类型），然后进行判断 2、触发 表单 （ FORM） 的提交事件 （ onSubmit） 表单验证的思路 -2 常用的 String对象 使用 var 语句 var newstr = 这是我的字符串 创建 String 对象 var newstr = new String(这是我的字符串 “) 调用方法和属性 字符串对象 .属性名 字符串对象 .方法名 ( ) 表单验证的思路 -3 名 称 说 明 属性 length 获取字符串字符的个数 方法 indexOf(“子字符串 ” ， 起始位置 ) 查找子字符串的位置 char

19、At(index) 获取位于指定索引位置 的字符 substring(index1,index2 ) 求子串 toLowerCase( ) 将字符串转换成小写 toUpperCase( ) 将字符串转换成 大写 String对象常用的属性和方法 语法： indexOf(“查找的子字符串”，查找的起始位置 ) 返回子字符串所在的位置；如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为 2，起始位置是 0 表单验证的思路 -4 查看完整代码 检查电子邮件 email 是否包含“ ”和” .” function ch

20、eckEmail( ) var strEmail=document.myform.txtEmail.value; if (strEmail.length=0) alert(电子邮件不能为空 !); return false; if (strEmail.indexOf(,0)=-1) alert(电子邮件格式不正确 n必须包含 符号！ ); return false; if (strEmail.indexOf(.,0)=-1) alert(电子邮件格式不正确 n必须包含 .符号！ ); return false; return true; 返回结果 -1表示 没找到“ ”字符 获取表单元素的值

21、表单的提交事件 表单验证的思路 -5-1 查看完整代码 表单验证的思路 -5-2 查看完整代码 function checkUserName() /验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) alert(名字中包含数字 n+请删除名字中的数字和特殊字符 ); return false else alert(请输入“名字”文本框 ); document.

22、myform.txtUser.focus(); return false return true; 验证用户名不 能包含数字 获取表单元素的值 表单验证的思路 -5-3 查看完整代码 function passCheck() /验证密码 var userpass = document.myform.txtPassword.value; if(userpass = ) alert(未输入密码 n + 请输入密码 ); document.myform.txtPassword.focus(); return false; if(userpass.length 6) alert(密码必须多于或等于 6

23、 个字符。 n); return false; return true; 验证密码不少于 6位 获取表单元素的值 表单验证的思路 -5-4 查看完整代码 function validateform() if(checkUserName() else return false; 同时调用验证用户 名和验证密码方法 表单的提交事件 触发表单提交事件 小结 1 编写如下图所示，实现登录表单的验证功能 练习代码 练习答案 文本框控件 -1 如何实现如下图所示，完善电子邮件的例子。 用户单击时 ,邮 箱的提示信息 自动清除 提示电子邮 件格式不对 输入的信息 自动被选中 并高亮显示 文本框控件 -2 文

24、本框对象的常用属性、方法、事件 使用文本框对象的相关方法，实现选中效果 名 称 说 明 属性 value 设置或获取文本框的值 方法 focus( ) 获得焦点 select( ) 选中文本内容 ， 突出显示输入区域 事件 onFocus 光标进入某个文本框 脚本运行 onBlur 文本框 失去焦点脚本运行 onKeyPress 当一个键按下并释放时去触发一个事件 一次性完成验证 一个个完成验证 用户名： 光标进入文本框时，修改其内容 用户验证 用户名： function update(o) o.value=; o.style.color=red; function checkname(o)

25、var a=document.getElementById(aa); var name=o.value; a.innerHTML=; / alert(a.innerHTML); if (name.length=6) a.innerHTML=用户名必须 6个以上字符 ; This is my JSP page. 用户名： 文本框控件 -3 查看完整代码 . function clearText( ) if (document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将 发送激活密码 ) document.myform.txtEmail.value= ; docum

26、ent.myform.txtEmail.style.color=red; *必填 清空文本框的内容 修改文本框的颜色 文本框获得焦点就调 用方法 clearText( ) 小结 2 编写如下图所示，实现注册表单的验证功能 练习代码 练习答案 每个文本 框非空 密码和再次输入 的密码必须相同 年份必须 是 20打头 日期必须在 1到 31之间 常见错误 -1 function validateform( ) if(sNameCheck() else return false; 提交按钮 type=submit 清空按钮 type=reset 常见错误 -2 function validatefo

27、rm( ) if(sNameCheck() else return false; onsubmit不是提 交按钮的事件 小结 为什么需要表单验证？ 常用的表单验证主要包括哪些内容？ 简述表单验证的大致思路？ 简要说明文本框对象的常用属性、方法和 事件？ 表单验证中常见的错误有哪些？ 四、锚点与链接对象 1、锚点对象（ anchor） JS中的锚点对象是文档对象的一个属性，通常以数组的形式表示网页 中所有的锚点。 anchors数组中包含了文档中定义的所有的锚点（ .）标记，可 以通过该数组访问和查找某个锚点 anchors数组中存储锚点的顺序是以锚点在文档中出现的顺序存储的， 下标从 0开始

28、anchors数组常用属性 doucment.anchors.length：文档中锚点的总数 doucment.anchorsi.name：某个锚点的 name参数值 doucment.anchorsi.id：某个锚点的 id参数值 锚点操作 锚点定义： 锚点定义 锚点链接 /跳转： 锚点链接 链接对象 链接对象是文档对象的一个属性，每个链接对象都存储在 links数组中 链接对象是以在页面中出现的顺序存储在 links数组中的 链接对象的常用属性 href：完整的链接 URL（如 host:链接 URL中的主机名和端口号 hostname :链接 URL中的主机名（ ） port :链接 U

29、RL中的端口号（ 80） protocol：链接 URL中的协议部分并包括冒号（ http:） pathname：链接 URL中的路径名部分（ mr.html） search：链接 URL中的条件部分并包括“？”符号（如 ?s=10） target：链接的目标窗口打开方式 _parent：表示在上一级窗口中打开（常在框架中使用） _blank：表示在新窗口中打开 _self：表示在同一窗口中打开 _top：表示在浏览器的整个窗口中打开，忽略任何框架 五、图像（ image)对象 HTML中以 创建一个图像，相应的图像对象将被创建 ，可以使用 JS控件图像对象 doucment.images数组

30、包含了页面中所有的图像对象 表示某个图像： doucment.imagesi doucment.imagesimageName （ imageName为 中的 name属 性值） function setPictrue()/用户选择一个图像后马上显示该图像 var pic=document.form1.f.value; document.imagespimg.src=pic; 上传图片： 如何使用图片代替提交按钮 为了美观，现把提交按钮变成图片，但仍然保持 表单的验证功能？如何实现？ 页面效果 使用图片的单击事件。 onClick=checkForm( ) 如何使用图片代替提交按钮 根据上述分

31、析和提供的素材页面来实现表单验证。 素材页面 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！ ); document.myform.txtUserName.focus( ); 检验是否为空 单击事件，调用 表单验证函数 如何使用图片代替提交按钮 能进行表单验证，但即使是正确填写了表单，也 不能提交页面（点击“注册”没反映）。 如何使用图片代替提交按钮 因为图片不具备“提交”按钮的提交功能，所以需 要人工调用提交方法 submit( ) 。 function checkFo

32、rm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！ ); document.myform.txtUserName.focus( ); else document.myform.submit( ); 查看源代码 如果表单输入合法，则提交表单 改变图像的透明度 图像对象的事件 onLoad、 onClick、 onMouseOver、 onMouseOut等 如：鼠标进入 /离开图像时，透明度的变化 function visible(cursor,i) if(i=0) cursor.filters.alpha.

33、opacity=100; else cursor.filters.alpha.opacity=45; 补充特效 即时提示错误 内容动态改变的层 制作即时提示错误的特效 如何制作即时提示错误的特效？ 页面效果 制作即时提示错误的特效 使用 DIV层的内容动态改变。 在每个输入框后添加一个 DIV层 , 根据用户的输入 , 动 态显示错误信息 制作即时提示错误的特效 演示实现步骤： 1、在登录文本框后插入 DIV标签 loginError （即没有样式的 DIV层） 2、修改源代码，设置 DIV的显示方式为 inline，即和文本框在同一行 演示示例 4： 演示素材 制作即时提示错误的特效 演示实

34、现步骤： 3、添加文本框失去焦点的事件函数 ： function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.loginName.value; if (strName.length = 0) myDiv.innerHTML=用户名不能为空 ; return; 查看源代码 如果输入的信息不合法，则利用 DIV 的 innerHTML或 innerText进行错误 提示， innerText只能写文本信息 获取插入的 DIV对象

35、 小结 2 完善”密码“和”电子邮件“的错误提示功能。 提示： 1、密码和电子邮件文本框后各添加一个 DIV标签 2、修改 DIV的显示样式为 inline 3、给各个文本框添加失去焦点 onBlur的事件函数 练习答案 练习素材 制作内容动态改变的层特效 如何制作内容动态改变的特效 (选择不同的计算方式 )？ 页面效果 制作内容动态改变的层特效 方法 1： 当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”； 方法 2： 当动态显示的内容较多，并相对固定时，则预先制作好 DIV 内容， 然后使用 myDiv.style.display=“none/block”；

36、有哪些方法可以实现动态改变页面内容？ 制作内容动态改变的层特效 演示实现步骤： 1、预先插入两个 DIV标签，分别放置不同计算方式 显示的内容： DIV1 按面积计算 显示的内容 DIV2 按贷款总额计 算显示的内容 演示素材 function InitDIV( ) document.getElementById(DIV1).style.display=none; 制作内容动态改变的层特效 演示实现步骤： 2、添加函数，初始化 DIV1不显示，默认按贷款总额计算： 隐藏 DIV1 页面加载时调用 查看源代码 function displayDIV( ) if (document.myform.

37、 methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; 制作内容动态改变的层特效 3、添加函数，根据“计算方式”的选择，隐藏 /显示对应 DIV层： 查看源代码 根据单选按钮的值， 隐藏 /显示对应的层 按钮的单击事件 function showDiv() var d=document.getElementById(div3); d.style.display=block; function shownotDiv() var d=document.getElementById(div3); d.style.display=none; 个人信息管理 查看个人信息 修改密码 修改个人信息