PHP教程課件：JavaScript高級(jí)_第1頁(yè)
PHP教程課件：JavaScript高級(jí)_第2頁(yè)
PHP教程課件：JavaScript高級(jí)_第3頁(yè)
PHP教程課件：JavaScript高級(jí)_第4頁(yè)
PHP教程課件：JavaScript高級(jí)_第5頁(yè)
已閱讀5頁(yè)，還剩89頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

JavaScript高級(jí)JavaScript高級(jí)BOM事件處理

DOM概念DOM技術(shù)Form表單瀏覽器對(duì)象BOM簡(jiǎn)介Window窗口對(duì)象location地址對(duì)象document文檔對(duì)象FORM表單對(duì)象瀏覽器對(duì)象的分層結(jié)構(gòu)window.document.myform.text1window對(duì)象window對(duì)象代表瀏覽器的整個(gè)窗口，編程人員可以利用window對(duì)象控制瀏覽器窗口的各個(gè)方面，如改變狀態(tài)欄上的顯示文字、彈出對(duì)話框、移動(dòng)窗口的位置等。對(duì)window對(duì)象的屬性和方法的引用，可以省略“window.”這個(gè)前綴

例如：window.alert("你好")可以直接寫(xiě)成alert("你好")。Window對(duì)象名稱說(shuō)明alert(“m提示信息")顯示包含消息的對(duì)話框。

confirm（“提示信息”）顯示一個(gè)確認(rèn)對(duì)話框，包含一個(gè)確定取消按鈕prompt（”提示信息“）彈出提示信息框open("url","name")打開(kāi)具有指定名稱的新窗口，并加載給定URL所指定的文檔；如果沒(méi)有提供URL，則打開(kāi)一個(gè)空白文檔close()關(guān)閉當(dāng)前窗口setTimeout（”函數(shù)”,毫秒數(shù)）

設(shè)置定時(shí)器：經(jīng)過(guò)指定毫秒值后執(zhí)行某個(gè)函數(shù)

clearTimeout(定時(shí)器對(duì)象)

方法

Window對(duì)象

<HTML><HEAD><SCRIPT>functionopenwindow(){window.open("google.htm");}functionclosewindow(){window.close();}</SCRIPT></HEAD><BODY><FORM><INPUTTYPE=buttonVALUE="打開(kāi)窗口"onClick="openwindow()"><INPUTTYPE=buttonVALUE="關(guān)閉窗口"onClick="closewindow()"></FORM><BODY>使用Open方法打開(kāi)新窗口使用Close方法關(guān)閉窗口添加單擊事件因?yàn)閣indow是最頂層的根，所以可以省略window.open("google.htm");可簡(jiǎn)寫(xiě)為：open("google.htm");close（）方法也是如此。open（”打開(kāi)窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意組合：height：窗口高度；width：窗口寬度；top：窗口距離屏幕上方的象素值；left：窗口距離屏幕左側(cè)的象素值；toolbar：是否顯示工具欄，yes為顯示；menubar，scrollbars

表示菜單欄和滾動(dòng)欄。resizable：是否允許改變窗口大小，yes或1為允許location：是否顯示地址欄，yes或1為允許status：是否顯示狀態(tài)欄內(nèi)的信息，yes或1為允許；Window對(duì)象我們需要預(yù)先制作好廣告頁(yè)面，假設(shè)為adv.htm，打開(kāi)廣告窗口的語(yǔ)句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);<HTML><HEAD><SCRIPTlanguage="JavaScript">functionopenwindow(){open("adv.htm","","toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150");}</SCRIPT></HEAD><BODYonLoad="openwindow()"><H2>看看和我一起打開(kāi)的廣告窗口</H2></BODY></HTML>Window對(duì)象使用Open方法打開(kāi)廣告新窗口添加頁(yè)面加載事件對(duì)窗口可以設(shè)置的可選參數(shù)名稱說(shuō)明width窗口的寬度height窗口的高度scrollbars是否顯示滾動(dòng)條resizable設(shè)定窗口大小是否固定menubar菜單條location地址欄toolbar瀏覽器工具條，包括后退及前進(jìn)按鈕等f(wàn)ullscreen是否全屏顯示titlebar標(biāo)題欄window對(duì)象－方法navigate()方法setInterval()方法clearInterval()方法moveTo()方法resizeTo()方法showModalDialog()方法showModelessDialog()方法網(wǎng)頁(yè)文件：<script> window.open("information.html","_blank","top=0,left=0,width=200,height=200,toolbar=no");<script>information.html網(wǎng)頁(yè)文件：<script> window.setTimeout("window.close()",5000);<script><body> <center><h3>通知</h3></center> 5秒鐘以后，這個(gè)窗口會(huì)自動(dòng)關(guān)閉！</body>test.html網(wǎng)頁(yè)文件：（全屏）<script> window.open("information.html","_blank","top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no");<script>information.html網(wǎng)頁(yè)文件：(增大) <script> window.setTimeout("window.close()",5000); window.setInterval("grow()",100); functiongrow() { window.resizeBy(5,5); } <script> <body> <center><h3>通知</h3></center> 5秒鐘以后，這個(gè)窗口會(huì)自動(dòng)關(guān)閉！

