1. 什么是BOM
BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立於內容而與瀏覽器窗口進行交互的對象，其核心對象是 window。
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. 定時器（兩種）
-
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(location.href);
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 辦公系統中見到。