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

JS常用文档对象,制作：潘院明,HTML文档的树状结构,根节点,根节点的子节点,有什么办法对HTML中的内容进行动态改变呢？,演示示例3：动态改变HTML中的内容,使用DocumentObjectModel,相邻节点,一、DOM,DOMDocumentObjectModel,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件。,functionchangeLink()document.getElementById(myAnchor).innerHTML=搜狐;document.getElementById(myAnchor).href=;淘宝,修改内容,修改属性,HTML文档的每个节点都是对象，类似WinForm中的控件，都具备属性、方法和事件,定位链接元素（对象）,DOM对象模型-1,window窗口对象,location地址对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,document文档对象,DOM对象模型-2,浏览器对象的分层结构,二、document（文档）对象,属性方法,制作浮动的广告图片-1,如何在页面上方显示广告图片？如何控制图片的移动？,使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标,制作浮动的广告图片-2,实现思路：在页面中插入层，然后在层中插入图片编写脚本1、使用getElementByID()方法获取层对象2、捕获鼠标滚动事件，改变层对象的位置坐标,制作浮动的广告图片-3,常见的页面坐标的介绍top:指定元素的上边界位置。pixelTop:设置或返回元素的上边界。left:指定元素的左边界位置。scrolltop:页面滚动的高度,制作浮动的广告图片-4,varadvInitTop=0;functioninix()advInitTop=document.getElementById(advLayer).style.pixelTop;functionmove()document.getElementById(advLayer).style.pixelTop=advInitTop+document.body.scrollTop;window.onscroll=move;/当页面滚动时调用move()函数,查看完整代码,获取层的初始与上边界的距离,通过页面滚动的高度来改变层距离上边界的距离,浏览器兼容性,varscrollTop;if(typeofwindow.pageYOffset!=undefined)scrollTop=window.pageYOffset;elseif(patMode!=undefined,制作带关闭按钮的浮动窗口-1,如何实现带关闭功能的浮动窗口？,把带关闭的图标放到层中，当点击图标时层消失。,制作带关闭按钮的浮动窗口-2,实现思路：在页面中插入层，在层中插入图片编写脚本1、使用getElementById()方法获得层对象2、设置层的样式style的显示属性display=none,制作带关闭按钮的浮动窗口-3,varadvInitTop=0;functioninix()advInitTop=document.getElementById(advLayer).style.pixelTop;functionmove()document.getElementById(advLayer).style.pixelTop=advInitTop+document.body.scrollTop;functioncloseMe()document.getElementById(closeLayer).style.display=none;document.getElementById(advLayer).style.display=none;window.onscroll=move;/当页面滚动时调用move()函数,查看完整代码,隐藏关闭图标所在的层和浮动窗口所在的层,制作带关闭按钮的浮动窗口-4,上一张PPT中示例能实现关闭了，但关闭图片不能跟随滚动，怎么办？,让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。,解决办法：在move()方法中添加图标所在的层与页面滚动的高度保持同步的代码即可,制作带关闭按钮的浮动窗口-5,varadvInitTop=0;varcloseInitTop=0;functioninix()advInitTop=document.getElementById(advLayer).style.pixelTop;closeInitTop=document.getElementById(closeLayer).style.pixelTop;functionmove()document.getElementById(advLayer).style.pixelTop=advInitTop+document.body.scrollTop;document.getElementById(closeLayer).style.pixelTop=closeInitTop+document.body.scrollTop;functioncloseMe()document.getElementById(closeLayer).style.display=none;document.getElementById(advLayer).style.display=none;window.onscroll=move;/窗口的滚动事件,查看完整代码,关闭图片所在的层和滚动条同步滚动,小结1,制作右边栏浮动的带关闭按钮的广告图片,与滚动条同步滚动广告窗口,练习答案,练习代码,制作实现全选效果-1,如何实现如图所示的全选或全不选效果？,全选效果,全不选效果,制作实现全选效果-2,1、复选框是否选中的属性是哪个？2、写代码逐个复选框设置为true，有没有更好的办法？,checked属性,解决办法:使用复选框数组，通过循环给checked属性赋值,制作实现全选效果-3,实现思路：创建一组同名的复选框编写脚本1、使用getElementsByName()方法获得一组同名的复选框对象。2、通过循环来改变复选框是否被选中属性checked的值。,制作实现全选效果-4,functioncheckAll(boolValue)varallCheckBoxs=document.getElementsByName(isBuy);for(vari=0;i全选全不选,查看完整代码,判断同名元素中是否是复选框,是复选框就改变是否选中属性checked的值,小结2,编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。,练习答案,练习代码,常见错误-1,functioncheckAll(boolValue)alert(OK);varallCheckBoxs=document.getElementsByName(isBuy);alert(allCheckBoxs0.type);for(vari=0;i,这里是判断关系所以应该是比较运算符=，而不是赋值运算符=,functioncheckAll(boolValue)varallCheckBoxs=document.getElementsByName(isBuy);for(vari=0;i全选全不选,常见错误-2,调用时，参数不要加单引号，false和false的含义不一样,小结,请介绍Document对象的常用属性？请详细解释Document对象的常用方法？请简述制作带关闭按钮的浮动窗口实现思路？请简要回答如何制作全选/全不选复选框效果？,为什么需要表单验证,服务器,IE,脚本在客户端执行，减轻服务器端的压力,发送请求,返回响应,发送请求,返回响应,发送请求,返回响应,三、表单（form）对象,表单对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以JS脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。在页面中定义表单后，通常需要使用JS语言验证表单数据，在JS中验证表单数据需要使用表单对象的属性、方法和事件。JS的最大优点在于可以处理页面中的表单，可以在表单数据提交服务器之前，对用户输入的数据进行有效的检查。如不符合规则，则弹出错误提示对话框，告知用户错误信息。（验证工作在客户端完成，降低系统的复杂性，提高页面加载速度）一个document对象可以包含多个form对象document.forms数组：document.formsi一个form对象可以包含多个element对象（表单元素）formName.elements数组：formName.elementsi,表单（form）对象,当用户在网页中添加标签后，就创建一个form对象表单对象属性document.forms.length：网页中表单的个数document.formsi.elementsj.name：表单中的元素名称表单对象方法submit()：提交一个表单reset()：清除一个表单的数据，不需要使用重置按钮也可重置表单这两个方法等同于提交/重置按钮，当表单使用这两个方法时，不会触发onSubmit/onReset事件eg:document.forms0.submit();可以在普通按钮上使用onClick事件处理表单提交或表单重置,表单（form）对象,表单提交的常见问题用户多次提交，将会引起创建多次用户请求的错误解决方法：在表单提交后将表单提交按钮设置为禁用document.myform.subButton.disabled=true;document.myform.submin();表单对象事件onSubmit事件：提交表单（单击提交按钮时触发）onReset事件：重置表单（单击重置按钮时触发）,表单验证的内容-1,不能为空且不能有数字,不能为空且不能有数字,不能为空，且只能包括字母、数字和下划线字符,表单验证的内容-2,不能为空且包含字符和.,只能二选一,年月日不能为空，且不能超出其要求的范围,表单验证的思路-1,如何编写脚本验证表单？,1、获取表单元素的值（String类型），然后进行判断,2、触发表单（FORM）的提交事件（onSubmit）,表单验证的思路-2,常用的String对象使用var语句varnewstr=这是我的字符串创建String对象varnewstr=newString(这是我的字符串“)调用方法和属性字符串对象.属性名字符串对象.方法名(),表单验证的思路-3,String对象常用的属性和方法,语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回1例如：varxvary=“abcdefg”;x=y.indexOf(“c”,0);/返回结果为2，起始位置是0,表单验证的思路-4,查看完整代码,检查电子邮件email是否包含“”和”.”,functioncheckEmail()varstrEmail=document.myform.txtEmail.value;if(strEmail.length=0)alert(电子邮件不能为空!);returnfalse;if(strEmail.indexOf(,0)=-1)alert(电子邮件格式不正确n必须包含符号！);returnfalse;if(strEmail.indexOf(.,0)=-1)alert(电子邮件格式不正确n必须包含.符号！);returnfalse;returntrue;,返回结果-1表示没找到“”字符,获取表单元素的值,表单的提交事件,表单验证的思路-5-1,查看完整代码,表单验证的思路-5-2,查看完整代码,functioncheckUserName()/验证用户名varfname=document.myform.txtUser.value;if(fname.length!=0)for(i=0;i0)alert(名字中包含数字n+请删除名字中的数字和特殊字符);returnfalseelsealert(请输入“名字”文本框);document.myform.txtUser.focus();returnfalsereturntrue;,验证用户名不能包含数字,获取表单元素的值,表单验证的思路-5-3,查看完整代码,functionpassCheck()/验证密码varuserpass=document.myform.txtPassword.value;if(userpass=)alert(未输入密码n+请输入密码);document.myform.txtPassword.focus();returnfalse;if(userpass.length,验证密码不少于6位,获取表单元素的值,表单验证的思路-5-4,查看完整代码,functionvalidateform()if(checkUserName(),同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,小结1,编写如下图所示，实现登录表单的验证功能,练习代码,练习答案,文本框控件-1,如何实现如下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件-2,文本框对象的常用属性、方法、事件,使用文本框对象的相关方法，实现选中效果,一次性完成验证一个个完成验证用户名：光标进入文本框时，修改其内容,用户验证,用户名：functionupdate(o)o.value=;o.style.color=red;,functioncheckname(o)vara=document.getElementById(aa);varname=o.value;a.innerHTML=;/alert(a.innerHTML);if(name.length用户名必须6个以上字符;ThisismyJSPpage.用户名：,文本框控件-3,查看完整代码,.functionclearText()if(document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将发送激活密码)document.myform.txtEmail.value=;document.myform.txtEmail.style.color=red;*必填,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法clearText(),小结2,编写如下图所示，实现注册表单的验证功能,练习代码,练习答案,年份必须是20打头,日期必须在1到31之间,常见错误-1,functionvalidateform()if(sNameCheck(),提交按钮type=submit,清空按钮type=reset,常见错误-2,functionvalidateform()if(sNameCheck(),onsubmit不是提交按钮的事件,小结,为什么需要表单验证？常用的表单验证主要包括哪些内容？简述表单验证的大致思路？简要说明文本框对象的常用属性、方法和事件？表单验证中常见的错误有哪些？,四、锚点与链接对象,1、锚点对象（anchor）JS中的锚点对象是文档对象的一个属性，通常以数组的形式表示网页中所有的锚点。anchors数组中包含了文档中定义的所有的锚点（.）标记，可以通过该数组访问和查找某个锚点anchors数组中存储锚点的顺序是以锚点在文档中出现的顺序存储的，下标从0开始anchors数组常用属性doucment.anchors.length：文档中锚点的总数doucment.anchorsi.name：某个锚点的name参数值doucment.anchorsi.id：某个锚点的id参数值锚点操作锚点定义：锚点定义锚点链接/跳转：锚点链接,链接对象,链接对象是文档对象的一个属性，每个链接对象都存储在links数组中链接对象是以在页面中出现的顺序存储在links数组中的链接对象的常用属性href：完整的链接URL（如,五、图像（image)对象,HTML中以创建一个图像，相应的图像对象将被创建，可以使用JS控件图像对象doucment.images数组包含了页面中所有的图像对象表示某个图像：doucment.imagesidoucment.imagesimageName（imageName为中的name属性值）,functionsetPictrue()/用户选择一个图像后马上显示该图像varpic=document.form1.f.value;document.imagespimg.src=pic;上传图片：,如何使用图片代替提交按钮,为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？,页面效果,使用图片的单击事件。onClick=checkForm(),如何使用图片代替提交按钮,根据上述分析和提供的素材页面来实现表单验证。,素材页面,functioncheckForm()if(document.myform.txtUserName.value.length=0)alert(用户名不能为空！);document.myform.txtUserName.focus();,检验是否为空,单击事件，调用表单验证函数,如何使用图片代替提交按钮,能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击“注册”没反映）。,如何使用图片代替提交按钮,因为图片不具备“提交”按钮的提交功能，所以需要人工调用提交方法submit()。,functioncheckForm()if(document.myform.txtUserName.value.length=0)alert(用户名不能为空！);document.myform.txtUserName.focus();elsedocument.myform.submit();,查看源代码,如果表单输入合法，则提交表单,改变图像的透明度,图像对象的事件onLoad、onClick、onMouseOver、onMouseOut等如：鼠标进入/离开图像时，透明度的变化,functionvisible(cursor,i)if(i=0)cursor.filters.alpha.opacity=100;elsecursor.filters.alpha.opacity=45;,补充特效,即时提示错误内容动态改变的层,制作即时提示错误的特效,如何制作即时提示错误的特效？,页面效果,制作即时提示错误的特效,使用DIV层的内容动态改变。,在每个输入框后添加一个DIV层,根据用户的输入,动态显示错误信息,制作即时提示错误的特效,演示实现步骤：1、在登录文本框后插入DIV标签loginError（即没有样式的DIV层）2、修改源代码，设置DIV的显示方式为inline，即和文本框在同一行,演示示例4：演示素材,制作即时提示错误的特效,演示实现步骤：3、添加文本框失去焦点的事件函数：,functioncheckLogin()varmyDiv=document.getElementById(loginError);myDiv.innerHTML=;varstrName=document.userfrm.loginName.value;if(strName.length=0)myDiv.innerHTML=用户名不能为空;return;,查看源代码,如果输入的信息不合法，则利用DIV的innerHTML或innerText进行错误提示，innerText只能写文本信息,获取插入的DIV对象,小结2,完善”密码“和”电子邮件“的错误提示功能。,提示：1、密码和电子邮件文本框后各添加一个DIV标签2、修改DIV的显示样式为inline3、给各个文本框添加失去焦点onBlur的事件函数,练习答案练习素材,制作内容动态改变的层特效,如何制作内容动态改变的特效(选择不同的计算方式)？,页面效果,制作内容动态改变的层特效,方法1：当动态显示的内容较少时，使用myDiv.innerHTML=“HTML代码”；方法2：当动态显示的内容较多，并相对固定时，则预先制作好DIV内容，然后使用myDiv.style.display=“none/block”；,有哪些方法可以实现动态改变页面内容？,制作内容动态改变的层特效,演示实现步骤：1、预先插入两个DIV标签，分别放置不同计算方式显示的内容：,DIV1按面积计算显示的内容,DIV2按贷款总额计算显示的内容,演示素材,functionInitDIV()document.getElementById(DIV1).style.display=none;,制作内容动态改变的层特效,演示实现步骤：2、添加函数，初始化DIV1不显示，默认按贷款总额计算：,隐藏DIV1,页面加载时调用,查看源代码,functiondisplayDIV()if(document.myform.methodRadio0.checked=true)document.getElementById(DIV1).style.display=block;document.getElementById(DIV2).style.display=none;elsedocument.getElementById(DIV2).style.display=block;document.getElementById(DIV1).style.display=none;,制作内容动态改变的层特效,3、添加函数，根据“计算方式”的选择，隐藏/显示对应DIV层：,查看源代码,根据单选按钮的值，隐藏/显示对应的层,按钮的单击事件,functionshowDiv()vard=document.getElementById(div3);d.style.display=block;functionshownotDiv()vard=document.getElementById(div3);d.style.display=none;,个人信息管理查看个人信息修改密码修改个人信息,