</body>Window對(duì)象名稱說(shuō)明document表示給定瀏覽器窗口中的HTML文檔。history

包含有關(guān)客戶訪問(wèn)過(guò)的URL的信息。location包含有關(guān)當(dāng)前URL的信息。frames幀框架。event事件對(duì)象。

screen包含有關(guān)客戶端的屏幕和顯示性能的信息。對(duì)象屬性JavaScript事件處理程序JavaScript事件處理程序就是一組語(yǔ)句，在事件（如點(diǎn)擊鼠標(biāo)或移動(dòng)鼠標(biāo)等）發(fā)生時(shí)執(zhí)行事件處理事件事件處理程序的基本語(yǔ)法是：事件名="JavaScript代碼或調(diào)用函數(shù)"例如：<INPUTtype=”BUTTON”…onClick=“alert(“單擊我！”);”><INPUTtype=”BUTTON”…onMouseDown=“check()”>表示鼠標(biāo)按下時(shí)，將調(diào)用執(zhí)行函數(shù)check()。JavaScript事件事件名說(shuō)明onClick鼠標(biāo)單擊onChange文本內(nèi)容或下拉菜單中的選項(xiàng)發(fā)生改變onFocus獲得焦點(diǎn)，表示文本框等獲得鼠標(biāo)光標(biāo)。onBlur失去焦點(diǎn)，表示文本框等失去鼠標(biāo)光標(biāo)。onMouseOver鼠標(biāo)懸停，即鼠標(biāo)停留在圖片等的上方onMouseOut鼠標(biāo)移出，即離開(kāi)圖片等所在的區(qū)域onMouseMove鼠標(biāo)移動(dòng)，表示在<DIV>層等上方移動(dòng)onLoad網(wǎng)頁(yè)文檔加載事件onSubmit表單提交事件onMouseDown鼠標(biāo)按下onMouseUp鼠標(biāo)彈起如何編寫(xiě)事件處理程序一、在事件源對(duì)象所對(duì)應(yīng)的HTML標(biāo)簽上增加一個(gè)要處理事件屬性，讓事件屬性值等于處理事件的函數(shù)名或程序代碼。格式：

<tagon事件=“<語(yǔ)句組>|<函數(shù)名>”>例1：

<bodyonload="alert('建議瀏覽器的分辨率：800x600');">

<bodyonload="varstr='建議瀏覽器的分辨率：800x600';alert(str);">例2：

<script>

functionshow(){

varstr="建議瀏覽器的分辨率：800x600";

alert(str);

}

</script>

<bodyonload="show();"><html><head><script><!-- functionhideContextmenu() { window.event.returnValue=false; }//--></script></head><bodyoncontextmenu="hideContextmenu()"></body></html>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<html><head><script><!-- functionhideContextmenu() { returnfalse; }//--></script></head><bodyoncontextmenu="returnhideContextmenu()"></body></html>禁用瀏覽器右鍵二、直接在JavaScript代碼中，設(shè)置元素對(duì)象的事件屬性，讓事件屬性值等于處理該事件的函數(shù)名或程序代碼。格式：

對(duì)象名.on事件=<語(yǔ)句>|<函數(shù)名>例1：

document.onload=alert("建議瀏覽器的分辨率：800x600");例2：

<script>

