06-07_JavaScript控制浏览器对象

JavaScript控制浏览器对象目标HTML文档中的相关事件浏览器对象window对象属性及方法Document对象History对象location对象脚本对非表单元素和表单元素的控制数据校验HTML文档中的事件事件JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。事件举例：鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框确认表单键盘按键注意：事件通常与函数配合使用，当事件发生时函数才会执行HTML文档中的事件点击事件:onclick,ondbclick焦点:onfocus,onblur鼠标:onmouseout,onmouseover,onmousemove,onmousedown，onmouseup键盘:onkeydown,onkeypress,onkeyupbody中:onload,onunload,onerror,onresize选择事件:onchangeform表单:onsubmit,onreset事件--示例htmlhead/headbodyonload=alert('加载完成');onunload=alert('退出');marqueeonmouseover=this.stop();onmouseout=this.start();我会跑噢/marqueebrinputtype=buttonvalue=按钮1onclick=alert('单击');onkeydown=alert(event.keyCode);//body/htmlwindow对象简介Window对象是JavaScript层级中的顶层对象。Window对象代表一个浏览器窗口或一个框架。Window对象会在body或frameset每次出现时被自动创建。在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写Window.alert()。window对象的属性Window对象属性Document对Document对象的只读引用History对History对象的只读引用Location用于窗口或框架的Location对象Screen对Screen对象的只读引用Name设置或返回窗口的名称status状态栏信息opener返回打开本窗口的窗口对象top/self/parent/frames多框架下的window对象属性window对象方法方法alertconfirmpromptblurclosefocusnavigate(url)moveBy(水平偏移，垂直偏移)/moveTo(横坐标x，纵坐标y)scrollBy(水平偏移，垂直偏移)/scrollTo(x，y)resizeBy(水平,垂直)/resizeTo(长度,宽度)setTimeout(执行动作，毫秒数)/clearTimeout()setInterval(执行动作，毫秒数)/clearInterval()open(url,target,feture)showModalDialog(url,argumentParam,feture)showModelessDialog(url,argumentParam,feture)document对象Document对象表示给定浏览器窗口中的HTML文档，可用来访问页面中的所有元素。(特殊颜色标的要求掌握)Document对象是Window对象的一个部分，可通过window.document属性来访问对象的集合all[]提供对文档中所有HTML元素的访问forms[]返回对文档中所有Form对象引用images[]返回对文档中所有Image对象引用属性bodycookielastModifiedtitleURLcookie方法getElementByIdgetElementsByNamegetElementsByTagNamecloseopenwritewritelnhistory对象此对象提供客户最近访问过的URL列表。属性Length返回浏览器历史列表中的URL数量方法back()加载history列表中的前一个URLforward()加载history列表中的下一个URLgo()加载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表示目前所在的框架脚本控制非表单元素htmlheadscriptlanguage=javascriptfunctionmyClick(){sp.style.background=red;sp.style.color=green;}/script/headbodyspanid=sp大家好/spanbrbrinputtype=buttonvalue=按钮onclick=myClick();//body/html框架控制-示例代码htmlheadscriptlanguage=javascriptfunctionmyLoad(){window.frames[1].location.href=}/script/headframesetcols=180,*frameborder=1onload=myLoad();framesrc=name=leftFrame/framesrc=name=rightFrame//frameset/html控制成生树状菜单-效果控制HTML标记属性,效果如下;将用到标记属性:XX.style.display=“none”;eval()及document.getElementById(“”);脚本控制表单元素-表单验证表单验证：在完成表单提交前完成数据完整性校验。一般的表单验证是用javascript在客户端完成的，这样做可以减轻服务器压力，并且验证效率高（不需要与服务器之间传递数据）。表单验证例子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文档中的相关事件浏览器对象window对象属性及方法Document对象History对象location对象脚本对非表单元素和表单元素的控制数据校验