JavaScript 14 BOM-有解無憂

BOM（Browser Object Model）是指瀏覽器物件模型，瀏覽器物件模型提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，BOM是由多個物件組成，其中代表瀏覽器視窗的window物件是BOM的頂層物件，其他物件都是該物件的子物件

瀏覽器的頂級物件是window，當我們用的是window的成員的時候，window可以省略，比如window.alert() ----->　alert（）

定義的全域變數都屬于window，都是window物件的屬性

var a = 10;
console.log(window.a);
console.log(a);

window的屬性：console.dir(window);

慎用window中的屬性當作變數名，比如name

三種對話框：

alert()

prompt()

confirm()

頁面加載事件：

onload 頁面內容全部加載完成之后執行　　頁面加載完成：頁面上所有的元素創建完畢，并且參考的外部資源下載完畢（js，css，圖片），當js標簽寫在body內部的最后時，瀏覽器js和css加載完畢，而圖片尚未加載

onload = function(){……}

//頁面卸載的時候執行

onunload = function(){……}　　在onunload中，所有的對話框都無法使用window物件，被凍結了，而且所有對話框(三種)都無法使用，會報錯

頁面重繪：先卸載頁面再重新加載頁面

定時器：

setTimeout()　　定時炸彈一樣，隔一段時間執行，且只會執行一次，倒計時，清除：clearTimeout

setInterval()　　鬧鐘一樣，隔一段時間執行，且會重復執行

<input type = 'button' value = 'https://www.cnblogs.com/xiaoyuheng/archive/2021/06/14/按鈕' id = 'btn' >
<input type = 'button' value = 'https://www.cnblogs.com/xiaoyuheng/archive/2021/06/14/按鈕' id = 'btn2' >
<script>
//定時器默認有個回傳值，是定時器的標示
var timerId;
var btn = document.getElementById('btn');
btn.onclick = function(){
    timerId = setTimeout(function(){console.log('爆炸了');}，3000)
}
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
//取消定時器執行
    clearTimeout(timerId);
}
</script>

執行洗掉提示三秒自動消失：

<div id="box" ></div>
<input type="button" value="https://www.cnblogs.com/xiaoyuheng/archive/2021/06/14/delete" id="btn">
<script type="text/javascript">
var box = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function(){
    box.style.display = 'block';
    setTimeout(function(){
        box.style.display = 'none';
    },3000)
}
</script>

location物件：獲取或者設定瀏覽器地址欄的URL

location物件是window下的一個屬性，所以使用的時候可省略window物件

跳轉：

location.herf = 'http://www.baidu.com';

location.assign('http://www.baidu.com');　　//assign委派

location.replace( 'http://www.baidu.com');　　//替換地址之后無法回傳原頁面（不記錄歷史）

reload和F5一樣，F5重繪頁面，可能從快取中加載， control+F5遷至重繪，從服務器獲取頁面

location.reload()　　//重新加載　　　　，reload有一個引數true/false，true強制從服務器獲取頁面，false如果瀏覽器有快取的話，直接從快取獲取頁面

URL組成部分都是location的屬性：scheme://host:port/path?query#fragment　　//協議+主機 +埠+路徑+查詢+錨點

history：window下的物件，可通過按鈕點擊實作頁面的前進后退功能，和瀏覽器上面的箭頭前進后退一樣

navigator.userAgent：該屬性主要用于判斷用戶作業系統瀏覽器資訊，判斷是手機還是pc端，以此來顯示頁面的大小尺寸等

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/287306.html

標籤：其他

上一篇：分享Sql性能優化的一些建議

下一篇：分享Sql性能優化的一些建議