document.onload=function(){

varstr="建議瀏覽器的分辨率：800x600";

alert(str);

}

</script>三、在一個(gè)專門(mén)的<script>標(biāo)簽對(duì)中編寫(xiě)某個(gè)元素對(duì)象的某種事件處理程序代碼，并用for屬性指定事件源和用event屬性指定事件名，這種<script>標(biāo)簽中的腳本程序只在指定事件源的指定事件發(fā)生時(shí)才被調(diào)用執(zhí)行，這種方式常用于網(wǎng)頁(yè)文檔中的各種插件對(duì)象的事件處理程序：<scriptlanguage=“javascript”for=“document”event=“oncontextmenu”> window.event.returnValue=false;</script>event對(duì)象名稱說(shuō)明altKey是否按下alt鍵，true為按下ctrlKey是否按下ctrl鍵shiftKey是否按下shift鍵clientX，clientY事件發(fā)生時(shí)，鼠標(biāo)在客戶端的x、y坐標(biāo)screenX，screenY相對(duì)于整個(gè)計(jì)算機(jī)屏幕的x、y坐標(biāo)offsetX，offsetY相對(duì)于事件發(fā)生對(duì)象的x、y坐標(biāo)x,y相對(duì)于引起事件元素的父元素的x、y坐標(biāo)returnValue是否取消事件的默認(rèn)動(dòng)作，false為取消cancelBubble是否停止事件冒泡，true為停止srcElement引起事件的元素對(duì)象keyCode表示按下按鍵的數(shù)字代號(hào)Button表示事件是否正在冒泡階段屬性eventobject.html按下鍵盤(pán)事件<script> functionwindow_onkeypress() { alert(window.event.keyCode); }</script><bodyonkeypress="window_onkeypress()"></body>按ESC關(guān)閉窗口<script> functionwindow_onkeypress() { //alert(window.event.keyCode); if(window.event.keyCode==27) { window.close(); } }</script><bodyonkeypress="window_onkeypress()"></body>其它屬性<scriptlanguage="JavaScript"> functioncheckCancel() { if(window.event.shiftKey) { window.event.cancelBubble=true; } } functionshowSrc() { if(window.event.srcElement.tagName.toLowerCase()=="img")//IMG要大寫(xiě)

{ alert(window.event.srcElement.src); } }</script><bodyonclick="showSrc()"><imgonclick="checkCancel()"src="logo.gif"></body>window對(duì)象－事件專用事件：－－onload事件－－onunload事件－－onbeforeunload事件通用事件－－onclick事件－－onmousemove事件－－onmouseover事件－－onmouseout事件－－onmousedown事件－－onmouseup事件－－onkeydown事件－－onkeyup事件－－onkeypress事件window_event.html<script> alert("ok2");</script><bodyonload="alert('歡迎')"onunload="alert('再見(jiàn)')"onbeforeunload="window.event.returnValue='請(qǐng)小心'">hello<script> alert("ok3");</script></body><script> alert("ok1");</script>window對(duì)象－屬性--closed屬性--opener屬性--defaultstatus屬性--status屬性--screenTop屬性--screenLeft屬性window.html關(guān)閉子窗口<script> varchild=window.open("information.html","_blank","top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no"); functioncloseChild() { if(!child.closed) { child.close(); } }</script><bodyonunload="closeChild()"></body>文本在狀態(tài)欄上顯示<script>// setInterval("scroll()",100); varspace_num=0; vardir=1; functionscroll() { varstr_space=""; space_num=space_num+1*dir; if(space_num>40||space_num<=0) { dir=-1*dir; } for(vari=0;i<space_num;i++) { str_space+=""; } window.status=str_space+””; } functionstart() { setInterval("scroll()",100); }</script><bodyonload='setInterval("scroll()",100);'></body>information.html<script> window.setTimeout("window.close()",5000); window.setInterval("grow()",100); functiongrow() { window.resizeBy(5,5); } functioncloseit() { window.close(); opener.start(); }//or// window.setTimeout("window.closeit()",5000);<script><bodyonunload="window.opener.start()">//////// <center><h3>通知</h3></center> 5秒鐘以后，這個(gè)窗口會(huì)自動(dòng)關(guān)閉！</body>window對(duì)象－BOM對(duì)象屬性－－location對(duì)象－－frames數(shù)組對(duì)象－－screen對(duì)象－－h(huán)istory對(duì)象－－navigator對(duì)象－－document對(duì)象document對(duì)象名稱說(shuō)明alinkColor設(shè)置或檢索文檔中所有活動(dòng)鏈接的顏色bgColor設(shè)置或檢索Document對(duì)象的背景色

