版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
PART1DOM對象7.1DOM模型介紹HTML文檔樹狀結(jié)構(gòu)什么是DOMDOM對象模型
7.2window對象常用的屬性,方法,事件介紹常用屬性常用方法常用事件7.3Date對象和setTimeout()方法做時鐘顯示Date對象常用的方法setTimeout()方法
7.4history和location對象history對象location對象本章主要內(nèi)容
7.2.1HTML文檔的樹狀結(jié)構(gòu)
7.2DOM模型介紹
7.2.2什么是DOM
7.2DOM模型介紹
<html><head><script
type="text/JavaScript">functionchangeLink(){ document.getElementById('myAnchor').innerHTML="ETP"; document.getElementById('myAnchor').href="";}</script></head><body>
<a
id="myAnchor"
href="">etp實訓(xùn)基地</a>
<input
type="button"
onclick="changeLink()"
value="使用DOM改變鏈接"></body></html>使用getElementByID()方法訪問文檔元素設(shè)定元素的ID
7.2DOM模型介紹
7.2.3DOM對象模型7.3.1常用屬性
window對象常用屬性、方法、事件window對象常用屬性、方法、事件7.3.2常用方法showModalDialog返回值的問題利用returnValue
1、在WEB對話框中，設(shè)returnValue=“返回值”2、在主頁面中：
retvar=showModalDialog("test.htm");
//以下是檢測返回值情況
alert(retvar);
show.html
<script
language="javascript">
var
rv
=
showModalDialog("sm.html");
alert(
+
":"
+
rv.age);
</script>
sm.html
<script
language="javascript">
function
closeWin()
{
var
rt
=
new
Object();
=
"Mike";
rt.age
=
"29";
window.returnValue
=
rt;
window.close();
}
</script>
<input
type="button"
value="close"
onclick="closeWin()">showModalDialog返回值的問題7.3.3常用事件window對象常用的屬性、方法、事件<scriptlanguage="JavaScript">functionopenwindow(){
window.status="系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶......"; if(window.screen.width==1024&&window.screen.height==768){
window.open("register.html"); }else{
window.alert("請設(shè)置分辨率為1024x768，然后再打開"); }}functionclosewindow(){ if(window.confirm("您確認(rèn)要退出系統(tǒng)嗎？")){
window.close();}}</script>window對象常用的屬性、方法、事件<tableborder="0"align="center"bgcolor="#FFFFFF"><tr> <td><IMGsrc="head.bmp"width="761"height="389"></td></tr><tr> <td><IMGsrc="foot70.png"width="502"height="90"align="top"> <inputtype="button"name="regButton"value="用戶注冊"onclick="openwindow()"> <inputtype="button"name="exitButton"value="退出"onclick="closewindow()"></td></tr></table>
7.3.3常用事件window對象常用的屬性、方法、事件7.3.3常用事件window對象常用的屬性、方法、事件7.3.3常用事件window.open方法常用屬性7.3.3語法window對象常用的屬性、方法、事件7.3.2open
<scriptlanguage="JavaScript">functionopenwindow(){
window.status="系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶......";if(window.screen.width==1024&&window.screen.height==768){ open("register.html","注冊窗口","toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1"); }else{
window.alert("請設(shè)置分辨率為1024x768，然后再打開"); }}functionclosewindow(){if(window.confirm("您確認(rèn)要退出系統(tǒng)嗎？")){
window.close();}}</script><tableborder="0"align="center"bgcolor="#FFFFFF"> <tr> <td><IMGsrc="images/head.jpg"width="761"height="389"></td> </tr><tr> <td><IMGsrc="images/foot.jpg"width="502"height="90"align="top"> <inputtype="button"name="regButton"value="用戶注冊"onclick="openwindow()"> <inputtype="button"name="exitButton"value="退出"onclick="closewindow()"> </td> </tr></table>
window對象常用的屬性、方法、事件
window對象常用的屬性、方法、事件
<html><head><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><scriptlanguage="JavaScript">functionopenwindow(){頁面加載時調(diào)用openwindow()函數(shù)
open("adv.htm","廣告窗口","toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=700,height=250");}</script></head><bodyonload="openwindow()"> <H2> </H2></body></html>window對象常用的屬性、方法、事件Date對象和setTimeout()方法vartoday=newDate()
var
myDate=newDate("July29,2007,10:30:00")functiondisptime(){
varnow=newDate();
varhour=now.getHours();if(hour>=0&&hour<=12)
document.write("<H2>上午好!</H2>")if(hour>12&&hour<=18)
document.write("<H2>下午好!</H2>");if(hour>18&&hour<24)
document.write("<H2>晚上好!</H2>");
document.write("<H2>今天日期:"+now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日</H2>");
document.write("<H2>現(xiàn)在時間:"+now.getHours()+"點"+now.getMinutes()+"分</H2>");}Date對象和setTimeout()方法var
myTime＝setTimeout(“disptime()”,1000)
clearTimeout(myTime)//清除已設(shè)置的setTimeout對象
functiondisptime(){
vartime=newDate();//獲得當(dāng)前時間
varhour=time.getHours();//獲得小時、分鐘、秒
varminute=time.getMinutes();
varsecond=time.getSeconds();/*設(shè)置文本框的內(nèi)容為當(dāng)前時間*/
document.myform.myclock.value=hour+":"+minute+":"+second+"";/*設(shè)置定時器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime()執(zhí)行，刷新時鐘顯示*/
var
myTime=setTimeout("disptime()",1000);}
7.5history和location對象
7.5.1history對象history和location對象<tr> <tdwidth="4%"><Ahref="JavaScript:history.back()">返回</A></td> <tdwidth="4%"><Ahref="JavaScript:history.forward()">前進(jìn)</A></td> <tdwidth="4%"><Ahref="JavaScript:location.reload()">刷新</A></td> <tdwidth="6%"><Ahref="../index.html">首頁</A></td> <tdwidth="35%">跳轉(zhuǎn)到其他版塊
<SELECTname="selTopic"id="selPTopic"onChange="JavaScript:location=this.value"> <OPTIONvalue="news.html">新聞貼圖</OPTION> <OPTIONvalue="gard.html">網(wǎng)上談兵</OPTION> <OPTIONvalue="IT.html">IT茶館</OPTION> <OPTIONvalue="education.html"selected>教育大家談</OPTION> </SELECT></td></tr>總結(jié)DOM可以被看成是一顆擁有很多相互關(guān)聯(lián)的節(jié)點的樹，這些節(jié)點被稱為元素節(jié)點Window對象表示瀏覽器的窗口模型中的其它任何對象都繼承自window對象，這些對象的訪問需要通過window對象Date對象沒有任何屬性，但是有大量設(shè)置，獲取和操作日期的方法使用history和location對象的相關(guān)屬性和方法可以實現(xiàn)瀏覽器的”前進(jìn)”，”后退”和刷新”按鈕等功能PART2DOM對象關(guān)閉按鈕隨滾動條同步滾動的浮動窗口var
advInitTop=0;var
closeInitTop=0;functioninit(){
advInitTop=document.getElementById("advLayer").style.pixelTop;
closeInitTop=document.getElementById("closeLayer").style.pixelTop;}functionmove(){
document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;
document.getElementById("closeLayer").style.pixelTop=closeInitTop+document.body.scrollTop;}functioncloseMe(){
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none"; }window.onscroll=move;//窗口的滾動事件，當(dāng)頁面滾動時調(diào)用move()函數(shù)關(guān)閉按鈕隨滾動條同步滾動的浮動窗口<html><head><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>getElementById方法</title></head><bodyonload="inix()"> <DIVid="closeLayer"onClick="closeMe()"style="position:absolute; left:166px; top:132px; width:27px; height:19px;z-index:2;"><IMGsrc="clock.png"width="26"height="18"></DIV> <P> </P> <P><IMGsrc="1.bmp"width="993"height="1799"></P> <P> </P> <DIVid="advLayer"style="position:absolute; left:16px; top:129px; width:144px; height:95px; z-index:1;"><Ahref=""><IMGsrc="back.png"width="180"height="230"border="0"></A></DIV></body>
</html>
7.3
制作實現(xiàn)全選效果
<scriptlanguage="JavaScript">functioncheckAll(boolValue){
var
allCheckBoxs=document.getElementsByName("isBuy");for(vari=0;i<allCheckBoxs.length;i++){if(allCheckBoxs[i].type=="checkbox") {
allCheckBoxs[i].checked=boolValue;}}}</script>
常見錯誤
<scriptlanguage="JavaScript">functioncheckAll(boolValue){alert("OK");
var
allCheckBoxs=document.getElementsByName("isBuy");alert(allCheckBoxs[0].type);for(vari=0;i<allCheckBoxs.length;i++){if(allCheckBoxs[i].type="checkbox"){
allCheckBoxs[i].checked=boolValue;}}}</script>
Javascript表單交互
8.1簡介8.2為什么需要表單驗證8.3表單驗證的內(nèi)容8.4表單驗證思路字符串對象簡介電子郵件格式的驗證
8.5文本框控件文本框?qū)ο蠛喗殡娮余]件格式驗證的改進(jìn)8.6常見錯誤
8.7總結(jié)本章主要內(nèi)容8.2為什么需要表單驗證避免信息無法更新或出現(xiàn)新錯誤減輕服務(wù)器端的壓力
表單驗證的內(nèi)容
表單驗證通常包括的內(nèi)容包括：檢查表單元素是否為空（如會員注冊中的郵箱地址不能為空）驗證數(shù)字是否有效（如出生日期中的年月日必須為數(shù)字）驗證用戶輸入的地址郵件是否有效（如電子油價中必須有@和.字符）檢查用戶輸入的數(shù)據(jù)是否在某個范圍（如出生日期中的月份必須是1-12之間）驗證用戶輸入的信息長度是否足夠（如輸入的密碼必須大于等于6個字符）
表單驗證思路
字符串對象簡介
第一種：使用var語句，并根據(jù)需要為其賦值，例如：
第二種：創(chuàng)建String對象var
newstr="這是我的字符串"var
newstr=newString("這是我的字符串“)表單驗證思路字符串對象簡介表單驗證思路<html><head><title>
方法indexOf()方法的用法</title></head><body><scripttype="text/JavaScript">
var
str="Helloworld!"
document.write(str.indexOf("Hello")+"<br/>")
document.write(str.indexOf("World")+"<br/>")
document.write(str.indexOf("world"))</script></body></html>
表單驗證思路電子郵件格式的驗證functioncheckEmail(){
var
strEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert("電子郵件不能為空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert(“電子郵件格式不正確\n必須包含@符號！");returnfalse;}if(strEmail.indexOf(".",0)==-1){alert("電子郵件格式不正確\n必須包含.符號！");returnfalse;}returntrue;}<formname="myform"method="post"action="reg_success.htm"onSubmit="returncheckEmail()">………………..<inputname="registerButton"type="submit"id="registerButton"value="注冊"></form>
電子郵件格式的驗證
8.4表單驗證思路
7.3.3語法表單驗證思路functioncheckUserName(){//驗證用戶名
var
fname=document.myform.txtUser.value;if(fname.length!=0){for(i=0;i<fname.length;i++){
var
ftext=fname.subString(i,i+1);if(ftext<=9||ftext>=0){alert("名字中包含數(shù)字\n"+"請刪除名字中的數(shù)字和特殊字符");returnfalse}}}else{alert("請輸入“名字”文本框");
document.myform.txtUser.focus();returnfalse;}returntrue;}
表單驗證思路
<scriptlanguage="JavaScript">funct
溫馨提示
- 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 財稅績效制度
- 象山村民說事制度
- 論按日計罰制度
- 落實企業(yè)(職業(yè))年金制度
- 2026云南中國郵政儲蓄銀行股份有限公司普洱市分行招聘10人參考考試題庫附答案解析
- 桂林銀行考試試題及答案
- 2026廣東清遠(yuǎn)市陽山縣城市管理和綜合執(zhí)法局第一次招聘城市管理監(jiān)察協(xié)管員和政府購買服務(wù)人員3人參考考試題庫附答案解析
- 2026上海黃浦區(qū)中意工程創(chuàng)新學(xué)院教務(wù)崗位招聘1人參考考試題庫附答案解析
- 2026四川成都城建投資管理集團(tuán)有限責(zé)任公司所屬數(shù)智集團(tuán)招聘3人備考考試試題附答案解析
- 2026上半年黑龍江省體育局事業(yè)單位招聘13人備考考試試題附答案解析
- 如何做好一名護(hù)理帶教老師
- 房地產(chǎn)項目回款策略與現(xiàn)金流管理
- 非連續(xù)性文本閱讀（中考試題20篇）-2024年中考語文重難點復(fù)習(xí)攻略（解析版）
- 畜禽糞污資源化利用培訓(xùn)
- 《搶救藥物知識》課件
- 建筑工程咨詢服務(wù)合同（標(biāo)準(zhǔn)版）
- 2024年4月自考05424現(xiàn)代設(shè)計史試題
- 綜合能源管理系統(tǒng)平臺方案設(shè)計及實施合集
- 甲苯磺酸奧馬環(huán)素片-藥品臨床應(yīng)用解讀
- 共享單車對城市交通的影響研究
- 監(jiān)理大綱(暗標(biāo))
評論
0/150
提交評論