JavaScript(4)---BOM詳解
之前寫過一篇有關DOM的博客：JavaScript(2)---DOM詳解
DOM有個頂級對象叫：document。同樣BOM中也有頂級對象叫 window。
它們的區別在於： DOM是一套操作HTML標簽的API。 BOM是一套操作瀏覽器的API。
一、概念
1、什么是BOM
概念 BOM(瀏覽器對象模型) 提供了獨立於內容而與瀏覽器窗口進行交互的對象。描述了與瀏覽器進行交互的方法和接口，可以對瀏覽器窗口進行訪問和操作。
從這幅圖可以看出,document也是window的子對象。因為頁面中的所有內容也是屬於瀏覽器的一部分，所以document也是屬於window。
2、常見的BOM對象
1、window: # 代表整個瀏覽器窗口（window是BOM中的一個對象，並且是頂級的對象）
2、Navigator: # 代表瀏覽器當前的信息，通過Navigator我們可以獲取用戶當前使用的是什么瀏覽器
3、Location: # 代表瀏覽器當前的地址信息，通過Location我們可以獲取或者設置當前的地址信息
4、History: # 代表瀏覽器的歷史信息，通過History我們可以實現上一步/刷新/下一步操作
5、Screen: # 代表用戶的屏幕信息
二、window對象
概念 window對象表示的是瀏覽器中打開的窗口，相當於是瀏覽器中的最頂層對象。
1、window常用方法
1、open(): # 在一個窗口中打開頁面
2、setInterval(): # 設置定時器（執行n次）
3、clearInterval(): # 清除定時器
4、setTimeout(): # 設置定時器(只執行1次)
5、clearTimeout(): # 清除定時器
6、alert(): # 提示框
7、confirm(): # 確認提示框
8、propmt(): # 輸入提示框
9、console(): # 瀏覽器控制台打印
10、onload(): # 頁面加載完才觸發的事件
注意：因為window對象使用非常頻繁，所以當調用js中的window對象的方法時，可以省略對象名(window)不寫。
2、示例
代碼
<style type="text/css">
input{
display:block;
width: 120px;
height: 25px;
background-color: #cddc39;
margin-left: 250px;
margin-top:10px;
}
</style>
<script type="text/javascript">
function testAlert(){
window.alert("彈出alert");
}
/*
* 參數1:dialog中顯示的內容
* 參數2,3:可點擊的按鈕(默認沒有就是"ok","cancle")
* 返回值: ok->true cancle->false
*/
function testConfirm(){
var flag;
flag = window.confirm("請選擇是否?","是","否");
if (flag)
window.alert("你點擊的是-'確定'");
else
window.alert("你點擊的是-'取消'");
}
/*
* 參數1：可以是一個資源地址（圖片，本地地址...）
* 參數2：target of links
* 參數3：窗口特點......
*/
function testOpen (){
window.open("http://www.baidu.com","_blank","height=400px,width=400px,left=10px");
}
/*
* 參數1：提示語
* 返回值：在輸入框中輸入的內容
*/
function testPrompt (){
var str;
str = window.prompt("請輸入您手機號碼：");
window.alert("您剛才輸入了："+str);
}
/*
* 參數1：定時器要執行的方法（每隔一定時間執行）
* 參數2：定時器時間
*/
var intervalID;
function testInterval (){
intervalID = window.setInterval("testAlert()",2000);
}
/*
* 清除定時器
*/
function removeInterval (){
window.clearInterval(intervalID);
console.log("定時任務ID=" + intervalID);
}
/*
參數1：定時器要執行的方法（只執行一次）
參數2：定時器時
*/
var timeoutID;
function testTimeout (){
timeoutID = window.setTimeout("testAlert()",2000);
}
/*
* 清除定時器
*/
function removeTimeout (){
window.clearTimeout(timeoutID);
console.log("定時任務ID="+ timeoutID);
}
</script>
</head>
<body>
<input type="button" value="測試alert" onclick="testAlert()" />
<input type="button" value="測試open" onclick="testOpen()" />
<input type="button" value="測試Confirm" onclick="testConfirm()" />
<input type="button" value="測試testPrompt" onclick="testPrompt()" />
<input type="button" value="測試Interval" onclick="testInterval()" />
<input type="button" value="測試清除Interval" onclick="removeInterval()" />
<input type="button" value="測試Timeout" onclick="testTimeout()" />
<input type="button" value="測試清除Timeout" onclick="removeTimeout()" />
</body>
運行結果
三、location對象
概念 location對象提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航的功能，它既是window對象的屬性，也是document對象的屬性。
1、location常用屬性
屬性
1、location.href # 返回當前加載頁面的完整URL
2、location.hash # 返回URL中的hash（#號后跟零或多個字符），如果不包含則返回空字符串。
3、location.host # 返回服務器名稱和端口號（如果有）
4、location.hostname # 返回不帶端口號的服務器名稱。
5、location.pathname # 返回URL中的目錄和（或）文件名。
6、location.port # 返回URL中指定的端口號，如果沒有，返回空字符串。
7、location.protocol # 返回頁面使用的協議。
8、location.search # 返回URL的查詢字符串。這個字符串以問號開頭。
位置操作
1、location.href = '網址' # 當前頁面跳轉到新的網址 <a href="網址"></a>
2、location.replace('網址') # 跳轉但不會在歷史記錄中生成新紀錄
3、location.reload() # 刷新當前頁面
4、window.open('網址') # 會新建一個窗口打開頁面<a href="網址" target='_blank'></a>
四、history對象
概念 history對象保存着用戶上網的歷史記錄，在窗口打開的那一刻算起。因為history是window對象所以每個瀏覽器窗口都有自己的history對象與特定的window對象關聯。
1、常用方法
1、history.back() # 后退一頁
2、history.forward() # 前進一頁
3、history.go(n) # 前進n頁
4、history.go(-2) # 后退n頁
5、history.go(0) # 相當於刷新
2、示例
為了實現 返回上一頁和 返回下一頁功能，這里需要兩個簡單頁面
首頁
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
input{
width: 120px;
height: 25px;
background-color: #cddc39;
margin-top:10px;
}
</style>
<body>
<input type="button" value="跳轉頁面" id="btn1"/>
<input type="button" value="前進" id="btn2"/>
<script src="common.js"></script>
<script>
//跳轉的
document.getElementById("btn1").onclick = function () {
window.location.href = "test.html";
};
//前進 前進一步就會又到跳轉的頁面
document.getElementById("btn2").onclick = function () {
window.history.forward();
};
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
input{
width: 120px;
height: 25px;
background-color: #cddc39;
}
</style>
<body>
<input type="button" value="后退" id="btn"/>
<script src="common.js"></script>
<script>
//后退 后退一步就是到上一個頁面
document.getElementById("btn").onclick = function () {
window.history.back();
};
</script>
</body>
</html>
運行結果
五、綜合示例
1、一起搖起來
實現原理 ：設置定時器 + 取消定時器 + 設置隨機邊距 實現
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
img { width: 150px; height: 150px; }
div { margin-top: 15px; position: absolute; }
input { width: 120px; height: 25px; background-color: #cddc39; }
</style>
</head>
<body>
<input type="button" value="搖起來" id="btn1"/>
<input type="button" value="停止" id="btn2"/> <br>
<div id="dv">
<img src="11.jpg" alt=""/>
<img src="12.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
//定時器ID 用於解除定時
var timeId="";
my$("btn1").onclick = function () {
clearInterval(timeId); //先清一次,因為不先清，如果用戶多次點擊“搖起來” 那么Id已經被覆蓋 之前的定時任務不可能停止
timeId= setInterval(function () {
var x = parseInt(Math.random() * 100 + 1); //隨機數
var y = parseInt(Math.random() * 100 + 1);
my$("dv").style.left = x + "px"; //設置元素的left和top屬性值
my$("dv").style.top = y + "px";
}, 50); //定時時間50毫秒
};
my$("btn2").onclick=function () { //清除定時任務
clearInterval(timeId);
};
/**
* 獲取指定標簽對象
*/
function my$(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
2、用戶協議
使用場景 我們在閱讀一些協議的時候，往往不能直接點同意，而是幾秒后才能點同意。
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
請仔細閱讀協議,請仔細閱讀協議,請仔細閱讀協議,請仔細閱讀協議.
</textarea>
<input type="button" value="請仔細閱讀協議(5)" id="btn" disabled="disabled" />
<script>
var time=5; //5秒倒計時
var timeId= setInterval(function () {
time--;
my$("btn").value="請仔細閱讀協議("+time+")";
if(time <= 0){
//停止定時器就可以
clearInterval(timeId);
//按鈕可以被點擊了
my$("btn").disabled=false;
my$("btn").value="同意";
}
},1000);
/**
* 獲取指定標簽對象
*/
function my$(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
參考
你如果願意有所作為，就必須有始有終。(23)