body指定文檔正文的開(kāi)始和結(jié)束linkColor設(shè)置或檢索文檔鏈接的顏色location包含關(guān)于當(dāng)前

URL的信息

title包含文檔的標(biāo)題URL當(dāng)前載入頁(yè)面的URLreferrer后退一個(gè)位置的URLvlinkColor設(shè)置或檢索用戶訪問(wèn)過(guò)的鏈接的顏色屬性<scriptlanguage="javascript"> functionchangeDoc() { document.bgColor="blue"; document.fgColor="red"; document.alinkColor="yellow"; document.vlinkColor=0x00ff00; document.linkColor="gray"; }</script><bodyonload="changeDoc()">這是普通的文本<br><ahref="#">這是一個(gè)超鏈接</a></body>document對(duì)象<HTML><HEAD><TITLE>無(wú)標(biāo)題文檔</TITLE><SCRIPTlanguage="JavaScript">functionchange(color){document.bgColor=color;}</SCRIPT></HEAD><BODY><H2>移過(guò)來(lái)我變色給你看看！</H2><FONTsize=4><SPANonMouseOver="change('red')">變紅色</SPAN>|<SPANonMouseOver="change('blue')">變藍(lán)色</SPAN>|<SPANonMouseOver="change('yellow')">變黃色</SPAN></FONT></BODY>利用document對(duì)象的bgColor屬性改變背景色添加鼠標(biāo)懸停事件document對(duì)象的方法名稱

說(shuō)明

clear()清除當(dāng)前文檔

close()關(guān)閉open打開(kāi)的文檔，關(guān)閉輸出流并強(qiáng)制顯示發(fā)送的數(shù)據(jù)open()打開(kāi)已經(jīng)載入的文檔以便進(jìn)行編寫(xiě)write("text")將文本寫(xiě)入文檔writeln("text")將文本寫(xiě)入文檔，末尾加入”\n”方法

<html>

