網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對象模型-BOM的對象_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對象模型-BOM的對象_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對象模型-BOM的對象_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對象模型-BOM的對象_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對象模型-BOM的對象_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

BOM（BrowserObjectModel）是指瀏覽器對象模型，瀏覽器對象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對象結(jié)構(gòu)。

JavaScript對象模型BOM的對象目錄

JavaScript對象模型9.1BOM的對象9.2DOM的對象9.3DOM與CSS習(xí)題99.1BOM的對象9.1.1BOM概述瀏覽器對象關(guān)系的如圖所示。9.1BOM的對象9.1.2window對象1.window對象的屬性9.1BOM的對象2.window對象的方法9.1BOM的對象【例9-1】顯示窗口的寬、高和設(shè)置計(jì)時(shí)器，頁面初次加載時(shí)依次顯示3個(gè)的提示框，延時(shí)5000ms后再調(diào)用hello()函數(shù)，顯示其對話框，本例文件9-1.html在瀏覽器中顯示的效果，如圖所示。9.1BOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">functionhello(){window.alert("歡迎您！");}

window.setTimeout(hello,9000);//延時(shí)9000ms后再調(diào)用hello()函數(shù)

window.alert("窗口的寬="+window.innerWidth);//獲得窗口的寬度

window.alert("窗口的高="+window.innerHeight);//獲得窗口的高度

mpt("mpt()","默認(rèn)文本");//js中的提示輸入框

</script></head><body></body></html>9.1BOM的對象9.1.3document對象1.document對象的屬性9.1BOM的對象2.document對象的方法9.1BOM的對象【例9-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文檔中的元素。瀏覽者填寫表單中的選項(xiàng)后，單擊“統(tǒng)計(jì)結(jié)果”按鈕，彈出消息框顯示統(tǒng)計(jì)結(jié)果，本例文件9-2.html在瀏覽器中的顯示效果，如圖所示。9.1BOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>document對象</title><scripttype="text/javascript">functioncount(){varuserName=document.getElementById("userName");varhobby=document.getElementsByName("hobby");varinputs=document.getElementsByTagName("input");varresult="ID為userName的元素的值："+userName.value+"\nname為hobby的元素的個(gè)數(shù)："+hobby.length+"\n個(gè)人愛好：";for(vari=0;i<hobby.length;i++){if(hobby[i].checked){result+=hobby[i].value+"";}

}

9.1BOM的對象result+="\n標(biāo)簽為input的元素的個(gè)數(shù)："+inputs.length;alert(result);}</script></head><body><formname="myform">

用戶名：<inputtype="text"name="userName"id="userName"><br>

愛好：<inputtype="checkbox"name="hobby"value="音樂">音樂

<inputtype="checkbox"name="hobby"value="美食">美食

<inputtype="checkbox"name="hobby"value="旅游">旅游<br><inputtype="button"value="統(tǒng)計(jì)結(jié)果"onclick="count()"></form></body></html>

9.1BOM的對象9.1.4location對象1.location對象的屬性9.1BOM的對象2.location對象的方法9.1BOM的對象【例9-3】下面代碼通過location.href屬性獲得當(dāng)前頁面的URL鏈接，然后重定向并打開百度主頁。本例文件9-3.html在瀏覽器中顯示如圖9-4所示。<scripttype="text/javascript">window.onload=function(){alert(location.href);location.replace("");}</script>9.1BOM的對象9.1.5navigator對象9.1BOM的對象【例9-4】navigator.userAgent是最常用的屬性，用來完成瀏覽器判斷；然后返回客戶端瀏覽器的各種信息。本例文件9-4.html在瀏覽器中顯示如圖9-5所示。9.1BOM的對象<scripttype="text/javascript">if(window.navigator.userAgent.indexOf('MSIE')!=-1){alert('我是IE');}else{alert('我不是IE');}document.write(navigator.appName+"<br>");//返回運(yùn)行瀏覽器的名稱

document.write(navigator.appVersion+"<br>");//返回運(yùn)行瀏覽器的平臺和版本信息

document.write(navigator.cookieEnabled+"<br>");//返回瀏覽器中是否啟用cookie的布爾值

document.write(navigator.platform+"<br>");//返回運(yùn)行瀏覽器的操作系統(tǒng)平臺</script>9.1BOM的對象9.1.6screen對象9.1BOM的對象【例9-5】下面代碼顯示瀏覽器顯示屏幕的寬度和高度、顯示器屏幕的寬度和高度，本例文件9-5.html在瀏覽器中顯示如圖9-6所示，可以看到瀏覽器屏幕的高度與顯示器的高度相差一個(gè)Windows任務(wù)欄的高度。<scripttype="text/javascript">document.write(screen.availHeight+"<br>");//返回客戶端瀏覽器顯示屏幕的高度

document.write(screen.availWidth+"<br>");//返回瀏覽器顯示屏幕的寬度

document.write(screen.height+"<br>");//返回顯示器的高度

document.write(screen.width+"<br>");//返回顯示器的寬度</script>9.1BOM的對象9.1BOM的對象9.1.7history對象9.1BOM的對象例如，下面代碼在網(wǎng)頁中顯示網(wǎng)頁鏈接的數(shù)量，請輸入幾個(gè)網(wǎng)站后，返回到這個(gè)例子，鏈接數(shù)量將改變。document.write(h

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論