1、BOM
- BOM(Browser Object Model): 浏覽器對象模型
- 其實就是操作浏覽器的一些能力
- 我們可以操作哪些内容
- 擷取一些浏覽器的相關資訊(視窗的大小)
- 操作浏覽器進行頁面跳轉
- 擷取目前浏覽器位址欄的資訊
- 操作浏覽器的滾動條
- 浏覽器的資訊(浏覽器的版本)
- 讓浏覽器出現一個彈出框(alert/confirm/prompt)
- BOM 的核心就是 window 對象
- window 是浏覽器内置的一個對象,裡面包含着操作浏覽器的方法
2、擷取浏覽器尺寸
和
innerHeight
innerWidth
- 這兩個方法分别是用來擷取浏覽器視窗的寬度和高度(包含滾動條的)
var windowHeight = window.innerHeight console.log(windowHeight) var windowWidth = window.innerWidth console.log(windowWidth)
3、浏覽器的彈出層
alert 在浏覽器中彈出一個提示框
- 這個彈出層知識一個提示内容,隻有一個确定按鈕
- 點選确定按鈕以後,這個提示框就消失了
是在浏覽器彈出一個詢問框
confirm
- 這個彈出層有一個詢問資訊和兩個按鈕
- 當你點選确定的時候,就會得到 true
- 當你點選取消的時候,就會得到 false
是在浏覽器彈出一個輸入框
prompt
- 這個彈出層有一個輸入框和兩個按鈕
- 當你點選取消的時候,得到的是 null
- 當你點選确定的時候得到的就是你輸入的内容
4、浏覽器的位址資訊location
- 在 window 中有一個對象叫做
location
- 就是專門用來存儲浏覽器的位址欄内的資訊的
location.reload
location.reload()
這個方法會重新加載一遍頁面,就相當于重新整理是一個道理
window.location.reload()
- 注意: 不要寫在全局,不然浏覽器就會一直處在重新整理狀态
history
- window 中有一個對象叫做
history
- 是專門用來存儲曆史記錄資訊的
1. history.back() 回到曆史記錄的上一個頁面 前提是有曆史記錄,就相當于浏覽器上的 ⬅️ 按鈕
2. history.forward() 曆史記錄的下一個,就相當于浏覽器上的 ➡️ 按鈕
3. history.go(n) 去到曆史記錄中指定頁面
history.go(1) 相當于history.forward() 下一個
history.go(-1) 相當于history.back() 上一個
5、浏覽器版本資訊 navigator
- window 中有一個對象叫做
navigator
- 是專門用來擷取浏覽器資訊的
是擷取的浏覽器的整體資訊
navigator.userAgent
擷取的是浏覽器的名稱
navigator.appName
擷取的是浏覽器的版本号
navigator.appVersion
擷取到的是目前計算機的作業系統
navigator.platform
6、浏覽器事件
浏覽器的 onload 事件
window.onload = function () { console.log('頁面已經加載完畢') }
- 這個不在是對象了,而是一個事件
- 是在頁面所有資源加載完畢後執行的
浏覽器的 onscroll 事件
- 這個 onscroll 事件是當浏覽器的滾動條滾動的時候觸發
- 或者滑鼠滾輪滾動的時候出發
window.onscroll = function () { console.log('浏覽器滾動了') }
浏覽器頁面的滾動距離,也叫浏覽器的卷去距離
通過scrollTop 和 scrollLeft 擷取垂直和水準卷去的距離
會有相容問題
document.body.scrollTop 沒有使用DOCTYPE聲明的時候可用
document.documentElement.scrollTop 使用DOCTYPE聲明的時候可用
注意:其實浏覽器沒有動,隻不過是頁面向上走了
scrollTop
- 擷取的是頁面向上滾動的距離
- 一共有兩個擷取方式
document.body.scrollTop
document.documentElement.scrollTop
- 兩個都是擷取頁面向上滾動的距離
- 差別:
- IE 浏覽器
- 沒有
聲明的時候,用這兩個都行
DOCTYPE
- 有
聲明的時候,隻能用
DOCTYPE
document.documentElement.scrollTop
- Chrome 和 FireFox
- 沒有
聲明的時候,用
DOCTYPE
document.body.scrollTop
- 有
聲明的時候,用
DOCTYPE
document.documentElement.scrollTop
- Safari
- 兩個都不用,使用一個單獨的方法
window.pageYOffset
scrollLeft
- 擷取頁面向左滾動的距離
- 也是兩個方法
document.body.scrollLeft
document.documentElementLeft
- 兩個之間的差別和之前的
一樣,有相容問題
scrollTop
7、定時器
js 中定時器有兩種,,倒計時定時器和間隔定時器倒計時定時器
- 倒計時多少時間以後執行函數
- 文法:
setTimeout(要執行的函數,多長時間以後執行)
- 會在你設定的時間以後,執行函數
var timerId = setTimeout(function () { console.log('我執行了') }, 1000) console.log(timerId) // 1
- 時間是按照毫秒進行計算的,1000 毫秒就是 1秒鐘
- 是以會在頁面打開 1 秒鐘以後執行函數
- 隻執行一次,就不在執行了
- 傳回值是,目前這個定時器是頁面中的第幾個定時器
間隔定時器
- 每間隔多少時間就執行一次函數
- 文法:
setInterval(要執行的函數,間隔多少時間)
var timerId = setInterval(function () { console.log('我執行了') }, 1000)
- 時間和剛才一樣,是按照毫秒進行計算的
- 每間隔 1 秒鐘執行一次函數
- 隻要不關閉,會一直執行
- 傳回值是,目前這個定時器是頁面中的第幾個定時器
定時器的傳回值
- 設定定時器的時候,他的傳回值是部分
和
setTimeout
的
setInterval
- 隻要有一個定時器,那麼就是一個數字
var timerId = setTimeout(function () { console.log('倒計時定時器') }, 1000) var timerId2 = setInterval(function () { console.log('間隔定時器') }, 1000) console.log(timerId) // 1 console.log(timerId2) // 2
關閉定時器
- 我們剛才提到過一個 timerId,是表示這個定時器是頁面上的第幾個定時器
- 這個 timerId 就是用來關閉定時器的數字
- 我們有兩個方法來關閉定時器
和
clearTimeout
clearInterval
var timerId = setTimeout(function () { console.log('倒計時定時器') }, 1000) clearTimeout(timerId)
- 原則上是
關閉
clearTimeout
setTimeout
關閉
clearInterval
setInterval
- 但是其實是可以通用的,他們可以混着使用