這是最初的內(nèi)容<br> <scriptlanguage="javascript"> document.write("這是write方法動(dòng)態(tài)寫(xiě)入的內(nèi)容<br>"); functionupdatedoc() { document.writeln("abc<br>"); document.writeln("def<br>"); document.close(); varowin=window.open("","_blank"); owin.document.writeln("xyz<br>"); owin.document.close(); owin.document.write("abc<br>"); owin.document.write("def<br>"); owin.document.close(); } </script> <inputtype=buttonname="update"value="更新"onclick="updatedoc()"> </html><html>這是最初的內(nèi)容<br><scriptlanguage="javascript"> document.write("這是write方法動(dòng)態(tài)寫(xiě)入的內(nèi)容<br>"); functionupdatedoc() { document.writeln("abc<br>"); document.writeln("def<br>"); document.writeln('<scriptlanguage="javascript">'); document.writeln(' functionupdatedoc()'); document.writeln(' {'); document.writeln(' document.writeln("abc<br>");'); document.writeln(' document.writeln("def<br>");'); document.writeln(' }');

document.writeln('</scr'+'ipt>'); document.writeln('<inputtype=buttonname="update"value="更新"onclick="updatedoc()">'); //document.close(); /*document.writeln("abc<br>"); document.writeln("def<br>"); document.close(); varowin=window.open("","_blank"); owin.document.writeln("xyz<br>"); owin.document.close(); owin.document.write("abc<br>"); owin.document.write("def<br>"); owin.document.close();*/ }</script><inputtype=buttonname="update"value="更新"onclick="updatedoc()"></html>document對(duì)象的集合名稱說(shuō)明anchors頁(yè)面中所有錨的集合（<aname=“an”></a>）forms頁(yè)面中所有表單的集合applets頁(yè)面中所有applet的集合embeds頁(yè)面中所有嵌入式對(duì)象的集合（<embed/>）images頁(yè)面中所有圖像的集合links頁(yè)面中所有鏈接的集合（<ahref=“#”></a>）屬性訪問(wèn)方式用document.links[0]訪問(wèn)鏈接用document.images[0]或document.images[“imgName”]訪問(wèn)圖像用document.forms[0]或document.forms[“frm”]訪問(wèn)表單用document.images[0].src訪問(wèn)圖像src屬性訪問(wèn)第一個(gè)圖像元素的方式;document.images[“sample”,0]document.images.item(“sample或0”)作為document屬性document.sample[0].srcdocument.img1.src作為window屬性window.sample[0].srcsample[0].srcwindow.img1.srcimg1.srclocation對(duì)象名稱說(shuō)明host服務(wù)器的名字href當(dāng)前載入的頁(yè)面的完整URLhash如果URL包含“?！保瑢⒎祷卦摲?hào)之后的內(nèi)容pathnameURL中主機(jī)名后面的部分port請(qǐng)求端口protocolURL中使用的協(xié)議（http://ftp://file://等）search執(zhí)行GET請(qǐng)求的URL中問(wèn)號(hào)？后的部分屬性location對(duì)象名稱說(shuō)明reload（）用于重新載入（刷新）當(dāng)前網(wǎng)頁(yè)assign("url")加載URL指定的新的HTML文檔。

replace("url")加載URL指定的文檔替換當(dāng)前文檔，不保留歷史記錄方法

screen對(duì)象名稱說(shuō)明availHeight窗口可以使用的屏幕的高度（象素）availWidth窗口可以使用的屏幕的寬度height屏幕的高度width屏幕的寬度屬性history對(duì)象名稱說(shuō)明back()相當(dāng)于后退按鈕forward()相當(dāng)于前進(jìn)按鈕go(inti)go(1)代表前進(jìn)1頁(yè)，等價(jià)于forward()方法go(-1)代表后退1頁(yè)，等價(jià)于back()方法；

方法navigator對(duì)象名稱說(shuō)明language瀏覽器語(yǔ)言appCodeName瀏覽器名的代碼表示”Mozilla”systemLanguage操作系統(tǒng)的語(yǔ)言platform運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)vendor品牌瀏覽器名的字符串表示user-agent獲取瀏覽器信息屬性DOM面對(duì)面文檔：DOM中的“D”沒(méi)有文檔，DOM就無(wú)從談起。當(dāng)創(chuàng)建一個(gè)網(wǎng)頁(yè)并把它加載到瀏覽器中，DOM就根據(jù)你編寫(xiě)的網(wǎng)頁(yè)創(chuàng)建了一個(gè)文檔對(duì)象。對(duì)象：DOM中的“O”我們把注意力放在瀏覽器對(duì)象上模型：DOM中的“M”當(dāng)網(wǎng)頁(yè)加載后，瀏覽器向我們提供了當(dāng)前網(wǎng)頁(yè)的模型，我們可以去提取這個(gè)模型。DOM把文檔表示成一顆樹(shù)。DOM藝術(shù)的精髓節(jié)點(diǎn)：文檔是由節(jié)點(diǎn)構(gòu)成的集合元素節(jié)點(diǎn)文本節(jié)點(diǎn)屬性節(jié)點(diǎn)DOM的屬性與方法nodeNamenodeValuenodeTypefirstChildlastChildchildNodespreviousSiblingnextSiblingattributeshasChildNodes()createElement()createTextNode()appendChild()removeChild()replaceChild()insertBefore()開(kāi)始DOM之旅getElementById()返回一個(gè)與那個(gè)給定id屬性相對(duì)應(yīng)的對(duì)象getElementsByTagName()返回一個(gè)跟標(biāo)簽名相對(duì)應(yīng)的對(duì)象數(shù)組getElementsByName()返回指定name的對(duì)象數(shù)組getAttribute()查詢對(duì)象的屬性值setAttribute()設(shè)置對(duì)象的屬性值練習(xí)檢索一份文檔，把所有的“title”屬性的值全部提取出來(lái)給一個(gè)<ul>設(shè)置一個(gè)“title”屬性，并檢索出來(lái)改變<p>的“title”屬性，并檢索出來(lái)設(shè)置完成后，查看源代碼，發(fā)現(xiàn)是否修改文檔內(nèi)容我的美術(shù)館完善美術(shù)館childNodes屬性從給定文檔的節(jié)點(diǎn)樹(shù)里把任何一個(gè)元素的所有子元素檢索出來(lái)，返回一個(gè)數(shù)組。nodeType屬性返回一個(gè)節(jié)點(diǎn)是什么類型的屬性值元素節(jié)點(diǎn)的nodeType屬性值是1。屬性節(jié)點(diǎn)的nodeType屬性值是2。文本節(jié)點(diǎn)的nodeType屬性值是3。nodeValue屬性用于檢索和設(shè)置節(jié)點(diǎn)的值firstChild和lastChild屬性返回第一個(gè)節(jié)點(diǎn)和最后一個(gè)節(jié)點(diǎn)，類似node.childNodes[0]和node.childNodes[node.childNodes.length-1]動(dòng)態(tài)創(chuàng)建HTML內(nèi)容createElement()創(chuàng)建一個(gè)元素節(jié)點(diǎn)appendChild()把新創(chuàng)建的節(jié)點(diǎn)插入某個(gè)文檔中createTextNode()創(chuàng)建一個(gè)文本節(jié)點(diǎn)練習(xí)創(chuàng)建一個(gè)HTML內(nèi)容<p>Thisis<em>my</em>content.</p>把上面這個(gè)內(nèi)容添加到一個(gè)<div>中顯示出來(lái)<divid=“testdiv”></div>修改美術(shù)館，把圖片描述改成動(dòng)態(tài)添加重回美術(shù)館insertBefore()把一個(gè)新元素插入到一個(gè)現(xiàn)有元素的前面parentElem.insertBefore(new,target)parentNode屬性返回目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)nextSibling屬性返回目標(biāo)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)練習(xí)給每張圖片添加一個(gè)描述<p>描述內(nèi)容提取自每個(gè)鏈接的“title”屬性HTML的動(dòng)畫(huà)效果elem.style.position=“absolute”;elem.style.left=“100px”;elem.styple.top=“100px”;setTimeout()clearTimeout()練習(xí)移動(dòng)的文字移動(dòng)的圖片通過(guò)鏈接瀏覽圖片1.插入一個(gè)層Layer1，

