目錄
- BOM簡介
- 概念
- DOM與BOM的區別
- window 物件常見事件
- 視窗加載事件
- 調整視窗大小事件
- 定時器
- 練習
- JavaScript執行機制
- location物件
- navigator物件
- history物件
BOM簡介
概念
首先看一下JavaScript的組成部分：
從上圖可以看出：DOM是頁面檔案物件模型，BOM是瀏覽器物件模型
BOM：瀏覽器物件模型（Brower Object Model，BOM）提供了獨立于內容而與瀏覽器視窗進行互動的物件，其核心物件是window，
DOM與BOM的區別
1、DOM(Document Object Model)：一個檔案就是一個DOM樹，Html是樹的根，標簽、標簽的屬性、標簽里的文本都是樹的節點，核心物件（頂級物件）是document，
2、BOM(Brower Object Model):瀏覽器物件模型，核心物件（頂級物件）是window，可以獨立于內容與瀏覽器進行互動.
BOM的構成：
window 物件常見事件
視窗加載事件
（1）window.onload事件：是視窗（頁面）加載事件，當檔案內容（包括影像、腳本檔案、CSS檔案等）完全加載完成會觸發該事件，
實作方式：
方式一：
<body>
<script>
function fun(){
alert('視窗加載事件')
}
</script>
</body onload="fun()">
方式二：
window.onload=function(){
alert('頁面加載事件')
}
方式三：事件監聽
window.addEventListener('load',function(){
alert('頁面加載事件')
})
（2）document.DOMContentLoaded ： document.DOMContentLoaded加載事件，會在DOM加載完成時觸發，這里所說的加載不包括CSS樣式表、圖片和flash影片等額外內容的加載，
調整視窗大小事件
window.onresize：當瀏覽器視窗大小發生改變時觸發該事件
實作方式：
方式一：
window.onresize=function(){
alert('視窗大小改變了')
}
方式二：事件監聽
window.addEventListener('resize',function(){
alert('視窗大小改變了')
})
定時器
（1）setTimeout(function(){},時間)：在給定的時間(以毫秒為單位)之后，執行函式，回傳值是一個定時器物件，
變數名 = setTimeout(function(){},時間)
（2）clearTimeout(定時器物件)：清除setTimeout定時器物件，
練習
1.兩秒后彈出訊息框
法一：
setTimeout('alert("javaScript");',2000) //2秒之后彈出訊息框
法二：
setTimeout(function(){
alert('JavaScript')
},2000)
法三：
function fn(){
console.log("2秒后顯示")
}
var timer=setTimeout(fn,2000)
clearTimeout(timer) //清除定時器物件
2、3秒鐘后讓圖片消失
function fn(){
var img=document.querySelector('img') //獲取圖片
img.style.display='none' //圖片消失
}
var timer=setTimeout(fn,3000)
JavaScript執行機制
（1）單執行緒：JavaScript程式是單執行緒的，即同一個時間只能做一件事
行程與執行緒 ：
- 行程：程式的一次動態運行，有獨立的記憶體空間
- 執行緒：是行程的運行單位，一個行程可以分為若干個執行緒
（2）同步：就是前一個任務結束后再執行后一個任務，程式的執行順序與任務的排列順序是一致的、同步的
（3）異步：在做一件事情的同時，可以去做其他的事情
location物件
location物件：地址物件
(1)URL(Uniform Resource Locator)：統一資源定位符
URL組成：
（2）location常用屬性：
-
location.href: 完整url地址 -
location.hostname：主機名 -
location.port：埠號 -
location.protocol：協議 -
ocation.search：’?'之后的引數字串
例如：
<button>頁面跳轉</button>
<script>
var btn = document.querySelector('button')
btn.addEventListener('click',function(){
location.href = 'http://www.baidu.com'
})
</script>
navigator物件
navigator物件：導航物件
常用屬性：
-
appCodeName：回傳瀏覽器的內部名稱(即瀏覽器的內核) -
appName：回傳瀏覽器完整名稱 -
appVersion：瀏覽器平臺和版本資訊 -
cookieEnabled：瀏覽器是否啟用cookie -
platform：作業系統平臺
例如：
console.log("內核："+navigator.appCodeName)
console.log("名稱："+navigator.appName)
console.log("版本："+navigator.appVersion)
console.log("cookie："+navigator.cookieEnabled)
console.log("作業系統："+navigator.platform)
console.log("歷史記錄："+history.length)
history物件
(1)常用屬性：
history.length：回傳歷史串列中的網址數
(2)常用方法：
history.back()：加載歷史記錄中的前一個URL地址history.forward()：加載歷史記錄中的下一個URL地址history.go()：加載歷史記錄中給定的URL地址
注意history后跟的關鍵字，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289886.html
標籤：其他