JavaScript--BOM
BOM（browser object model）瀏覽器對(duì)象模型
一燃领、window對(duì)象
window是瀏覽器的一個(gè)實(shí)例士聪，在瀏覽器中，window對(duì)象有雙重角色猛蔽，它既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口剥悟，又是ECMAScript規(guī)定的Global對(duì)象灵寺。
1.window對(duì)象的方法
①alert("content")
語法：window.alert（”content”）
功能：顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框
②confirm(“message")
語法：window.confirm(“message")
功能：顯示一個(gè)帶有指定消息和OK及取消按鈕的對(duì)話框
返回值：如果用戶點(diǎn)擊確定按鈕，則confirm（）返回true
如果用戶點(diǎn)擊取消按鈕区岗，則confirm（）返回false
③prompt(“text,defaultText")
語法：window.prompt(“text,defaultText")
參數(shù)說明：
text：要在對(duì)話框中顯示的純文本（而不是HTML格式的文本）
defaultText：默認(rèn)的輸入文本
返回值：如果用戶單擊提示框的取消按鈕略板，則返回null
如果用戶單擊確認(rèn)按鈕，則返回輸入字段當(dāng)前顯示的文本
注意:所有的全局變量和全局方法都被歸在window上
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" value="刪除" id="btn">
</div>
<script>
var age=15;
function sayAge(){
alert('我'+window.age);
}
// 聲明一個(gè)全局變量
window.username="marry"; // var username="marry";
// 聲明一個(gè)全局方法
window.sayName=function(){
alert("我是"+this.username);
}
//sayAge();
//window.sayName();
// confirm()
// 獲取按鈕,綁定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
// 彈出確認(rèn)對(duì)話框
var result=window.confirm("您確定要?jiǎng)h除嗎慈缔？刪除之后該信息\n將不可恢復(fù)叮称！");
if(result){
document.getElementById("box").style.display="none";
}
}
// 彈出輸入框
//var message=prompt("請(qǐng)輸入您的星座","天蝎座");
//console.log(message);
</script>
</body>
④open(pageURL,name,parameters)
語法：window.open(pageURL,name,parameters)
功能：打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口
參數(shù)說明：
pageURL：子窗口路徑
name：子窗口句柄。（name聲明了新窗口的名稱藐鹤，方便后期通過name對(duì)子窗口進(jìn)行引用）
parameters ：窗口參數(shù)(各參數(shù)用逗號(hào)分隔)
⑤close( )
語法：window.close( )
功能：關(guān)閉瀏覽器窗口
index1.html:
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打開子窗口瓤檐，顯示newwindow.html
window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
//name的作用：在引用子窗口的時(shí)候通過name引用
var quit = document.getElementById("quit");
// 點(diǎn)擊關(guān)閉當(dāng)前窗口
quit.onclick = function(){
window.close();
}
}
</script>
</body>
newwindow.html：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>hello window.open</h1>
</body>
</html>
⑥定時(shí)器
JavaScript是單線程語言，單線程就是所執(zhí)行的代碼必須按照順序娱节。
超時(shí)調(diào)用：
語法：setTimeout（code,millisec）
功能：在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式
參數(shù)說明：
1挠蛉、code：要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼串
2、millisec：在執(zhí)行代碼前需等待的毫秒數(shù)
說明：setTimeout（）只執(zhí)行code一次肄满。如果要多次調(diào)用谴古，請(qǐng)使用setInterval（）或者讓code自身再次調(diào)用setTimeout（）
setTimeout方法返回一個(gè)ID值，通過它取消超時(shí)調(diào)用
清除超時(shí)調(diào)用:
語法：clearTimeout（id_of_settimeout）
功能：取消由setTimeout（）方法設(shè)置的timeout
參數(shù)說明：
1悄窃、 id_of_settimeout ：由setTimeout（）返回的ID值讥电，該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊
<body>
<script>
//setTimeout("alert('hello')",4000);
//匿名函數(shù)
var timeout1=setTimeout(function(){
alert("hello");
},2000)
//自定義函數(shù)
var fnCall=function(){
alert("world");
}
clearTimeout(timeout1);
//推薦：
//setTimeout(fnCall,5000);
</script>
</body>
間歇調(diào)用：
語法：setInterval(code,millisec)
功能：每隔指定的時(shí)間執(zhí)行一次代碼
參數(shù)說明：
1、code：要調(diào)用的函數(shù)或要執(zhí)行的代碼串轧抗。
2恩敌、millisec：周期性執(zhí)行或調(diào)用code之間的時(shí)間間隔，以毫秒計(jì)
<body>
<script>
/* var intervalId=setInterval(function(){
console.log("您好");
},1000)
// 10秒之后停止打印
setTimeout(function(){
clearInterval(intervalId);
},10000);*/
var num=1,
max=10,
timer=null;
// 每隔1秒針num遞增一次横媚，直到num的值等于max纠炮，清除定時(shí)器
/* timer=setInterval(function(){
console.log(num);
num++;
if(num>max){
clearInterval(timer);
}
},1000)*/
// 使用超時(shí)調(diào)用實(shí)現(xiàn)
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
</script>
</body>
二、location對(duì)象
location對(duì)象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息灯蝴，還提供了一些導(dǎo)航的功能恢口，它既是window對(duì)象的屬性，也是document對(duì)象的屬性穷躁。
1.location對(duì)象的常用屬性
①location.href
語法：location.href
功能：返回當(dāng)前加載頁面的完整URL
說明： location.href與window.location.href等價(jià)
②語法：location.hash
功能：返回URL中的hash（#號(hào)后 跟零或多個(gè)字符）耕肩，如果不包含
則返回空字符串。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{height:400px;background:#ccc;}
.box2{height:600px;background:#666;}
</style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回頂部">
<script>
//console.log(location.href);
//file:///E:/BaiduNetdiskDownload/JavaScript/js%E8%B5%84%E6%96%99%E5%92%8C%E6…E5%9F%BA%E7%A1%80%EF%BC%88%E6%BA%90%E4%BB%A3%E7%A0%81%EF%BC%89/index6.html
//console.log(location.hash);
//在連接中加入錨點(diǎn) 打印錨點(diǎn)#top
var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
}
console.log(location.pathname);
</script>
</body>
③location.host
語法：location.host
功能：返回服務(wù)器名稱和端口號(hào)（如果有）
④location.hostname
語法：location.hostname
功能：返回不帶端口號(hào)的服務(wù)器名稱问潭。
⑤location.pathname
語法：location.pathname
功能：返回URL中的目錄和（或）文件名猿诸。
⑥location.port
語法：location.port
功能：返回URL中指定的端口號(hào)，如果沒有狡忙，返回空字符串梳虽。
⑦location.protocol
語法：location.protocol
功能：返回頁面使用的協(xié)議。
⑧l(xiāng)ocation.search
語法：location.search
功能：返回URL的查詢字符串灾茁。這個(gè)字符串以問號(hào)開頭窜觉。
xxxx?id=55&name=marry;
location.search;
"?id=55&name=marry;"
2.locating對(duì)象的位置操作
改變?yōu)g覽器位置的方法：
location.href屬性
location對(duì)象其他屬性也可改變URL：
location.hash
location.search
①location.replace()
語法：location.replace(url)
功能：重新定向URL谷炸。
說明： 使用location.replace不會(huì)在歷史記錄中生成新紀(jì)錄。
②location.reload()
語法：location.reload()
功能：重新加載當(dāng)前顯示的頁面禀挫。
說明：
? location.reload()有可能從緩存中加載
? location.reload(true)從服務(wù)器重新加載
<body>
<input type="button" value="刷新" id="reload">
<script>
/* setTimeout(function(){
//location.href='index6.html';
// window.location='index6.html';
location.replace("index6.html");
},1000)*/
document.getElementById("reload").onclick=function(){
location.reload(true);
}
</script>
</body>
三旬陡、history對(duì)象
history對(duì)象保存了用戶在瀏覽器中訪問頁面的歷史記錄
①history.back()
語法：history.back()
功能：回到歷史記錄的上一步
說明：相當(dāng)于使用了history.go(-1)
②history.forward()
語法：location.forward()
功能：回到歷史記錄的下一步
說明：相當(dāng)于使用了history.go(1)
③history.go(-n)
語法：history.go(-n)
功能：回到歷史記錄的前n步
④history.go(n)
語法：history.go(n)
功能：回到歷史記錄的后n步
<body>
<p>這是index11.html</p>
<p><input type="button" value="后退" id="btn"></p>
<p><input type="button" value="前進(jìn)" id="btn2"></p>
<p><input type="button" value="前進(jìn)兩步" id="btn3"></p>
<script>
var btn=document.getElementById("btn");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
//點(diǎn)擊btn按鈕時(shí)回到歷史記錄的上一步
btn.onclick=function(){
//history.back();
//history.go(-1);
history.go(-2);//回到前兩步
}
//點(diǎn)擊btn2按鈕來到歷史記錄的下一步
btn2.onclick=function(){
//history.forward();
history.go(1);
}
//點(diǎn)擊btn3按鈕來到歷史記錄的下一步
btn3.onclick=function(){
history.go(2);
}
</script>
</body>
四、Screen對(duì)象
包含有關(guān)客戶端顯示屏幕的信息
①screen.availWidth
語法：screen.availWidth
功能：返回可用的屏幕寬度
②screen.availHeight
語法：screen.availHeight
功能：返回可用的屏幕高度
<body>
<script>
//獲取屏幕的寬和高
console.log("頁面寬："+screen.availWidth);
console.log("頁面高："+screen.availHeight);
//獲取窗口的寬和高
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);
</script>
</body>
五特咆、Navigator對(duì)象
UserAgent：用來識(shí)別瀏覽器名稱季惩、版本录粱、引擎 以及操作系統(tǒng)等信息的內(nèi)容腻格。
可以判斷瀏覽器的類型
判斷設(shè)備的終端是移動(dòng)還是PC
<head>
<meta charset="UTF-8">
<title>Navigator</title>
</head>
<body>
<script>
//console.log(navigator.userAgent);
// 判斷瀏覽器
function getBrowser(){
var explorer = navigator.userAgent,browser;
//indexOf():返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，如果沒有出現(xiàn)過啥繁，返回-1
if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
}
return browser;
}
var browser = getBrowser();
console.log("您當(dāng)前使用的瀏覽器是："+browser);
// 判斷終端
function isPc(){
var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo);
for(i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false;
break;
}
}
return flag;
}
var isPcs = isPc();
console.log(isPcs);
</script>
</body>