z-index=1；2.層中插入一幅圖片。3.定時(shí)器函數(shù)setTimeout（）的用法：setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)）表示每隔多少毫秒，就循環(huán)調(diào)用某個(gè)函數(shù)來(lái)執(zhí)行清除某個(gè)定時(shí)器：clearTimeout（）方法。例如：varmyclock＝setTimeout（”move()”,500）;if(…)clearTimeout（myclock）;；隨機(jī)移動(dòng)圖片<head><scriptlanguage=JavaScript>functionmove(){document.getElementById("Layer1").style.left=Math.random()*500;document.getElementById("Layer1").style.top=Math.random()*500;setTimeout("move()",1000);}</script></head><bodyonload="move()""><DIVid="Layer1"style="position:absolute;left:14px;top:44px;width:150px;height:102px;z-index:1"><Ahref=""><IMGsrc="piaofu.jpg"width="150"height="100"border="0"></A></DIV><H2>隨機(jī)漂浮的廣告</H2></BODY>隨機(jī)移動(dòng)圖片定義層圖片移動(dòng)的函數(shù)move()每隔1秒調(diào)用move()函數(shù)隨機(jī)改變層的位置，從而實(shí)現(xiàn)隨機(jī)漂浮的效果getElementById(“ID名稱”)

方法：根據(jù)ID名稱獲取HTML元素，這里表示獲取層對(duì)象Layer1。left和top表示層Layer1的左邊距和上邊距，設(shè)定為隨機(jī)的值。form對(duì)象form對(duì)象最主要的功能就是能夠直接訪問(wèn)HTML文檔中的form表單。一個(gè)web頁(yè)面可以有一個(gè)或多個(gè)from表單，使用document.froms數(shù)組對(duì)象可以訪問(wèn)到各from表單?？梢詫?lt;form>對(duì)象的屬性，來(lái)引用該表單字段元素所對(duì)應(yīng)的對(duì)象。表單基礎(chǔ)method：瀏覽器發(fā)送方式GET/POSTaction：表單所要提交到的URLenctype：向服務(wù)器發(fā)送數(shù)據(jù)時(shí)，數(shù)據(jù)使用的編碼方式accept：當(dāng)上傳文件時(shí)，列出服務(wù)器能正確處理的mime類型accept-charset：當(dāng)提交數(shù)據(jù)時(shí)，列出服務(wù)器接受的字符編碼<input/>“text”：?jiǎn)涡形谋尽皉adio”：?jiǎn)芜x按鈕“checkbox”：復(fù)選按鈕“file”：文件上傳文本框“password”：密碼輸入框“button”：產(chǎn)生自定義動(dòng)作的按鈕“submit”：提交按鈕，用于提交表單“reset”：重置按鈕，恢復(fù)表單默認(rèn)值“hidden”：隱藏表單域，不會(huì)顯示在窗口中“image”：圖像，與提交按鈕功能一樣其他<select/>：下拉列表<option/>：下拉列表選項(xiàng)<textarea/>：文本域rows和cols事件處理程序和表單元素簡(jiǎn)介<INPUTtype=“button”value=“注冊(cè)"onClick="button_click()">當(dāng)事件發(fā)生時(shí)，將執(zhí)行與之相關(guān)的JavaScript代碼當(dāng)發(fā)生特定事件時(shí)，事件處理程序指定要執(zhí)行哪些JavaScript代碼

