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

下載本文檔

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

文檔簡介

JavaScript高級JavaScript高級BOM事件處理

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

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

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

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

clearTimeout(定時器對象)

方法

Window對象

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

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

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

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

screen包含有關(guān)客戶端的屏幕和顯示性能的信息。對象屬性JavaScript事件處理程序JavaScript事件處理程序就是一組語句，在事件（如點(diǎn)擊鼠標(biāo)或移動鼠標(biāo)等）發(fā)生時執(zhí)行事件處理事件事件處理程序的基本語法是：事件名="JavaScript代碼或調(diào)用函數(shù)"例如：<INPUTtype=”BUTTON”…onClick=“alert(“單擊我！”);”><INPUTtype=”BUTTON”…onMouseDown=“check()”>表示鼠標(biāo)按下時，將調(diào)用執(zhí)行函數(shù)check()。JavaScript事件事件名說明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)移出，即離開圖片等所在的區(qū)域onMouseMove鼠標(biāo)移動，表示在<DIV>層等上方移動onLoad網(wǎng)頁文檔加載事件onSubmit表單提交事件onMouseDown鼠標(biāo)按下onMouseUp鼠標(biāo)彈起如何編寫事件處理程序一、在事件源對象所對應(yīng)的HTML標(biāo)簽上增加一個要處理事件屬性，讓事件屬性值等于處理事件的函數(shù)名或程序代碼。格式：

<tagon事件=“<語句組>|<函數(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è)置元素對象的事件屬性，讓事件屬性值等于處理該事件的函數(shù)名或程序代碼。格式：

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

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

<script>

document.onload=function(){

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

alert(str);

}

</script>三、在一個專門的<script>標(biāo)簽對中編寫某個元素對象的某種事件處理程序代碼，并用for屬性指定事件源和用event屬性指定事件名，這種<script>標(biāo)簽中的腳本程序只在指定事件源的指定事件發(fā)生時才被調(diào)用執(zhí)行，這種方式常用于網(wǎng)頁文檔中的各種插件對象的事件處理程序：<scriptlanguage=“javascript”for=“document”event=“oncontextmenu”> window.event.returnValue=false;</script>event對象名稱說明altKey是否按下alt鍵，true為按下ctrlKey是否按下ctrl鍵shiftKey是否按下shift鍵clientX，clientY事件發(fā)生時，鼠標(biāo)在客戶端的x、y坐標(biāo)screenX，screenY相對于整個計(jì)算機(jī)屏幕的x、y坐標(biāo)offsetX，offsetY相對于事件發(fā)生對象的x、y坐標(biāo)x,y相對于引起事件元素的父元素的x、y坐標(biāo)returnValue是否取消事件的默認(rèn)動作，false為取消cancelBubble是否停止事件冒泡，true為停止srcElement引起事件的元素對象keyCode表示按下按鍵的數(shù)字代號Button表示事件是否正在冒泡階段屬性eventobject.html按下鍵盤事件<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要大寫

{ alert(window.event.srcElement.src); } }</script><bodyonclick="showSrc()"><imgonclick="checkCancel()"src="logo.gif"></body>window對象－事件專用事件：－－onload事件－－onunload事件－－onbeforeunload事件通用事件－－onclick事件－－onmousemove事件－－onmouseover事件－－onmouseout事件－－onmousedown事件－－onmouseup事件－－onkeydown事件－－onkeyup事件－－onkeypress事件window_event.html<script> alert("ok2");</script><bodyonload="alert('歡迎')"onunload="alert('再見')"onbeforeunload="window.event.returnValue='請小心'">hello<script> alert("ok3");</script></body><script> alert("ok1");</script>window對象－屬性--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秒鐘以后，這個窗口會自動關(guān)閉！</body>window對象－BOM對象屬性－－location對象－－frames數(shù)組對象－－screen對象－－h(huán)istory對象－－navigator對象－－document對象document對象名稱說明alinkColor設(shè)置或檢索文檔中所有活動鏈接的顏色bgColor設(shè)置或檢索Document對象的背景色

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

URL的信息

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

說明

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

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

<html>

