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

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

2、= ; 淘宝 ,修改内容,修改属性,HTML文档的每个节点都是对象，类似 WinForm中的控件，都具备属性、方法和事件,定位链接元素（对象）,DOM对象模型-1,window 窗口对象,location 地址对象,FORM 表单对象,浏览器对象的分层结构,window.document.myform.text1,document 文档对象,DOM对象模型-2,浏览器对象的分层结构,二、document（文档）对象,属性 方法,制作浮动的广告图片-1,如何在页面上方显示广告图片？如何控制图片的移动？,使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标,制作浮动的广告图片

3、-2,实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementByID( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标,制作浮动的广告图片-3,常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度,制作浮动的广告图片-4, var advInitTop=0; function inix( ) advInitTop=document.getElementById(advLayer).style.pixelTop; function mov

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

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

6、ment.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( )函数 ,查看完整代码,隐藏关闭图标所在的层和浮动窗口所在的层,制作带关闭按钮的浮动窗口-4,上一张

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

8、ction 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.getElementById(advLayer

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

10、使用getElementsByName( )方法获得一组同名的复选框对象。 2、通过循环来改变复选框是否被选中属性checked的值。,制作实现全选效果-4, function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;i 全选 全不选 ,查看完整代码,判断同名元素中是否是复选框,是复选框就改变是否选中属性checked的值,小结 2,编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。,练习答案,练习代码,常见错误-1, function

11、 checkAll(boolValue ) alert(OK); var allCheckBoxs=document.getElementsByName(isBuy) ; alert(allCheckBoxs0.type); for (var i=0;i,这里是判断关系所以应该是比较运算符=，而不是赋值运算符=, function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;i 全选 全不选 ,常见错误-2,调用时，参数不要加单引号，false和false的含义不一

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

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

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

15、subButton.disabled=true; document.myform.submin(); 表单对象事件 onSubmit事件：提交表单（单击提交按钮时触发） onReset事件：重置表单（单击重置按钮时触发）,表单验证的内容-1,不能为空且不能有数字,不能为空且不能有数字,不能为空，且只能包括字母、数字和下划线字符,表单验证的内容-2,不能为空且包含字符和.,只能二选一,年月日不能为空，且不能超出其要求的范围,表单验证的思路-1,如何编写脚本验证表单？,1、获取表单元素的值（String类型），然后进行判断,2、触发表单（FORM）的提交事件（onSubmit）,表单验证的思路-2

16、,常用的String对象 使用 var 语句 var newstr = 这是我的字符串 创建 String 对象 var newstr = new String(这是我的字符串“) 调用方法和属性 字符串对象.属性名 字符串对象.方法名( ),表单验证的思路-3,String对象常用的属性和方法,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置；如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0,表单验证的思路-4,查看完整代码,检查电子邮件email 是否包

17、含“”和”.”, function checkEmail( ) 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表示没找到“”字

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

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

20、erName() ,同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,小结 1,编写如下图所示，实现登录表单的验证功能,练习代码,练习答案,文本框控件-1,如何实现如下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件-2,文本框对象的常用属性、方法、事件,使用文本框对象的相关方法，实现选中效果,一次性完成验证 一个个完成验证 用户名： 光标进入文本框时，修改其内容,用户验证,用户名： function update(o) o.value=; o.style.color=red; , functi

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

22、t.myform.txtEmail.style.color=red; *必填 ,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法clearText( ),小结 2,编写如下图所示，实现注册表单的验证功能,练习代码,练习答案,年份必须是20打头,日期必须在1到31之间,常见错误-1, function validateform( ) if(sNameCheck() ,提交按钮type=submit,清空按钮type=reset,常见错误-2, function validateform( ) if(sNameCheck() ,onsubmit不是提交按钮的事件,小结,为什么需要表单验

23、证？ 常用的表单验证主要包括哪些内容？ 简述表单验证的大致思路？ 简要说明文本框对象的常用属性、方法和事件？ 表单验证中常见的错误有哪些？,四、锚点与链接对象,1、锚点对象（anchor） JS中的锚点对象是文档对象的一个属性，通常以数组的形式表示网页中所有的锚点。 anchors数组中包含了文档中定义的所有的锚点（.）标记，可以通过该数组访问和查找某个锚点 anchors数组中存储锚点的顺序是以锚点在文档中出现的顺序存储的，下标从0开始 anchors数组常用属性 doucment.anchors.length：文档中锚点的总数 ：某个锚点的nam

24、e参数值 doucment.anchorsi.id：某个锚点的id参数值 锚点操作 锚点定义：锚点定义 锚点链接/跳转：锚点链接,链接对象,链接对象是文档对象的一个属性，每个链接对象都存储在links数组中 链接对象是以在页面中出现的顺序存储在links数组中的 链接对象的常用属性 href：完整的链接URL（如 host:链接URL中的主机名和端口号 hostname :链接URL中的主机名（） port :链接URL中的端口号（80） protocol：链接URL中的协议部分并包括冒号（http:） pathname：链接URL中的路径名部分（mr.html） search：链接URL中的

25、条件部分并包括“？”符号（如?s=10） target：链接的目标窗口打开方式 _parent：表示在上一级窗口中打开（常在框架中使用） _blank：表示在新窗口中打开 _self：表示在同一窗口中打开 _top：表示在浏览器的整个窗口中打开，忽略任何框架,五、图像（image)对象,HTML中以创建一个图像，相应的图像对象将被创建，可以使用JS控件图像对象 doucment.images数组包含了页面中所有的图像对象 表示某个图像： doucment.imagesi doucment.imagesimageName （imageName为中的name属性值）,function setPic

26、true()/用户选择一个图像后马上显示该图像 var pic=document.form1.f.value; document.imagespimg.src=pic; 上传图片： ,如何使用图片代替提交按钮,为了美观，现把提交按钮变成图片，但仍然保持 表单的验证功能？如何实现？,页面效果,使用图片的单击事件。onClick=checkForm( ),如何使用图片代替提交按钮,根据上述分析和提供的素材页面来实现表单验证。,素材页面, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不

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

28、s( ); else document.myform.submit( ); ,查看源代码,如果表单输入合法，则提交表单,改变图像的透明度,图像对象的事件 onLoad、onClick、onMouseOver、onMouseOut等 如：鼠标进入/离开图像时，透明度的变化,function visible(cursor,i) if(i=0) cursor.filters.alpha.opacity=100; else cursor.filters.alpha.opacity=45; ,补充特效,即时提示错误 内容动态改变的层,制作即时提示错误的特效,如何制作即时提示错误的特效？,页面效果,制作即

29、时提示错误的特效,使用DIV层的内容动态改变。,在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息,制作即时提示错误的特效,演示实现步骤： 1、在登录文本框后插入DIV标签loginError （即没有样式的DIV层） 2、修改源代码，设置DIV的显示方式为inline，即和文本框在同一行 ,演示示例4：演示素材,制作即时提示错误的特效,演示实现步骤： 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对象,小结2,完善”密码“和”电子邮件“的错误提示功能。,提示： 1、密码和电子邮件文本框后各添加一个DIV标签 2、修改DIV的显示样式为inline 3、给各个文本框添加失去焦点onB