事件處理程序和表單元素簡(jiǎn)介當(dāng)用戶單擊“注冊(cè)”按鈕時(shí)，將彈出一條消息。<SCRIPTLANGUAGE="JavaScript">functionbutton_click(){alert(“請(qǐng)向本網(wǎng)站注冊(cè));}</SCRIPT><INPUTtype=“button”value=“注冊(cè)“onClick="button_click()">文本框?qū)ο笪谋究蛟赜糜谠诒韱沃休斎胱帧⒃~或一系列數(shù)字可以通過(guò)將HTML的INPUT標(biāo)簽中的type設(shè)置為“text”，以創(chuàng)建文本框元素<INPUTtype="text"name="t1">文本框?qū)ο?/p>

–事件處理程序文本框事件onBlur文本框失去焦點(diǎn)onChange文本框的值被修改onFocus光標(biāo)進(jìn)入文本框中方法focus()獲得焦點(diǎn)，即獲得鼠標(biāo)光標(biāo)select()選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域?qū)傩詒eadonly只讀，文本框中的內(nèi)容不能修改文本框?qū)ο骳ardpricenumbertotmyform練習(xí)要求：當(dāng)光標(biāo)進(jìn)入帳號(hào)文本框，清空里面所有內(nèi)容當(dāng)光標(biāo)離開(kāi)帳號(hào)文本框，檢查輸入內(nèi)容是否為“10”開(kāi)頭，并且是數(shù)字，如果有誤，彈出提示框單價(jià)文本框預(yù)設(shè)價(jià)錢(qián)25.00，設(shè)為只讀當(dāng)修改數(shù)量文本框時(shí)，計(jì)算總價(jià)，并顯示在總價(jià)文本框中命令按鈕對(duì)象命令按鈕對(duì)象是網(wǎng)頁(yè)中最常用的元素之一<INPUTtype="submit"name="button1"value="提交"><INPUTtype="reset"name="button2"value="重置"><INPUTtype="button"name="button3"value="計(jì)算">“按鈕

