千鋒教育JavaScript全套視頻教程（10天學(xué)會(huì)Js，前端javascrip
BOM
概述
BOM (Browser Object model 瀏覽器對(duì)象模型)，主要是對(duì)應(yīng)的瀏覽器內(nèi)容的相關(guān)操作對(duì)象。它缺乏規(guī)范，利用共有對(duì)象來(lái)解決每個(gè)瀏覽器不一致的問題。
BOM主要的內(nèi)容
- window 瀏覽器窗口
- location 地址欄 *
- history 歷史對(duì)象 *
- navigator 導(dǎo)航對(duì)象
- screen 屏幕對(duì)象
- document 文檔對(duì)象
- frames 子窗口對(duì)象實(shí)際它也是一個(gè)window
window對(duì)象
window對(duì)象是瀏覽器global對(duì)象，它表示瀏覽器的窗口。里面具備相關(guān)方法及內(nèi)容。所有的全局屬性及對(duì)應(yīng)的全局方法都是它的子內(nèi)容。bom其他的相關(guān)內(nèi)容都是window的子元素（屬性）。
屬性
- caches 瀏覽器緩存
- crypto 瀏覽器的加密模塊
- indexedDB 瀏覽器的數(shù)據(jù)庫(kù)
- innerHeight,innerWidth 瀏覽器顯示區(qū)域的寬高
- localStorage,sessionStorage 瀏覽器的本次存儲(chǔ)
- console 瀏覽器控制臺(tái)對(duì)象
- ....
js 復(fù)制代碼 //相關(guān)屬性 console.log(window.caches) //瀏覽器緩存 console.log(window.clientInformation) //客戶端詳情 返回一個(gè)navigator對(duì)象 console.log(window.closed) //是否關(guān)閉 console.log(window.crypto) //加密包 console.log(window.indexedDB) //瀏覽器自帶數(shù)據(jù)庫(kù) （存儲(chǔ)其他地方存儲(chǔ)不了的數(shù)據(jù) 存儲(chǔ)數(shù)據(jù)大） console.log(window.innerHeight,window.innerWidth) //獲取窗口的高度 獲取窗口的寬度 顯示內(nèi)容部分 console.log(window.localStorage) //本地存儲(chǔ) console.log(window.sessionStorage) //本地存儲(chǔ) console.log(window.console) //獲取控制臺(tái)對(duì)象 console.log(window.document) console.log(window.history) console.log(window.location) console.log(window.frames)
方法 （window對(duì)象可以被省略）
打印相關(guān)方法
js
復(fù)制代碼
//打印相關(guān)的方法
console.log('日志打印')
console.debug('調(diào)試打印')
console.error('錯(cuò)誤打印')
console.info('信息打印')
console.dir('文件打印')
console.warn('警告打印')
//清空控制臺(tái)
console.clear()
彈窗相關(guān)方法
- alert
- confirm
- prompt
js
復(fù)制代碼
alert('信息彈窗')
//輸入彈窗 返回輸入的字符串
var str = prompt('輸入彈窗')
console.log(str)
//交互彈窗 接收一個(gè)boolean類型的值 點(diǎn)擊確認(rèn)返回true 點(diǎn)擊取消返回false
var is = confirm('您是否要?jiǎng)h除')
console.log(is)
打開和關(guān)閉窗口的方法
- open
js
復(fù)制代碼
//打開窗口
//相關(guān)配置
// width=1024 窗口寬度；
// height=700 窗口高度；
// top=0 窗口距離屏幕上方的象素值；
// left=0 窗口距離屏幕左側(cè)的象素值；
// titlebar=no 是否顯示標(biāo)題欄，被忽略，除非調(diào)用HTML應(yīng)用程序或一個(gè)值得信賴的對(duì)話框.默認(rèn)值是yes；
// menubar=no 表示菜單欄，默認(rèn)值是yes；
// scrollbars=yes 是否顯示滾動(dòng)條，默認(rèn)值是yes；
// resizable=no 是否允許改變窗口大小，默認(rèn)值是yes；
// status=no 是否要添加一個(gè)狀態(tài)欄，默認(rèn)值是yes；
// toolbar=no 是否顯示工具欄，默認(rèn)值是yes；
// location=no 是否顯示地址欄，默認(rèn)值是yes；
//打開窗口url地址 相關(guān)打開方式（_self 自身打開 _blank 新的頁(yè)面） 窗口的相關(guān)配置
window.open('http://www.baidu.com','_blank','width=20,height=40,top=0,left=0')
- close 關(guān)閉自身的窗口
js 復(fù)制代碼 window.close()
窗口位置移動(dòng)的方法
- moveTo 傳入對(duì)應(yīng)的x，y坐標(biāo)移動(dòng)到這個(gè)坐標(biāo)
js 復(fù)制代碼 //100,100 window.moveTo(200,200) //移動(dòng)到坐標(biāo)200,200的位置
- moveBy 傳入對(duì)應(yīng)的需要移動(dòng)的距離 在原本的基礎(chǔ)上移動(dòng)這個(gè)距離
js 復(fù)制代碼 //100,100 window.moveBy(200,200) //移動(dòng)到坐標(biāo)300,300的位置
窗口大小的更改的方法
- resizeTo 傳入對(duì)應(yīng)的寬高 更改到這個(gè)寬高的大小
js 復(fù)制代碼 //100,100 window.resizeTo(200,200) //200,200
- resizeBy 傳入對(duì)應(yīng)的寬高 在原本的大小上增加對(duì)應(yīng)的寬高
js 復(fù)制代碼 //100,100 window.resizeBy(200,200) //300,300
滾動(dòng)欄的位置更改 (x,y)
- scrollTo 傳入x,y坐標(biāo)移動(dòng)到這個(gè)坐標(biāo)
js 復(fù)制代碼 //50,50 window.scrollTo(100,100) //滾動(dòng)欄距離到100,100
- scrollBy 傳入移動(dòng)的距離在原本基礎(chǔ)上移動(dòng)對(duì)應(yīng)的距離
js 復(fù)制代碼 //50,50 window.scrollBy(100,100) //滾動(dòng)欄距離到150,150
print 打印方法
dart 復(fù)制代碼 window.print()
獲取焦點(diǎn)和失去焦點(diǎn)的方法
js 復(fù)制代碼 window.focus() //獲取焦點(diǎn) window.blur() //失去焦點(diǎn)
定時(shí)器和延時(shí)器
js
復(fù)制代碼
window.setInterval(function(){},1000,'傳遞的參數(shù)')
window.clearInterval('定時(shí)器id')
window.setTimeout(function(){},1000,'傳遞的參數(shù)')
window.clearTimeout('延時(shí)器id')
延時(shí)器
js 復(fù)制代碼 window.setImmediate //等待其他執(zhí)行完再執(zhí)行
location
location表示是地址欄對(duì)象，主要作用是設(shè)置地址欄內(nèi)容及獲取地址欄內(nèi)容。
屬性（所有屬性都是可讀可寫）
- hash #號(hào)后面的值
- host 主機(jī)
- hostname 主機(jī)名
- href: 地址路徑
- origin 跨域地址
- pathname 路徑名
- port 端口號(hào)
- protocol 協(xié)議
- search ?后面攜帶的參數(shù)
js 復(fù)制代碼 console.log(location) // #號(hào)后的值 #一般都存在于最后面 console.log(location.hash) //域名 相當(dāng)于ip地址+端口號(hào) localhost表示本機(jī)它的IP為127.0.0.1 console.log(location.host) //ip地址 console.log(location.hostname) //地址的鏈接 console.log(location.href) //跨域地址 console.log(location.origin) //路徑地址 去除對(duì)應(yīng)的ip地址+端口號(hào)的剩余內(nèi)容 console.log(location.pathname) //端口號(hào) 1-65525 （1-100的端口一般被系統(tǒng)占用） http協(xié)議默認(rèn)端口為80 https的默認(rèn)端口為443 console.log(location.port) //超文本傳輸協(xié)議 網(wǎng)絡(luò)請(qǐng)求訪問常用 http 不安全 https 安全 console.log(location.protocol) //?后面的值 ?用于傳遞參數(shù)的 ?key=值&key=值 console.log(location.search) //location是可以設(shè)置的 location.hash = "hello" location.search = 'name=tom' // location.port = 9999 location.proctocol = "https" //沒作用 location.hostname = "127.0.0.1" //href location的鏈接地址 設(shè)置href可以使頁(yè)面跳轉(zhuǎn) 沒有歷史記錄 // location.href = "http://www.baidu.com" location = "http://www.baidu.com" //跟href屬性是一致的
方法
- reload 重新加載
- assign 跳轉(zhuǎn)頁(yè)面
- replace 替換href地址跳轉(zhuǎn)頁(yè)面
js
復(fù)制代碼
//重新加載
location.reload()
// 歷史原因 可以會(huì)傳入對(duì)應(yīng)的boolean類型的值 true表示重新加載 false表示從緩存中加載
location.reload(true)
// assign 跳轉(zhuǎn)頁(yè)面的 有歷史記錄的
location.assign('http://www.baidu.com')
// 替換當(dāng)前href地址 沒有歷史記錄
location.replace('http://www.baidu.com')
history
history是歷史對(duì)象，主要是用于操作對(duì)應(yīng)的歷史頁(yè)面的。
屬性 （只讀）
- state 狀態(tài)值
- length 歷史頁(yè)面?zhèn)€數(shù)
- scrollRestoration 滾動(dòng)恢復(fù)屬性
js 復(fù)制代碼 console.log(history.state) //狀態(tài)值 默認(rèn)為null console.log(history.length) //歷史頁(yè)面?zhèn)€數(shù) console.log(history.scrollRestoration)//滾動(dòng)欄位置緩存選項(xiàng) 滾動(dòng)恢復(fù)屬性
方法 （不會(huì)進(jìn)行刷新操作）
- pushState 將歷史頁(yè)面推入（設(shè)置state的值）
- replaceState 將歷史頁(yè)面替換 （設(shè)置state的值）
js
復(fù)制代碼
/* pushState replaceSate 三個(gè)參數(shù) 設(shè)置給state的數(shù)據(jù) 打開的頁(yè)面名字（""） 鏈接地址
pushState 推入一個(gè)歷史頁(yè)面 這個(gè)頁(yè)面地址會(huì)替換當(dāng)前的頁(yè)面地址 但是不會(huì)進(jìn)行頁(yè)面刷新操作 state的值會(huì)發(fā)生變化 歷史頁(yè)面?zhèn)€數(shù)+1
replaceState 替換當(dāng)前的歷史頁(yè)面 這個(gè)頁(yè)面地址會(huì)替換當(dāng)前的頁(yè)面地址 也不會(huì)進(jìn)行刷新操作 state的值會(huì)發(fā)生變化 歷史頁(yè)面?zhèn)€數(shù)不會(huì)變化
*/
//相關(guān)方法
function fn(){
history.pushState('hello','','./state.html')
console.log(history.length) //2
console.log(history.state) //hello
}
function fn1(){
history.replaceState('hi','','./state.html')
console.log(history.length) //1
console.log(history.state) //hi
}
- forward 前進(jìn)
- back 后退
- go 歷史頁(yè)面跳轉(zhuǎn)
html 復(fù)制代碼 <!-- 前進(jìn)后退和跳轉(zhuǎn) --> <button onclick="history.forward()">前進(jìn)</button> <button onclick="history.back()">后退</button> <!-- go方法里面?zhèn)魅氲氖菍?duì)應(yīng)的數(shù)值 0為當(dāng)前頁(yè)面 大于為0為前進(jìn) 小于0為后退 --> <button onclick="history.go(-1)">跳轉(zhuǎn)</button>
navigator
瀏覽器的導(dǎo)航對(duì)象，主要是描述當(dāng)前瀏覽器的信息及相關(guān)內(nèi)容。
相關(guān)屬性
userAgent 攜帶發(fā)生給對(duì)應(yīng)的服務(wù)器
js 復(fù)制代碼 console.log(navigator.appName) //當(dāng)前應(yīng)用名 console.log(navigator.appCodeName) //應(yīng)用編碼名 console.log(navigator.appVersion) //應(yīng)用版本 console.log(navigator.userAgent) //客戶端相關(guān)信息
screen
瀏覽器的屏幕對(duì)象，主要是用于獲取當(dāng)前的屏幕大小。（大屏可視化）
屬性
- width 寬度
- height 高度
- availHeight 可占用高度
- availWidth 可占用寬度
js 復(fù)制代碼 //寬度和高度 console.log(screen.width); console.log(screen.height); //可占用寬度和高度 console.log(screen.availHeight); console.log(screen.availWidth);
document
表示當(dāng)前的文檔對(duì)象，也就是書寫的html文檔。
frames
表示子窗口，實(shí)際也是一個(gè)window對(duì)象
總結(jié)
- bom是利用共有對(duì)象來(lái)實(shí)現(xiàn)對(duì)應(yīng)的兼容。主要的對(duì)象有window，history , screen , navigator, document、frames、location。
- history主要是用于操作歷史頁(yè)面的，里面的方法都不會(huì)進(jìn)行刷新操作。（back、forward、go 、pushState 、replaceState）
- location 主要是用于操作對(duì)應(yīng)的地址欄 里面的屬性都可以進(jìn)行設(shè)置（hash、query）。 主要的方法有（reload、assign、replace）。
- screen主要是屏幕對(duì)象，它可以獲取屏幕相關(guān)內(nèi)容。
- navigator是導(dǎo)航對(duì)象，主要可以獲取瀏覽器的相關(guān)內(nèi)容及外設(shè)。
- bom基礎(chǔ)是路由的底層實(shí)現(xiàn)（主要用到了location 及 history）
跳轉(zhuǎn)頁(yè)面的幾種方式
- a標(biāo)簽跳轉(zhuǎn)頁(yè)面
- location賦值
- location.href賦值
- location.assign()
- location.replace()
- history.go()
- history.back()
- history.forward()
標(biāo)簽：