這是最初的內(nèi)容<br> <scriptlanguage="javascript"> document.write("這是write方法動態(tài)寫入的內(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方法動態(tài)寫入的內(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對象的集合名稱說明anchors頁面中所有錨的集合（<aname=“an”></a>）forms頁面中所有表單的集合applets頁面中所有applet的集合embeds頁面中所有嵌入式對象的集合（<embed/>）images頁面中所有圖像的集合links頁面中所有鏈接的集合（<ahref=“#”></a>）屬性訪問方式用document.links[0]訪問鏈接用document.images[0]或document.images[“imgName”]訪問圖像用document.forms[0]或document.forms[“frm”]訪問表單用document.images[0].src訪問圖像src屬性訪問第一個圖像元素的方式;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對象名稱說明host服務(wù)器的名字href當(dāng)前載入的頁面的完整URLhash如果URL包含“?！?，將返回該符號之后的內(nèi)容pathnameURL中主機(jī)名后面的部分port請求端口protocolURL中使用的協(xié)議（http://ftp://file://等）search執(zhí)行GET請求的URL中問號？后的部分屬性location對象名稱說明reload（）用于重新載入（刷新）當(dāng)前網(wǎng)頁assign("url")加載URL指定的新的HTML文檔。

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

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

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

z-index=1；2.層中插入一幅圖片。3.定時器函數(shù)setTimeout（）的用法：setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)）表示每隔多少毫秒，就循環(huán)調(diào)用某個函數(shù)來執(zhí)行清除某個定時器：clearTimeout（）方法。例如：varmyclock＝setTimeout（”move()”,500）;if(…)clearTimeout（myclock）;；隨機(jī)移動圖片<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ī)移動圖片定義層圖片移動的函數(shù)move()每隔1秒調(diào)用move()函數(shù)隨機(jī)改變層的位置，從而實(shí)現(xiàn)隨機(jī)漂浮的效果getElementById(“ID名稱”)

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

事件處理程序和表單元素簡介當(dāng)用戶單擊“注冊”按鈕時，將彈出一條消息。<SCRIPTLANGUAGE="JavaScript">functionbutton_click(){alert(“請向本網(wǎng)站注冊);}</SCRIPT><INPUTtype=“button”value=“注冊“onClick="button_click()">文本框?qū)ο笪谋究蛟赜糜谠诒韱沃休斎胱帧⒃~或一系列數(shù)字可以通過將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)入帳號文本框，清空里面所有內(nèi)容當(dāng)光標(biāo)離開帳號文本框，檢查輸入內(nèi)容是否為“10”開頭，并且是數(shù)字，如果有誤，彈出提示框單價文本框預(yù)設(shè)價錢25.00，設(shè)為只讀當(dāng)修改數(shù)量文本框時，計(jì)算總價，并顯示在總價文本框中命令按鈕對象命令按鈕對象是網(wǎng)頁中最常用的元素之一<INPUTtype="submit"name="button1"value="提交"><INPUTtype="reset"name="button2"value="重置"><INPUTtype="button"name="button3"value="計(jì)算">“按鈕

-事件處理程序表單元素事件處理程序說明命令按鈕onSubmit表單提交事件，單擊“提交”按鈕時產(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)擊注冊按鈕提交表單時，判斷密碼文本框內(nèi)容和確認(rèn)密碼文本框內(nèi)容是否相同。如果兩個密碼輸入不同，則彈出提示框，停止表單提交相同再進(jìn)行提交復(fù)選框?qū)ο螽?dāng)用戶需要在選項(xiàng)列表中選擇多項(xiàng)時，可以使用復(fù)選框?qū)ο笠獎?chuàng)建復(fù)選框?qū)ο螅埵褂?lt;INPUT>標(biāo)簽請選擇您的愛好<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)擊成交按鈕時，檢查每個復(fù)選框的選中情況，累計(jì)用戶選中的商品彈出確認(rèn)提示框，顯示客戶選中商品，詢問客戶是否確認(rèn)購買如果客戶點(diǎn)擊確認(rèn)，則在頁面上顯示詳細(xì)購買信息單選按鈕對象當(dāng)用戶只需要從選項(xiàng)列表中選擇一個選項(xiàng)時，可以使用單選按鈕對象要創(chuà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單選，兩個單選按鈕的名稱都為myradio，組成了myradio數(shù)組練習(xí)要求根據(jù)用戶身份的不同顯示不同信息買家時，顯示是否購買XXX商品賣家時，顯示是否出售XXX商品下拉列表框<SELECTname="myselect">

<OPTION>--請選擇開戶帳號的城市--</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ā)生改變時產(chǎn)生onFocus下拉列表框獲得焦點(diǎn)屬性value下拉列表框中，被選選項(xiàng)的值options所有的選項(xiàng)組成一個數(shù)組，options表示整個選項(xiàng)數(shù)組，第一個選項(xiàng)即為options[0]，第二個即為options[1]，其他以此類推selectedIndex返回被選擇的選項(xiàng)的索引號，如果選中第一個返回0，第二個返回1，其他類推options選項(xiàng)數(shù)組options[0]options[1]selectedIndex屬性：表示被選中的索引號：3value屬性：被選中選項(xiàng)的值下拉列表框-事件處理程序下拉列表框-事件處理程序userNamemyselectmycitymyform練習(xí)要求判斷下拉列表框改變時，是否選擇

溫馨提示

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

評論

0/150

提交評論