PHP教程-JavaScript高级

JavaScript高级网址：电话：4007001307JavaScript高级•BOM•事件处理•DOM概念•DOM技术•Form表单浏览器对象BOM简介对象•window对象代表浏览器的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面，如改变状态栏上的显示文字、弹出对话框、移动窗口的位置等。•对window对象的属性和方法的引用，可以省略“window.”这个前缀例如：window.alert(你好)可以直接写成alert(你好)。Window对象名称说明alert(“m提示信息)显示包含消息的对话框。confirm（“提示信息”）显示一个确认对话框，包含一个确定取消按钮prompt（”提示信息“）弹出提示信息框open(url,name)打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档close()关闭当前窗口setTimeout（”函数”,毫秒数）设置定时器：经过指定毫秒值后执行某个函数clearTimeout(定时器对象)方法Window对象HTMLHEADSCRIPTfunctionopenwindow(){window.open(google.htm);}functionclosewindow(){window.close();}/SCRIPT/HEADBODYFORMINPUTTYPE=buttonVALUE=打开窗口onClick=openwindow()INPUTTYPE=buttonVALUE=关闭窗口onClick=closewindow()/FORMBODY使用Open方法打开新窗口使用Close方法关闭窗口添加单击事件因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close（）方法也是如此。open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；Window对象我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);HTMLHEADSCRIPTlanguage=JavaScriptfunctionopenwindow(){open(adv.htm,,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);}/SCRIPT/HEADBODYonLoad=openwindow()H2看看和我一起打开的广告窗口/H2/BODY/HTMLWindow对象使用Open方法打开广告新窗口添加页面加载事件对窗口可以设置的可选参数名称说明width窗口的宽度height窗口的高度scrollbars是否显示滚动条resizable设定窗口大小是否固定menubar菜单条location地址栏toolbar浏览器工具条，包括后退及前进按钮等fullscreen是否全屏显示titlebar标题栏window对象－方法•navigate()方法•setInterval()方法•clearInterval()方法•moveTo()方法•resizeTo()方法•showModalDialog()方法•showModelessDialog()方法•网页文件：scriptwindow.open(information.html,_blank,top=0,left=0,width=200,height=200,toolbar=no);script•information.html网页文件：scriptwindow.setTimeout(window.close(),5000);scriptbodycenterh3通知/h3/center5秒钟以后，这个窗口会自动关闭！/body•test.html网页文件：（全屏）scriptwindow.open(information.html,_blank,top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no);script•information.html网页文件：(增大)scriptwindow.setTimeout(window.close(),5000);window.setInterval(grow(),100);functiongrow(){window.resizeBy(5,5);}scriptbodycenterh3通知/h3/center5秒钟以后，这个窗口会自动关闭！/bodyWindow对象名称说明document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。frames帧框架。event事件对象。screen包含有关客户端的屏幕和显示性能的信息。对象属性JavaScript事件处理程序•JavaScript事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行事件处理事件事件处理程序的基本语法是：事件名=JavaScript代码或调用函数例如：INPUTtype=”BUTTON”…onClick=“alert(“单击我！”);”INPUTtype=”BUTTON”…onMouseDown=“check()”表示鼠标按下时，将调用执行函数check()。JavaScript事件事件名说明onClick鼠标单击onChange文本内容或下拉菜单中的选项发生改变onFocus获得焦点，表示文本框等获得鼠标光标。onBlur失去焦点，表示文本框等失去鼠标光标。onMouseOver鼠标悬停，即鼠标停留在图片等的上方onMouseOut鼠标移出，即离开图片等所在的区域onMouseMove鼠标移动，表示在DIV层等上方移动onLoad网页文档加载事件onSubmit表单提交事件onMouseDown鼠标按下onMouseUp鼠标弹起如何编写事件处理程序•一、在事件源对象所对应的HTML标签上增加一个要处理事件属性，让事件属性值等于处理事件的函数名或程序代码。•格式：tagon事件=“语句组|函数名”•例1：bodyonload=alert('建议浏览器的分辨率：800x600');bodyonload=varstr='建议浏览器的分辨率：800x600';alert(str);•例2：scriptfunctionshow(){varstr=建议浏览器的分辨率：800x600;alert(str);}/scriptbodyonload=show();htmlheadscript!--functionhideContextmenu(){window.event.returnValue=false;}//--/script/headbodyoncontextmenu=hideContextmenu()/body/html－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－htmlheadscript!--functionhideContextmenu(){returnfalse;}//--/script/headbodyoncontextmenu=returnhideContextmenu()/body/html禁用浏览器右键•二、直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。•格式：对象名.on事件=语句|函数名•例1：document.onload=alert(建议浏览器的分辨率：800x600);•例2：scriptdocument.onload=function(){varstr=建议浏览器的分辨率：800x600;alert(str);}/script•三、在一个专门的script标签对中编写某个元素对象的某种事件处理程序代码，并用for属性指定事件源和用event属性指定事件名，这种script标签中的脚本程序只在指定事件源的指定事件发生时才被调用执行，这种方式常用于网页文档中的各种插件对象的事件处理程序：scriptlanguage=“javascript”for=“document”event=“oncontextmenu”window.event.returnValue=false;/scriptevent对象名称说明altKey是否按下alt键，true为按下ctrlKey是否按下ctrl键shiftKey是否按下shift键clientX，clientY事件发生时，鼠标在客户端的x、y坐标screenX，screenY相对于整个计算机屏幕的x、y坐标offsetX，offsetY相对于事件发生对象的x、y坐标x,y相对于引起事件元素的父元素的x、y坐标returnValue是否取消事件的默认动作，false为取消cancelBubble是否停止事件冒泡，true为停止srcElement引起事件的元素对象keyCode表示按下按键的数字代号Button表示事件是否正在冒泡阶段属性eventobject.html按下键盘事件scriptfunctionwindow_onkeypress(){alert(window.event.keyCode);}/scriptbodyonkeypress=window_onkeypress()/body按ESC关闭窗口scriptfunctionwindow_onkeypress(){//alert(window.event.keyCode);if(window.event.keyCode==27){window.close();}}/scriptbodyonkeypress=window_onkeypress()/body其它属性scriptlanguage=JavaScriptfunctioncheckCancel(){if(window.event.shiftKey){window.event.cancelBubble=true;}}functionshowSrc(){if(window.event.srcElement.tagName.toLowerCase()==img)//IMG要大写{alert(window.event.srcElement.src);}}/scriptbodyonclick=showSrc()imgonclick=checkCance