javascript控制浏览器对象以及表单验证_第1页
javascript控制浏览器对象以及表单验证_第2页
javascript控制浏览器对象以及表单验证_第3页
javascript控制浏览器对象以及表单验证_第4页
javascript控制浏览器对象以及表单验证_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript浏览器对象以及表单验证

回顾JavaScript相关概念及作用JavaScript基本语法函数面向对象的JavaScriptJavaScript内建对象String,Array,Date浏览器对象window本章目标HTML文档中的相关事件window对象属性及方法document对象history对象location对象表单校验JavaScript操作HTML元素通过id控制HTML元素生成树状目录HTML文档中的事件事件JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。事件举例：鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框确认表单键盘按键注意：事件通常与函数配合使用，当事件发生时函数才会执行HTML文档中的事件点击事件:onclick,ondbclick焦点:onfocus,onblur鼠标: onmouseout,onmouseover,onmouseup,onmousemove,onmousedown键盘:onkeydown,onkeypress,onkeyupbody中:onload,onunload,onerror,onresize选择事件:onchangeform表单:onsubmit,onreset事件--示例<html><head><scriptlanguage="javascript"> </script></head><bodyonload="alert('加载完成');"onunload="alert('退出');"><marqueeonmouseover="this.stop();"onmouseout="this.start();">我会跑噢</marquee><br><inputtype="button"value="按钮1"onclick="alert('单击');"onkeydown="alert(event.keyCode);"/></body></html>浏览器对象

Window窗口对象location地址对象document文档对象FORM表单对象浏览器对象的分层结构window.document.myform.text1window对象简介Window对象是JavaScript层级中的顶层对象。Window对象代表一个浏览器窗口或一个框架。Window对象会在<body>或<frameset>每次出现时被自动创建。在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写Window.alert()。window对象的属性1.navigator2.Windowdocument（文档对象）frame（框架对象）location（位置对象）history（历史对象）links链接对象archors锚对象forms表单对象images图片对象window对象常用方法alert(‘信息’)：消息框prompt(‘提示信息’,默认值)：标准输入框confirm()：确认框open()：打开一个新窗口close()：关闭窗口document对象Document对象表示给定浏览器窗口中的HTML文档，可用来访问页面中的所有元素。(特殊颜色标的要求掌握)

Document对象是Window对象的一个部分，可通过window.document属性来访问方法getElementByIdgetElementsByNamegetElementsByTagNamecloseopenwritewritelnhistory对象此对象提供客户最近访问过的URL列表。属性Length返回浏览器历史列表中的URL数量方法

back()加载history列表中的前一个URL

forward()加载history列表中的下一个URLgo()加载history列表中的某个具体页面location对象Location对象存储在Window对象的Location属性中，表示那个窗口中当前显示的文档的Web地址。它的href属性存放的是文档的完整URL，其他属性则分别描述了URL的各个部分。(特殊颜色标的要求掌握)属性hash 指BookMark”#”后面的字符串pathname 指主机后面的字符串，包含斜线，不包含问号后面的参数字符串hostname 指主机和端口字符串

href 目前网页的URL字符串包含问号后面的参数

port 端口号字符串search 指URL问号后面的参数字符串，包含”？”方法assign(url) 如同设定window.location.href的值

reload() 重新装载当前文档replace(url) 代替原来的URL，而且此URL不会存入history对象里相关数组forms[] //属于document 在程序中使用多表单时,建立该数组。elements[]//属于form在一个窗口中使用几个元素时,建立该数组。frames[]//属于window建立框架时,使用该数组document.forms[0].elements[0]表示每一表单窗体中的第一个元素。多框架下window对象间关系父window对象，包括frames、self属性frames[0]/子window对象1frames[1]/子window对象2框架之间的关系：parent 表示上一层框架top 表示最上层框架self 表示目前所在的框架表单验证例子 1.校验函数 functioncheckusername(){ varusername=document.forms[0].username; varusernamespan=document.getElementById("usernamspan"); if(username.value==""){ usernamespan.innerHTML="<imgsrc='cc_error.gif'/>姓名不得为空！"; returnfalse; }else{ usernamespan.innerHTML=""; returntrue; } } functionvalidate(){ varusernameflag=checkusername(); varpassword=checkpassword(); if(usernameflag&&password){ returntrue; }else{ returnfalse; } } 2.提交前执行校验函数

<formonsubmit="returnvalidate()">脚本控制HTML元素<html><head><scriptlanguage="javascript">functionmyClick(){

sp.style.background="red";

sp.style.color="green";}</script></head><body><spanid="sp">大家好</span><br><br><inputtype="button"value="按钮"onclick="myClick();"/></body></html>框架控制1-示例代码<html><head><scriptlanguage="javascript">functionmyLoad(){window.frames[1].location.href="";}</script></head><framesetcols="180,*"frameborder="1"onload="myLoad();"><framesrc=""name="leftFrame"/><framesrc=""name="rightFrame"/></frameset></html>框架控制2-效果控制框架实现如下图效果:document.getElementById(“”);框架控制2-效果<script>functionresize(){ varsp=document.getElementById("sp"); varlefttd=document.getElementById("lefttd"); alert(lefttd.style.display); if(lefttd.style.display=="none"){ lefttd.style.display="block"; }else{ lefttd.style.display="none"; } }</script>控制成生树状菜单-效果控制HTML标记属性,效果如下;将用到标记属性:XX.style.display=“none”;document.getElementById(“”);functionchange(tid,length){ for(vari=0;i<length;i++){ vare=document.getElementById(tid+"_"+i); if(e.style.display=="none"){ e.style.display="block"; }else{ e.style.display="none"; } } }

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论