當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 基础知识 - BOM篇
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 基础知识 - BOM篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
本篇文章是JavaScript基礎知識的BOM篇，如果前面的《JavaScript基礎知識-DOM篇》看完了，現在就可以學習BOM了。
注意： 所有的案例都在這里鏈接: 提取密碼密碼: yvxo，文章中的每個案例后面都有對應的序號。
1. BOM 基本概念
BOM(Browser Object Model)：瀏覽器對象模型，提供了一套操作瀏覽器的工具。
BOM中包含的內容很多，但是有很多東西是用不到的。在BOM中我們需要掌握定時器。
2. window 對象
- window對象是一個全局對象，也可以說是JavaScript中的頂級對象
- 像document、alert()、console.log()這些都是window的屬性，其實BOM中基本所有的屬性和方法都是屬性window的。
- 所有定義在全局作用域中的變量、函數都會變成window對象的屬性和方法
- window對象下的屬性和方法調用的時候可以省略window
示例代碼： [01-window對象.html]
普通函數調用的時候：
var name = "項羽"; var age = "28";function Teacher() {this.name = "虞姬";this.age = 22;console.log(this); } // 沒有 new 的時候就相當于普通函數調用 var obj = Teacher(); // 打印的this 指的是全局對象window console.log(name); // 虞姬 console.log(age); // 22 /* 為什么會是 虞姬 和 22 ？ 不是定義了一個全局變量name = "項羽"嗎？ 因為 Teacher作為一個普通函數調用，它里面的this指的就是全局對象 js 代碼一步步往下執行，一開始是定義了一個name="項羽"的全局變量， 但是下面的this有將"虞姬"指向了全局對象，所以最后打印的是虞姬 22 */構造函數的時候：
var name = "項羽"; var age = "28";function Teacher() {this.name = "虞姬";this.age = 22;console.log(this); } // 沒有 new 的時候就相當于普通函數調用 var obj = new Teacher(); // 打印的this 指的是構造函數對象 Teacher console.log(name); // 項羽 console.log(age); // 28 /* Teacher作為構造函數的時候，它內部的this指向的是 對象Teacher 此時的全局變量name="項羽" 將不會再受this的影響，所以，打印的是 項羽 28 */2.1 window.onload
window.onload事件會在窗體加載完成后執行，通常我們稱之為入口函數。 window.onload = function(){//里面的代碼會在窗體加載完成后執行。//窗體加載完成包括文檔樹的加載、還有圖片、文件的加載完成。 }注意：
- 如果有圖片加載，那么代碼一定要寫到window.onload里面，否則會出現圖片沒有加載完成，獲取到的寬度和高度不對的情況。
- 瀏覽器會對頁面的加載做優化，在加載圖片的時候，圖片的引入會延遲。
- 一個頁面中不能有兩個onload函數，寫在下面的會覆蓋掉上面的。
示例代碼： [02-window.onload對象(一)]
為什么下面的代碼會報錯呢？
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>window.onload</title><!-- script寫在上面直接報錯 --><!-- 因為代碼是一步步向下執行的，在head里的script獲取btn或者box的時候，是獲取不到的，因為下面的頁面結構還沒加載到：--><script>var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {box.style.width = "500px";box.style.height = "500px";}</script> </head><body><button id="btn">按鈕</button><div id="box" style="width:200px;height:200px;background:pink;"></div> </body></html>此時就可以用window.onload入口函數：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>window.onload</title><script>// 這里定義了一個入口函數，就是說等頁面所有文檔樹加載完才會執行這里面的代碼：window.onload = function() {var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {box.style.width = "500px";box.style.height = "500px";}}</script> </head><body><button id="btn">按鈕</button><div id="box" style="width:200px;height:200px;background:pink;"></div> </body></html>示例代碼：圖片加載 [03-window.onload對象(二)]
為什么獲取的寬度和高度都為0呢，js代碼不是寫在最后面了嗎？
<body><!-- html 部分--><img id="img" src="../image/levi.jpg" alt=""><!-- js 部分 --><script>var img = document.getElementById('img');console.log(img.width); // 0console.log(img.height); // 0</script> </body>效果圖：
這是因為，瀏覽器會對頁面的加載做優化，在加載圖片的時候，圖片的引入會延遲。這時候需要用window.onload：
<head><script>// 當文檔加載完成的時候執行，如果有圖片，等到圖片也加載完成才會執行。window.onload = function() {var img = document.getElementById('img');console.log(img.width);console.log(img.height);}</script> </head><body><img id="img" src="../image/levi.jpg" alt=""> </body>效果圖：
2.2 window.open
window.open() 打開一個窗口語法：window.open(url, [name], [features]);
參數1：需要載入的url地址 參數2：新窗口的名稱_self:在當前窗口打開_blank:在新的窗口打開 參數3：窗口的屬性，指定窗口的大小 返回值：會返回剛剛創建的那個窗口，用于關閉示例代碼： [04-window.open.html]
<!-- html 部分 --> <button id="btn">點擊在新窗口跳轉到百度</button> <button id="btn2">點擊在本窗口跳轉到百度</button><!-- js 部分 --> <script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');btn.onclick = function() {// 在新窗口打開，新窗口的大小為300 * 300var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");}btn2.onclick = function() {// 在當前窗口打開，新窗口的大小根據當前窗口改變的，設置的無效var newWin = window.open("http://www.baidu.com", "_self");} </script>效果圖：
2.3 window.close
window.close() 關閉一個窗口 在火狐瀏覽器下會失效解決辦法 newWin.close()；//newWin是剛剛創建的那個窗口 window.close(); //把當前窗口給關閉了示例代碼： [05-window.close.html]
<!-- html 部分 --> <button id="btn">點擊在新窗口跳轉到百度</button> <button id="btn2">點擊在本窗口跳轉到百度</button> <button id="btn3">點擊關閉打開的新窗口</button> <button id="btn4">點擊關閉本窗口</button><!-- js 部分 --> <script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');btn.onclick = function() {// 在新窗口打開，新窗口的大小為300 * 300var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");btn3.onclick = function() {// 關閉打開的新窗口newWin.close();}}btn2.onclick = function() {// 在當前窗口打開，新窗口的大小根據當前窗口改變的，設置的無效var newWin2 = window.open("http://www.baidu.com", "_self");}btn4.onclick = function() {// 關閉本窗口window.close();} </script>效果圖：
3. 定時器
定時器里面不能用this，因為在定時器里面，this，指向的是全局對象window。3.1 延時定時器
延時定時器可以讓代碼延遲一段時間之后才執行。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，window會自己調用。1、設置延時定時器
語法：setTimeOut(callback, time);
參數1：回調函數，時間到了就會執行。 參數2：延時的時間 單位：毫秒 返 回：定時器的id，用于清除示例代碼： [06-延時定時器.html]
var timer = setTimeOut(function(){//1秒后將執行的代碼。console.log("哈哈"); }, 1000);2.清除延時定時器
語法：clearTimeOut(timerId);
// 參數：定時器id clearTimeOut(timerId);示例代碼：
<!-- html 部分 --> <button id="btn1">開啟</button> <button id="btn2">關閉</button><!-- js 部分 --> <script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");// 定義一個全局變量var timeId; // 開啟定時器btn1.onclick = function() {//設置了一個定時器，會返回一個定時器idtimeId = setTimeout(function() {// 兩秒后在頁面顯示 Boom！document.write("<h1> Boom! </h1>");}, 2000);}// 清除定時器btn2.onclick = function() {//清除定時器, 需要定時器idclearTimeout(timeId);} </script>效果圖：兩秒后執行代碼，兩秒鐘之內清除定時器，就不會執行
3.2 間歇定時器
間歇定時器讓定時器每隔一段時間就會執行一次，并且會一直執行，到清除定時器為止。1、設置間歇定時器
語法：var intervalID = setInterval(func, delay);
參數1：重復執行的函數 參數2：每次延遲的毫秒數 返 回：定時器的id，用于清除示例代碼：
var timer = setInterval(function(){//重復執行的代碼。 }, 1000);2、清除間歇定時器
語法：clearInterval(intervalID);
參數：定時器id示例代碼： [07-間歇定時器.html]
<!-- html 部分 --> <button id="btn1">開啟</button> <button id="btn2">關閉</button><!-- js 部分 --> <script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");// 定義一個全局變量 存放定時器var timer;// 開啟定時器btn1.onclick = function() {//設置了一個定時器，會返回一個定時器 idtimer = setInterval(function() {// 每隔1秒 就會創建一個 h2 標簽var tag = document.createElement("h2");tag.innerHTML = "我是間歇定時器";document.body.appendChild(tag);}, 1000);};// 清除定時器btn2.onclick = function() {//清除定時器, 需要定時器idclearInterval(timer);document.body.innerHTML = "<h1>間歇定時器已清除</h1>";}; </script>效果圖：
2.3 定時器綜合練習
1、獲取短信驗證碼案例 [08-定時器綜合練習-獲取短信驗證碼.html]
<!-- html 部分--> <input type="button" value="點擊獲取短信驗證碼" id="btn"><!-- js 部分 --> <script>var btn = document.getElementById('btn');var timer = null;btn.onclick = function() {// 倒計時的秒數var num = 5;// 當按鈕點擊的時候 禁用buttonbtn.disabled = true;timer = setInterval(function() {// 每隔一秒修改num的值num--;// 修改btn的value值 這里不可以用this 因為定時器里的this指的是window對象btn.value = num + "秒后可再次發送";// 當num = 0 秒的時候，清除定時器if (num == 0) {clearInterval(timer);btn.disabled = false;btn.value = "點擊獲取短信驗證碼";}}, 1000);} </script>效果圖：
2、倒計時案例 [09-定時器綜合練習-倒計時案例.html]
<!-- 樣式部分 --> <style>.time {width: 160px;height: 40px;margin: 100px auto;line-height: 40px;font-size: 24px;font-weight: 700;}#h,#m,#s {float: left;display: block;width: 40px;height: 40px;text-align: center;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;}.split {width: 20px;float: left;text-align: center;} </style><!-- html 部分 --> <div class="time"><span id="h">00</span><span class="split">:</span><span id="m">00</span><span class="split">:</span><span id="s">00</span> </div><!-- js 部分 --> <script>var h = document.getElementById('h');var m = document.getElementById('m');var s = document.getElementById('s');setTime();var timer = setInterval(setTime, 1000);function setTime() {// 獲取當前時間var newTime = new Date(); // 此時測試的時間是 2017-12-11 15:24:00(根據本地時間一直在變)// 定義一個未來的時間var futureTime = new Date("2017-12-11 16:30:31");// 獲取時間差 單位是毫秒 首先我們需要轉成秒 而且時間戳獲取的時候 有很多小數 需要取整一下var time = parseInt((futureTime - newTime) / 1000);// time現在已經是秒了 我們需要將它轉換成小時// 1h = 3600svar hours = parseInt(time / 3600);// 將獲取的小時添加到頁面中 // 注意因為時鐘是兩位數，這里的小時可能只是一個個位數，所以需要拼接一個 "0"// 因為 分鐘、秒都需要拼0，所以我們可以封裝一個函數h.innerHTML = addZero(hours);// 獲取分鐘// 先將 time 轉換成分鐘 再去取余60var minutes = parseInt(time / 60) % 60;// 將獲取的分鐘添加到頁面中 m.innerHTML = addZero(minutes);// 獲取秒var seconds = time % 60;s.innerHTML = addZero(seconds);// 還要做個判斷 當time這個時間差小于等于0的時候 清除定時器if (time <= 0) {// 如果不置0的話 還會繼續減time = 0;clearInterval(timer);}}// 拼接 0 函數function addZero(num) {// 如果傳進來的參數小于10 就要給他拼 0return num < 10 ? '0' + num : num;} </script>效果圖：
3、電子表案例 [10-定時器綜合練習-電子表.html]
<!-- 樣式部分 --> <style>#box {width: 300px;height: 50px;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;margin: 100px auto;font: bold 24px/50px 楷體;text-align: center;} </style><!-- html 部分 --> <div id="box"></div><!-- js 部分 --> <script>var box = document.getElementById('box');// 封裝一個獲取當前時間的函數function getTime() {// 獲取當前時間var date = new Date();console.log(date);// 獲取當前的年份var year = date.getFullYear();// 獲取當前時間的月份var month = addZero(date.getMonth() + 1);// 獲取當前的天var day = addZero(date.getDate());// 獲取小時var hours = addZero(date.getHours());// 獲取分鐘var minutes = addZero(date.getMinutes());// 獲取秒var seconds = addZero(date.getSeconds());// 將時間格式設置為如下格式var str = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;return str;}// 拼 0 函數function addZero(num) {return num < 10 ? "0" + num : num;}// 定時器會延遲一秒執行，在外面定義一遍 會補償這個一秒box.innerHTML = getTime();setInterval(function() {box.innerHTML = getTime();}, 1000); </script>效果圖：
4、機械表案例 [11-定時器綜合練習-機械表.html]
<!-- 樣式部分 --> <style>.clock {width: 600px;height: 600px;margin: 100px auto;background: url(../image/機械表/clock.jpg) no-repeat;position: relative;}.clock div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../image/機械表/hour.png) no-repeat center center;}#m {background-image: url(../image/機械表/minute.png);}#s {background-image: url(../image/機械表/second.png);} </style><!-- html 部分 --> <div class="clock"><div id="h"></div><div id="m"></div><div id="s"></div> </div><!-- js 部分 --> <script>var h = document.getElementById("h");var m = document.getElementById("m");var s = document.getElementById("s");function setTime() {// 獲取當前時間var date = new Date();// 設置秒針var seconds = date.getSeconds() + (date.getMilliseconds() / 1000);s.style.transform = "rotate(" + 6 * seconds + "deg)";// 設置分針// 60分鐘一圈360度 每分鐘相當于 6度 這樣只會一分分鐘的走// 我們想要的效果是秒針旋轉地同時 分針也在微弱的旋轉 seconds/60得到一個小數 加上分鐘 再去乘以角度var minutes = date.getMinutes() + seconds / 60;m.style.transform = "rotate(" + 6 * minutes + "deg)";// 設置時針// 12個小時是一圈360度 每個小時相當于 30度var hours = date.getHours() + minutes / 60;h.style.transform = "rotate(" + 30 * hours + "deg)";}// 頁面一加載就執行一次setTime();// 讓window每隔15ms就執行一次 1秒鐘 分成 25份就已經有動畫效果 分成60份，很細膩setInterval(setTime, 15); </script>效果圖：
4. Location對象
location對象也是window的一個屬性，location其實對應的就是瀏覽器中的地址欄。4.1 常用的屬性和方法
location.href:控制地址欄中的地址 location.href = "http://www.baidu.com"; //讓頁面跳轉到百度首頁 location.reload()讓頁面重新加載 location.reload(true);//強制刷新，相當于ctrl+F5 location.reload(false);//刷新，相當于F5 location的其他屬性 console.log(window.location.hash); // 哈希值 其實就是錨點 console.log(window.location.host); // 服務器 服務器名+端口號 console.log(window.location.hostname); // 服務器名 console.log(window.location.pathname); // 路徑名 console.log(window.location.port); // 端口 console.log(window.location.protocol); // 協議 console.log(window.location.search); // 參數示例代碼：定時跳轉網址 [12-location對象-定時跳轉.html]
<!-- html 部分 --> <a href="#" id="link">注冊成功，5秒后跳轉</a><!-- js 部分 --> <script>var num = 5;var link = document.getElementById('link');var timer = setInterval(function() {num--;link.innerHTML = "注冊成功，" + num + "秒后跳轉";// 如果倒計時等于0的時候，自動跳轉到網址if (num == 0) {clearInterval(timer);location.href = "https://segmentfault.com/u/marsman_levi";}}, 1000); </script>效果圖：
5. Navigator 對象
window.navigator的一些屬性可以獲取客戶端的一些信息 navigator.userAgent：返回瀏覽器版本 navigator.onLin：返回網絡狀態 true / false示例代碼：獲取瀏覽器版本 [13-navigator對象.html]
// 打印瀏覽器版本 console.log(navigator.userAgent);// 打印網絡狀態 console.log(navigator.onLine);效果圖：
6. Screen 對象
window.screen的一些屬性可以獲取屏幕的寬高1、獲取屏幕的可占用寬高
返回訪問者屏幕的寬度、高度，以像素計，減去界面特性，比如窗口任務欄。
screen.availWidth：獲取屏幕的可用寬度screen.availHeight：獲取屏幕的可用高度2、獲取屏幕寬高
screen.width：獲取屏幕的寬度screen.height：獲取屏幕的高度示例代碼： [14-screen對象.html]
document.write("當前屏幕可占用寬度：" + screen.availWidth + "<br>"); // 1864 document.write("當前屏幕可占用高度：" + screen.availHeight + "<br>"); // 1080 document.write("當前屏幕寬度：" + screen.width + "<br>"); // 1920 document.write("當前屏幕高度：" + screen.height + "<br>"); // 1080效果圖：
7. History 對象
history對象表示頁面的歷史1、后退 history.back()
history.back() 方法加載歷史列表中的前一個URL。這與在瀏覽器中點擊后退按鈕是相同的：
history.back(); history.go(-1);2、后退 history.forward()
history forward() 方法加載歷史列表中的下一個URL。這與在瀏覽器中點擊前進按鈕是相同的：
history.forward(); history.go(1);8. javascript 彈框
在javascript中可以創建3種彈框，分別是：警告框、確認框、提示框。1、警告框 alert
- 警告框經常用于確保用戶可以得到某些信息。
- 當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。
2、確認框 confirm
- 確認框通常用于驗證是否接受用戶操作。
- 當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
- 當你點擊 "確認", 確認框返回 true， 如果點擊 "取消", 確認框返回 false。
3、提示框 prompt
- 提示框經常用于提示用戶在進入頁面前輸入某個值。
- 當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。
- 如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為null。
4、彈框換行
彈窗使用 反斜杠 + "n"(\n) 來設置換行。
9. javascript Cookie
Cookie用于存儲web頁面的用戶信息1、什么是Cookie？
- Cookie是一些數據, 存儲于你電腦上的文本文件中。
- 當web服務器向瀏覽器發送web頁面時，在連接關閉后，服務端不會記錄用戶的信息。
-
Cookie的作用就是用于解決 "如何記錄客戶端的用戶信息":
- 當用戶訪問web頁面時，他的名字可以記錄在cookie中。
- 在用戶下一次訪問該頁面時，可以在cookie中讀取用戶訪問記錄。
Cookie以名/值對形式存儲，如下所示:
username=Levi當瀏覽器從服務器上請求web頁面時，屬于該頁面的cookie會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。
2、使用 JavaScript 創建Cookie
JavaScript可以使用document.cookie屬性來創建 、讀取、及刪除cookie。JavaScript中，創建cookie如下所示：
document.cookie = "username = Levi";你還可以為cookie添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除：
document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";你可以使用path參數告訴瀏覽器cookie的路徑。默認情況下，cookie屬于當前頁面
document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";3、使用 JavaScript 讀取 Cookie
在 JavaScript 中, 可以使用以下代碼來讀取cookie：
var x = document.cookie;document.cookie將以字符串的方式返回所有的cookie，類型格式cookie1=value; cookie2=value; cookie3=value;
4、使用 JavaScript 修改 Cookie
在 JavaScript 中，修改cookie類似于創建cookie，如下所示：
document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";舊的cookie將被覆蓋。
5、使用 JavaScript 刪除 Cookie
刪除cookie非常簡單。您只需要設置expires參數為以前的時間即可，如下所示
document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";注意，當您刪除時不必指定 cookie 的值。
6、Cookie 字符串
document.cookie屬性看起來像一個普通的文本字符串，其實它不是。
即使您在document.cookie中寫入一個完整的cookie字符串, 當您重新讀取該cookie信息時，cookie 信息是以名/值對的形式展示的。
如果您設置了新的cookie，舊的cookie不會被覆蓋。 新cookie將添加到document.cookie 中，所以如果您重新讀取document.cookie。
上一篇：JavaScript 基礎知識 - DOM篇(二)
下一篇：JavaScript 進階知識 - 特效篇(一)
總結
以上是生活随笔為你收集整理的JavaScript 基础知识 - BOM篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 幅值与峰峰值的计算_电厂振动测量、计算基
- 下一篇： 3.AngularJS-过滤器