版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
PART1DOM對(duì)象7.1DOM模型介紹HTML文檔樹(shù)狀結(jié)構(gòu)什么是DOMDOM對(duì)象模型
7.2window對(duì)象常用的屬性,方法,事件介紹常用屬性常用方法常用事件7.3Date對(duì)象和setTimeout()方法做時(shí)鐘顯示Date對(duì)象常用的方法setTimeout()方法
7.4history和location對(duì)象history對(duì)象location對(duì)象本章主要內(nèi)容
7.2.1HTML文檔的樹(shù)狀結(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實(shí)訓(xùn)基地</a>
<input
type="button"
onclick="changeLink()"
value="使用DOM改變鏈接"></body></html>使用getElementByID()方法訪問(wèn)文檔元素設(shè)定元素的ID
7.2DOM模型介紹
7.2.3DOM對(duì)象模型7.3.1常用屬性
window對(duì)象常用屬性、方法、事件window對(duì)象常用屬性、方法、事件7.3.2常用方法showModalDialog返回值的問(wèn)題利用returnValue
1、在WEB對(duì)話框中，設(shè)returnValue=“返回值”2、在主頁(yè)面中：
retvar=showModalDialog("test.htm");
//以下是檢測(cè)返回值情況
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返回值的問(wèn)題7.3.3常用事件window對(duì)象常用的屬性、方法、事件<scriptlanguage="JavaScript">functionopenwindow(){
window.status="系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶......"; if(window.screen.width==1024&&window.screen.height==768){
window.open("register.html"); }else{
window.alert("請(qǐng)?jiān)O(shè)置分辨率為1024x768，然后再打開(kāi)"); }}functionclosewindow(){ if(window.confirm("您確認(rèn)要退出系統(tǒng)嗎？")){
window.close();}}</script>window對(duì)象常用的屬性、方法、事件<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="用戶注冊(cè)"onclick="openwindow()"> <inputtype="button"name="exitButton"value="退出"onclick="closewindow()"></td></tr></table>
7.3.3常用事件window對(duì)象常用的屬性、方法、事件7.3.3常用事件window對(duì)象常用的屬性、方法、事件7.3.3常用事件window.open方法常用屬性7.3.3語(yǔ)法window對(duì)象常用的屬性、方法、事件7.3.2open
<scriptlanguage="JavaScript">functionopenwindow(){
window.status="系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶......";if(window.screen.width==1024&&window.screen.height==768){ open("register.html","注冊(cè)窗口","toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1"); }else{
window.alert("請(qǐng)?jiān)O(shè)置分辨率為1024x768，然后再打開(kāi)"); }}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="用戶注冊(cè)"onclick="openwindow()"> <inputtype="button"name="exitButton"value="退出"onclick="closewindow()"> </td> </tr></table>
window對(duì)象常用的屬性、方法、事件
window對(duì)象常用的屬性、方法、事件
<html><head><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><scriptlanguage="JavaScript">functionopenwindow(){頁(yè)面加載時(shí)調(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對(duì)象常用的屬性、方法、事件Date對(duì)象和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)在時(shí)間:"+now.getHours()+"點(diǎn)"+now.getMinutes()+"分</H2>");}Date對(duì)象和setTimeout()方法var
myTime＝setTimeout(“disptime()”,1000)
clearTimeout(myTime)//清除已設(shè)置的setTimeout對(duì)象
functiondisptime(){
vartime=newDate();//獲得當(dāng)前時(shí)間
varhour=time.getHours();//獲得小時(shí)、分鐘、秒
varminute=time.getMinutes();
varsecond=time.getSeconds();/*設(shè)置文本框的內(nèi)容為當(dāng)前時(shí)間*/
document.myform.myclock.value=hour+":"+minute+":"+second+"";/*設(shè)置定時(shí)器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime()執(zhí)行，刷新時(shí)鐘顯示*/
var
myTime=setTimeout("disptime()",1000);}
7.5history和location對(duì)象
7.5.1history對(duì)象history和location對(duì)象<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">首頁(yè)</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é)點(diǎn)的樹(shù)，這些節(jié)點(diǎn)被稱為元素節(jié)點(diǎn)Window對(duì)象表示瀏覽器的窗口模型中的其它任何對(duì)象都繼承自window對(duì)象，這些對(duì)象的訪問(wèn)需要通過(guò)window對(duì)象Date對(duì)象沒(méi)有任何屬性，但是有大量設(shè)置，獲取和操作日期的方法使用history和location對(duì)象的相關(guān)屬性和方法可以實(shí)現(xiàn)瀏覽器的”前進(jìn)”，”后退”和刷新”按鈕等功能PART2DOM對(duì)象關(guān)閉按鈕隨滾動(dòng)條同步滾動(dòng)的浮動(dòng)窗口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)事件，當(dāng)頁(yè)面滾動(dòng)時(shí)調(diào)用move()函數(shù)關(guān)閉按鈕隨滾動(dòng)條同步滾動(dòng)的浮動(dòng)窗口<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
制作實(shí)現(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>
常見(jiàn)錯(cuò)誤
<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簡(jiǎn)介8.2為什么需要表單驗(yàn)證8.3表單驗(yàn)證的內(nèi)容8.4表單驗(yàn)證思路字符串對(duì)象簡(jiǎn)介電子郵件格式的驗(yàn)證
8.5文本框控件文本框?qū)ο蠛?jiǎn)介電子郵件格式驗(yàn)證的改進(jìn)8.6常見(jiàn)錯(cuò)誤
8.7總結(jié)本章主要內(nèi)容8.2為什么需要表單驗(yàn)證避免信息無(wú)法更新或出現(xiàn)新錯(cuò)誤減輕服務(wù)器端的壓力
表單驗(yàn)證的內(nèi)容
表單驗(yàn)證通常包括的內(nèi)容包括：檢查表單元素是否為空（如會(huì)員注冊(cè)中的郵箱地址不能為空）驗(yàn)證數(shù)字是否有效（如出生日期中的年月日必須為數(shù)字）驗(yàn)證用戶輸入的地址郵件是否有效（如電子油價(jià)中必須有@和.字符）檢查用戶輸入的數(shù)據(jù)是否在某個(gè)范圍（如出生日期中的月份必須是1-12之間）驗(yàn)證用戶輸入的信息長(zhǎng)度是否足夠（如輸入的密碼必須大于等于6個(gè)字符）
表單驗(yàn)證思路
字符串對(duì)象簡(jiǎn)介
第一種：使用var語(yǔ)句，并根據(jù)需要為其賦值，例如：
第二種：創(chuàng)建String對(duì)象var
newstr="這是我的字符串"var
newstr=newString("這是我的字符串“)表單驗(yàn)證思路字符串對(duì)象簡(jiǎn)介表單驗(yàn)證思路<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>
表單驗(yàn)證思路電子郵件格式的驗(yàn)證functioncheckEmail(){
var
strEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert("電子郵件不能為空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert(“電子郵件格式不正確\n必須包含@符號(hào)！");returnfalse;}if(strEmail.indexOf(".",0)==-1){alert("電子郵件格式不正確\n必須包含.符號(hào)！");returnfalse;}returntrue;}<formname="myform"method="post"action="reg_success.htm"onSubmit="returncheckEmail()">………………..<inputname="registerButton"type="submit"id="registerButton"value="注冊(cè)"></form>
電子郵件格式的驗(yàn)證
8.4表單驗(yàn)證思路
7.3.3語(yǔ)法表單驗(yàn)證思路functioncheckUserName(){//驗(yàn)證用戶名
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"+"請(qǐng)刪除名字中的數(shù)字和特殊字符");returnfalse}}}else{alert("請(qǐng)輸入“名字”文本框");
document.myform.txtUser.focus();returnfalse;}returntrue;}
表單驗(yàn)證思路
<scriptlanguage="JavaScript">funct
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年度風(fēng)力發(fā)電項(xiàng)目風(fēng)機(jī)設(shè)備采購(gòu)與投資分析合同
- 2025年度智能制造對(duì)賭協(xié)議約定倍收益合作協(xié)議
- 二零二五年度林地使用權(quán)變更及補(bǔ)償合同
- 2025年度藥店藥店藥品知識(shí)產(chǎn)權(quán)保護(hù)聘用勞動(dòng)合同
- 股權(quán)代持協(xié)議書(shū)標(biāo)準(zhǔn)模板：2025年度股權(quán)激勵(lì)適用
- 2025年度森林土地承包與林木撫育合作協(xié)議
- 二零二五年度企業(yè)內(nèi)部員工外出安全免責(zé)合同
- 二零二五年度汽車零部件貨物運(yùn)輸保險(xiǎn)協(xié)議
- 二零二五年度歷史文化街區(qū)拆除搬遷保護(hù)協(xié)議
- 2025年度服裝廠職工勞動(dòng)合同模板書(shū)（智能化工廠）
- 2024解析：第九章液體壓強(qiáng)-基礎(chǔ)練（解析版）
- 2024解析：第十章 浮力、阿基米德原理及其應(yīng)用-講核心（解析版）
- 隱睪手術(shù)配合
- 華東師范大學(xué)《社會(huì)學(xué)概論》2023-2024學(xué)年第一學(xué)期期末試卷
- 建筑工程財(cái)務(wù)流程制度（6篇）
- 閥門(mén)培訓(xùn)課件
- 2024年四川省公務(wù)員錄用考試《行測(cè)》真題及答案解析
- 2024全新醫(yī)務(wù)人員手衛(wèi)生課件
- 高考英語(yǔ)一輪復(fù)習(xí)知識(shí)清單（全國(guó)版）專題01++定語(yǔ)從句十大考點(diǎn)歸納（清單）+含答案及解析
- 培訓(xùn)機(jī)構(gòu)收費(fèi)退費(fèi)管理規(guī)定
- 愛(ài)學(xué)習(xí)平臺(tái)登錄入口
評(píng)論
0/150
提交評(píng)論