1. 什麼是BOM
BOM（Browser Object Model）即浏覽器對象模型，它提供了獨立于内容而與浏覽器視窗進行互動的對象，其核心對象是 window。
BOM 由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性。
BOM 缺乏标準，JavaScript 文法的标準化組織是 ECMA，DOM 的标準化組織是 W3C，BOM 最初是Netscape 浏覽器标準的一部分。
2. BOM的構成
BOM 比 DOM 更大，它包含 DOM。
3. 頂級對象window
4. window對象的常見事件
頁面（視窗）加載事件（2種）
第1種
window.onload 是視窗 (頁面）加載事件，當文檔内容完全加載完成會觸發該事件(包括圖像、腳本檔案、CSS 檔案等), 就調用的處理函數。
第2種
DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖檔，flash等等。
IE9以上才支援！！！
如果頁面的圖檔很多的話, 從使用者通路到onload觸發可能需要較長的時間, 互動效果就不能實作，必然影響使用者的體驗，此時用 DOMContentLoaded 事件比較合适。
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('點選我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
</script> 複制
調整視窗大小事件
window.onresize 是調整視窗大小加載事件, 當觸發時就調用的處理函數。
注意：
- 隻要視窗大小發生像素變化，就會觸發這個事件。
- 我們經常利用這個事件完成響應式布局。 window.innerWidth 目前螢幕的寬度
<script>
// 注冊頁面加載事件
window.addEventListener('load', function() {
var div = document.querySelector('div');
// 注冊調整視窗大小事件
window.addEventListener('resize', function() {
// window.innerWidth 擷取視窗大小
console.log('變化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div> 複制
5. 定時器（兩種）
window 對象給我們提供了 2 個非常好用的方法-定時器。
- setTimeout()
- setInterval()
setTimeout() 炸彈定時器
開啟定時器
普通函數是按照代碼順序直接調用。 簡單了解： 回調，就是回頭調用的意思。上一件事幹完，再回頭再調用這個函數。 例如：定時器中的調用函數，事件處理函數，也是回調函數。 以前我們講的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 裡面的 函數也是回調函數。
<script>
// 回調函數是一個匿名函數
setTimeout(function() {
console.log('時間到了');
}, 2000);
function callback() {
console.log('爆炸了');
}
// 回調函數是一個有名函數
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
</script> 複制
案例：5秒後關閉廣告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
// 擷取要操作的元素
var ad = document.querySelector('.ad');
// 開啟定時器
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body> 複制
停止定時器
<button>點選停止定時器</button>
<script>
var btn = document.querySelector('button');
// 開啟定時器
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
// 給按鈕注冊單擊事件
btn.addEventListener('click', function() {
// 停止定時器
clearTimeout(timer);
})
</script> 複制
setInterval() 鬧鐘定時器
開啟定時器
<script>
// 1. setInterval
setInterval(function() {
console.log('繼續輸出');
}, 1000);
</script> 複制
案例：倒計時
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1. 擷取元素（時分秒盒子）
var hour = document.querySelector('.hour'); // 小時的黑色盒子
var minute = document.querySelector('.minute'); // 分鐘的黑色盒子
var second = document.querySelector('.second'); // 秒數的黑色盒子
var inputTime = +new Date('2019-5-1 18:00:00'); // 傳回的是使用者輸入時間總的毫秒數
countDown(); // 我們先調用一次這個函數，防止第一次重新整理頁面有空白
// 2. 開啟定時器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 傳回的是目前時間總的毫秒數
var times = (inputTime - nowTime) / 1000; // times是剩餘時間總的秒數
var h = parseInt(times / 60 / 60 % 24); //時
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩餘的小時給 小時黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 目前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script> 複制
停止定時器
案例：發送短信倒計時
點選按鈕後，該按鈕60秒之内不能再次點選，防止重複發送短信。
手機号碼： <input type="number"> <button>發送</button>
<script>
var btn = document.querySelector('button');
// 全局變量，定義剩下的秒數
var time = 3;
// 注冊單擊事件
btn.addEventListener('click', function() {
// 禁用按鈕
btn.disabled = true;
// 開啟定時器
var timer = setInterval(function() {
// 判斷剩餘秒數
if (time == 0) {
// 清除定時器和複原按鈕
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '發送';
} else {
btn.innerHTML = '還剩下' + time + '秒';
time--;
}
}, 1000);
});
</script> 複制
6. this指向問題
this的指向在函數定義的時候是确定不了的，隻有函數執行的時候才能确定this到底指向誰，一般情況下this的最終指向的是那個調用它的對象。
現階段，我們先了解一下幾個this指向
- 全局作用域或者普通函數中this指向全局對象window（注意定時器裡面的this指向window）
- 方法調用中誰調用this指向誰
- 構造函數中this指向構造函數的執行個體
<button>點選</button>
<script>
// this 指向問題 一般情況下this的最終指向的是那個調用它的對象
// 1. 全局作用域或者普通函數中this指向全局對象window（ 注意定時器裡面的this指向window）
console.log(this);
function fn() {
console.log(this);
}
window.fn();
window.setTimeout(function() {
console.log(this);
}, 1000);
// 2. 方法調用中誰調用this指向誰
var o = {
sayHi: function() {
console.log(this); // this指向的是 o 這個對象
}
}
o.sayHi();
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log(this); // 事件處理函數中的this指向的是btn這個按鈕對象
})
// 3. 構造函數中this指向構造函數的執行個體
function Fun() {
console.log(this); // this 指向的是fun 執行個體對象
}
var fun = new Fun();
</script> 複制
7. location對象
什麼是 location 對象
window對象給我們提供了一個location屬性用于擷取或設定窗體的URL, 并且可以用于解析URL。
因為
這個屬性傳回的是一 個對象，是以我們将這個屬性也稱為location對象。
URL
location 對象的屬性
重點記住: href 和search
案例：5分鐘自動跳轉頁面
<button>點選</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(kk);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您将在' + timer + '秒鐘之後跳轉到首頁';
timer--;
}
}, 1000);
</script> 複制
案例：擷取URL參數
<div></div>
<script>
console.log(location.search); // ?uname=andy
// 1.先去掉？ substr('起始的位置'，截取幾個字元);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字元串分割為數組 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把資料寫入div中
div.innerHTML = arr[1] + '歡迎您';
</script> 複制
location對象的常見方法
<button>點選</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 記錄浏覽曆史，是以可以實作後退功能
// location.assign('http://www.itcast.cn');
// 不記錄浏覽曆史，是以不可以實作後退功能
// location.replace('http://www.itcast.cn');
location.reload(true);
})
</script> 複制
8. navigator對象
navigator 對象包含有關浏覽器的資訊，它有很多屬性，我們最常用的是 userAgent，該屬性可以傳回由客戶機發送伺服器的 user-agent 頭部的值。
下面前端代碼可以判斷使用者那個終端打開頁面，實作跳轉
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手機
} else {
window.location.href = ""; //電腦
} 複制
9 history對象
window對象給我們提供了一個 history對象，與浏覽器曆史記錄進行互動。該對象包含使用者（在浏覽器視窗中）通路過的URL。
history對象一般在實際開發中比較少用，但是會在一些 OA 辦公系統中見到。