-事件處理程序表單元素事件處理程序說(shuō)明命令按鈕onSubmit表單提交事件，單擊“提交”按鈕時(shí)產(chǎn)生，此事件屬于<FORM>元素，不屬于提交按鈕onClick按鈕單擊事件onSubmit事件處理代碼：<FORMonSubmit=”return調(diào)用函數(shù)名”>…</FORM>如果函數(shù)返回true，則向遠(yuǎn)程服務(wù)器提交表單；如果函數(shù)返回false，則取消提交。命令按鈕事件處理程序userNamepass1pass2type=resettype=submitmyform練習(xí)要求當(dāng)點(diǎn)擊注冊(cè)按鈕提交表單時(shí)，判斷密碼文本框內(nèi)容和確認(rèn)密碼文本框內(nèi)容是否相同。如果兩個(gè)密碼輸入不同，則彈出提示框，停止表單提交相同再進(jìn)行提交復(fù)選框?qū)ο螽?dāng)用戶需要在選項(xiàng)列表中選擇多項(xiàng)時(shí)，可以使用復(fù)選框?qū)ο笠獎(jiǎng)?chuàng)建復(fù)選框?qū)ο螅?qǐng)使用<INPUT>標(biāo)簽請(qǐng)選擇您的愛(ài)好<INPUTtype=“checkbox”value=“電影”>電影<INPUTtype=“checkbox”value=“電影”>電影復(fù)選框-事件處理程序復(fù)選框·事件onBlur復(fù)選框失去焦點(diǎn)onFocus復(fù)選框獲得焦點(diǎn)onClick復(fù)選框被選定或取消選定屬性checked復(fù)選框是否被選中，選中為true，未選中為false。您可以使用此屬性查看復(fù)選框的狀態(tài)或設(shè)置復(fù)選框是否被選中value設(shè)置或獲取復(fù)選框的值復(fù)選框-事件處理程序checkbox1checkbox2checkbox3設(shè)置復(fù)選框的值checkbox4myform練習(xí)要求當(dāng)點(diǎn)擊成交按鈕時(shí)，檢查每個(gè)復(fù)選框的選中情況，累計(jì)用戶選中的商品彈出確認(rèn)提示框，顯示客戶選中商品，詢問(wèn)客戶是否確認(rèn)購(gòu)買(mǎi)如果客戶點(diǎn)擊確認(rèn)，則在頁(yè)面上顯示詳細(xì)購(gòu)買(mǎi)信息單選按鈕對(duì)象當(dāng)用戶只需要從選項(xiàng)列表中選擇一個(gè)選項(xiàng)時(shí)，可以使用單選按鈕對(duì)象要?jiǎng)?chuàng)建單選按鈕對(duì)象，請(qǐng)使用<INPUT>標(biāo)簽<INPUTtype=“radio”value=“M”>男<INPUTtype=“radio”value=“F”>女單選按鈕-事件和屬性單選按鈕·事件onBlur單選按鈕失去焦點(diǎn)onFocus單選按鈕獲得焦點(diǎn)onClick單選按鈕被選定或取消選定屬性checked單選按鈕是否被選中，選中為true，未選中為false。您可以使用此屬性查看單選按鈕的狀態(tài)或設(shè)置單選按鈕是否被選中value設(shè)置或獲取單選按鈕的值單選按鈕-事件處理程序?yàn)榱吮ＷC單選，兩個(gè)單選按鈕的名稱都為myradio，組成了myradio數(shù)組練習(xí)要求根據(jù)用戶身份的不同顯示不同信息買(mǎi)家時(shí)，顯示是否購(gòu)買(mǎi)XXX商品賣(mài)家時(shí)，顯示是否出售XXX商品下拉列表框<SELECTname="myselect">

<OPTION>--請(qǐng)選擇開(kāi)戶帳號(hào)的城市--</OPTION><OPTIONvalue="北京市">北京市</OPTION><OPTIONvalue="上海市">上海市</OPTION><OPTIONvalue="重慶市">重慶市</OPTION><OPTIONvalue="天津市">天津市</OPTION><OPTIONvalue="四川省">四川省</OPTION><OPTIONvalue="山東省">山東省</OPTION><OPTIONvalue="湖北省">湖北省</OPTION></SELECT>下拉列表框-事件和屬性下拉列表框事件onBlur下拉列表框失去焦點(diǎn)onChange當(dāng)選項(xiàng)發(fā)生改變時(shí)產(chǎn)生onFocus下拉列表框獲得焦點(diǎn)屬性value下拉列表框中，被選選項(xiàng)的值options所有的選項(xiàng)組成一個(gè)數(shù)組，options表示整個(gè)選項(xiàng)數(shù)組，第一個(gè)選項(xiàng)即為options[0]，第二個(gè)即為options[1]，其他以此類推selectedIndex返回被選擇的選項(xiàng)的索引號(hào)，如果選中第一個(gè)返回0，第二個(gè)返回1，其他類推options選項(xiàng)數(shù)組options[0]options[1]selectedIndex屬性：表示被選中的索引號(hào)：3value屬性：被選中選項(xiàng)的值下拉列表框-事件處理程序下拉列表框-事件處理程序userNamemyselectmycitymyform練習(xí)要求判斷下拉列表框改變時(shí)，是否選擇

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論