您好,登錄后才能下訂單哦!
BOM(瀏覽器對象模型),它可以對瀏覽器窗口進(jìn)行訪問和操作,使用BOM,我們可以移動窗口、改變狀態(tài)中的文本及執(zhí)行其他與頁面內(nèi)容不直接相關(guān)的動作。
簡而言之:BOM對象的功能就是使JavaScript有能力與瀏覽器’對話’,以便達(dá)到我們想要的效果。
一.Window對象
1.簡單說明
所有的瀏覽器都支持window對象;
從概念上來講,一個HTML文檔對應(yīng)一個window對象;
從功能上來說,它可以控制瀏覽器的窗口;
從使用上講,window對象不需要創(chuàng)建對象,直接使用即可。
2.window對象方法
2.1.alert():頁面彈框提醒
var s =window.alert("hi"); //返回結(jié)果為undefined,即無返回值
console.log('s='+s);
2.2.confirm():頁面彈框讓進(jìn)行選擇,返回值為布爾值(選擇'確認(rèn)",則返回true;選擇'取消'返回false)
var res= window.confirm("this is a person ?")
console.log('res='+res);
2.3.prompt():頁面彈框讓用戶進(jìn)行輸入,點(diǎn)擊'確定'后返回值為用戶輸入的字符串值,點(diǎn)擊'取消'后,返回值為null
var name = window.prompt("pelase input your name:");
console.log('name = '+name);
注意:window對應(yīng)為全局對象(全局變量、內(nèi)置對象),所以在使用過程中可以不帶'window.'而直接使用window的所有方法;例如:
var age = prompt("pelase input your age:");
console.log('age = '+age);
2.4.open(url)打開一個新的瀏覽器窗口或者查找一個一命名的窗口
var s = open("http://www.baidu.com");
console.log('s='+s);
2.5.close()關(guān)閉瀏覽器窗口
close();
2.6.setInterval(函數(shù)名(不能帶括號,不能帶參數(shù)),循環(huán)定時器,它是按照指定的周期(單位:毫秒)循環(huán)反復(fù)地來調(diào)用函數(shù)或者計(jì)算表達(dá)式,即:每隔多長時間執(zhí)行一次函數(shù),若沒有clearInterval來處理則永遠(yuǎn)不會停止,永久執(zhí)行。
例1(在網(wǎng)頁上每隔一秒顯示一次時間):
setInterval(show,1000)
function show(){
var time = new Date();
var showtime = time.toLocaleTimeString();
document.write("show time:"+showtime+"<br>");
}
例2(頁面上點(diǎn)擊輸入框立即顯示當(dāng)前時間,并每隔1秒中刷新一次時間;點(diǎn)擊’停止’按鈕則停止刷新頁面時間):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#showtime{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<script>
var lock;//定義全局變量(定時器名稱)方便后面的clearInterval()函數(shù)使用
function begin() {
'點(diǎn)擊輸入框就在頁面上顯示當(dāng)前時間并每秒鐘刷新一次--定時器功能'
if(lock==undefined){
showtime(); //一開始點(diǎn)擊就顯示時間(否則會等待1S后才開始顯示)
lock = setInterval(showtime,1000); //生成一個定時器對象
}
}
function showtime() {
'頁面上顯示當(dāng)前時間'
var time = new Date();
var nowtime = time.toLocaleString(); // 按字符串格式顯示時間
var ele = document.getElementById('showtime'); // 得到輸入框的元素
ele.value = nowtime; //將當(dāng)前時間賦值給輸入框,使其在頁面上顯示
}
function end() {
'點(diǎn)擊停止則停止刷新頁面時間
clearInterval(lock);
lock = undefined; //重新給定時器賦值,否則再次點(diǎn)擊輸入框則不再刷新頁面時間(因?yàn)?,在前面的begin函數(shù)中已經(jīng)給lock賦值了,此時lock不再是undefined了,所以此時必須要重新給lock賦值undefined)
}
</script>
<p><input type="text" id="showtime" onclick="begin()"></p>
<button onclick="end()">停止</button>
</body>
</html>
2.7.clearInterva(定時器名稱):取消由setInterval()設(shè)置的timeout
clearInterval(定時器名稱) 注:其中定時器名稱是由setInterval()生成的對象并賦值的,它是和setInetrva()結(jié)合使用的;例如:
var lock;//定義全局變量(定時器名稱)方便后面的clearInterval()函數(shù)使用
function begin() {
'點(diǎn)擊輸入框就在頁面上顯示當(dāng)前時間并每秒鐘刷新一次--定時器功能'
if(lock==undefined){
showtime(); //一開始點(diǎn)擊就顯示時間(否則會等待1S后才開始顯示)
lock = setInterval(showtime,1000); //生成一個定時器對象
}
}
clearInterval(lock);
2.8.setTimeout(函數(shù)名(不帶括號,不能帶參數(shù)),等待時間):在指定的毫秒時間后調(diào)用函數(shù)或計(jì)算表達(dá)式,即:按照設(shè)置的等待時間執(zhí)行一次函數(shù)。(注意:與setInterval的區(qū)別是:setInterval是循環(huán)永久的執(zhí)行函數(shù),而setTimeout是只執(zhí)行一次函數(shù))
setTimeout(函數(shù)名(不帶括號,不能帶參數(shù)),等待時間),例如:
<script>
var showfun = setTimeout(show,3000) //等待3秒后彈框
function show() {
alert("this is a window's alter");
}
</script>
2.9.clearTimeout(任務(wù)器名稱):取消由setTimeout()設(shè)置的timeout
clearTimeout(任務(wù)器名稱) 任務(wù)器是由setTimeout()函數(shù)生成的對象,它是與setTimeout()結(jié)合使用的。例如:
<script>
var showfun = setTimeout(show,3000) //等待3秒后彈框
function show() {
alert("this is a window's alter");
}
clearTimeout(showfun);
</script>
3.window對象的history子對象
history對象包含用戶在瀏覽器窗口中訪問過的URL;
history對象是window對象的一部分,可以通過window.history屬性對其進(jìn)行訪問。
history對象包含的屬性方法有:
3.1 back() 加載history列表的前一個URL頁面;
3.2 forward() 加載history列表中的該頁面之后的一個URL頁面;
3.3 go(1或-1) 加載history列表中的具體某一個頁面。
history.go(1) = history.forward()
history.go(-1) = history.back()
代碼實(shí)例:
js_history1.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js_history1</title>
</head>
<body>
<!--通過a標(biāo)簽超鏈接的方式連接到j(luò)s_history1.html頁面-->
<p><a href="js_history2.html">a:ToHistory2.html</a></p>
<p onclick="history.forward()"><u>forward:Tohistory1.html</u></p>
<p>這是html1頁面</p>
</body>
</html>
js_history2.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js_history2</title>
</head>
<body>
<!--通過ahistory.back()的方法連接到j(luò)s_history2.html頁面-->
<p onclick="history.back()"><u>Tohistory1.html</u></p>
<p onclick="history.go(-1)"><i>點(diǎn)擊它也可</i><u>Tohistory1.html</u></p>
<p>這是html2頁面</p>
</body>
</html>
4.window對象的location子對象
location對象包含有關(guān)當(dāng)前URL的信息;
location對象是window對象的一部分,可通過window。Location屬性來進(jìn)行訪問。
location對象的方法
1.location.assign(url) 鏈接到指定的url頁面;
2.location.reload() 刷新頁面
3.location.replace(newurl)
實(shí)例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location演示</title>
</head>
<body>
<script>
</script>
<p>location.reload()方法演示</p>
<!--通過 location.assign(url)連接到指定的URL頁面-->
<!--<p><button onclick="location.assign('http://www.baidu.com')">assign:連接到百度首頁</button></p>-->
<!--通過location.reload()方法重新加載該頁面-->
<P><button onclick="location.reload()">刷新</button></P>
<!--通過location.replace(newurl)方法連接到重新指定的url頁面-->
<button onclick="location.replace('http://www.baidu.com')">replace:連接到百度首頁</button>
</body>
</html>
注意:location.assign(url)和location.replace(newurl)
的區(qū)別:assign()方法可以進(jìn)行頁面前進(jìn)和后退操作而replace()方法不可以,replace()方法是重新打開一個全新的頁面。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。