BOM
BOM的概述：
bom 稱為瀏覽器物件模型（bowser object model），也就意味他可以獲取瀏覽器上的所有內容以及相關的操作，BOM缺乏規范的，存在共有物件來解決這個問題，但是共有物件也存在兼容問題（ie10以后）
BOM的結構
window
概述： window是頂層物件 屬于golbal物件，他是所有全域變數的父親，
相關方法
列印方法
// window //物件 console.log(window); //window 物件 Window的建構式 //常用的彈窗方法及列印方法 window.console.log('hello') //console.log() window可以省略的 console.log('日志') //控制臺 log日志 以日志的形式列印 console.error('錯誤') //以錯誤的形式列印 console.warn('警告') //以錯誤的形式列印 console.debug('測驗') //以錯誤的形式列印 console.info('資訊提示') //以錯誤的形式列印
彈窗方法
//彈窗 window.alert('hello') //彈提示窗 var isTrue = confirm('你確認要洗掉嗎') //互動框 true確認 false取消 回傳 console.log(isTrue); var str = prompt('請輸入你的手機號') //輸入框 他會有個輸入框讓你輸入回傳對應的你輸入的內容 （string的內容） console.log(str);
打開關閉方法
//打開 open 關閉 close // 第一個引數是url地址 第二個引數為title target(打開方式 _blank _self _parent) 第三個引數為設定的引數（視窗的高度 寬度等等） window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0') // height=100 窗??度； // width=400 窗?寬度； // top=0 窗?距離螢屏上?的象素值； // left=0 窗?距離螢屏左側的象素值； // toolbar=no 是否顯??具欄，yes為顯?； // menubar，scrollbars 表?選單欄和滾動欄， // resizable=no 是否允許改變窗???，yes為允許； // location=no 是否顯?地址欄，yes為允許； // status=no 是否顯?狀態欄內的資訊（通常是?件已經打開），yes為允許； window.close() //關閉當前的視窗 （關閉瀏覽器只能有一個頁面）
改變位置的方法
//moveBy 一個是x軸的距離 y軸的距離 window.moveBy(100,100) //X+100 Y+100 //moveTo 一個x軸 一個y軸 window.moveTo(200,200) //X=200 Y=200
改變大小的方法
//改變對應的視窗大小 window.resizeBy(200,200) //width+200 height+200 //resizeTo window.resizeTo(200,200) //width=200 height=200
列印方法（打應當前的整個頁面）
//print列印方法 window.print()
聚焦和失焦的方法
//focus 聚焦 blur 失去焦點 window.focus() window.blur()
查找方法
//find查找 ctrl+f window.find()
滾動欄位置改變
//滾動欄位置改變 初始位置 x:0,y:0 window.scrollBy(100,100) //原本的位置 x+100，y+100 window.scrollTo(500,500) //到達位置 x=500 y=500 //回到頂部
相關屬性
innerHeight 和 innerWidth
parent
location物件 （*）
屬性
console.log(location.hash) //哈希 #后面帶的值 * console.log(location.host) //主機 域名 ip地址+埠號 console.log(location.hostname) //主機名 ip地址 （127.0.0.1表示本機地址和localhost是一樣的） console.log(location.protocol) //協議 用于通信 （基于tcp/ip）http（明文傳輸） https（安全）（加密過） console.log(location.port) //埠號 1--65525 （1-100的埠電腦占用了）http默認的埠80 https默認埠443 console.log(location.href) //鏈接的地址 也可以設定 console.log(location.search); //?后面帶的值 一般是get請求傳輸資料的時候 * console.log(location.origin); //跨域 console.log(location.pathname); //路徑名 獲取的除了協議和ip地址加埠號后面的東西
方法
assign 跳轉頁面
location.assign('http://www.baidu.com')
replace 替換頁面
location.replace('http://www.weibo.com')
reload 重新加載頁面
location.reload() //引數 boolean型別的值 true（從服務器加載 慢） false （從快取中加載 快）
history物件 （*）
屬性
length 歷史頁面個數
state 狀態存盤的物件
scrollRestoration 滾動欄恢復
方法
forwad 前進
function fn(){ history.forward() //前進 }
back 后退
function fn1(){ history.back() //后退 }
go 去任意的歷史頁面
function fn2(){ history.go(-1) //去任意頁面 0就是自己 小于0 后退 大于0前進 }
pushState
//spa 單頁應用 function fn3(){ //添加state的值 資料 "" 地址(會產生跨域問題) history.pushState('hello','','./index.html') //會改地址 但是不會重繪 推一個歷史頁面到歷史區 state設定進去 }
replaceState
function fn4(){ //替換state history.replaceState('world','','/location物件講解.html') //會改地址 但是不會重繪 在歷史區直接修改當前這個歷史頁面 state設定進去 }
screen 物件
屬性
avaliHeight 可占用的最大高度
avaliWidth 可占用的最大寬度
avaliLeft 離螢屏左側的距離
avaliTop 離螢屏上方的距離
navigator物件
屬性
userAgent 用戶瀏覽器設定資訊
路由 （擴展）
對應的開發者來說 路由是一個很重要的東西，（前端路由）（后端路由）
后端路由
根據對應的介面地址來訪問不同的功能 （后端路由 restful風格（介面的風格））
前端路由
根據不同的訪問路徑 （path）來渲染不同的內容（組件）
前端的路由主要分三種
1.頁面路由 （跳轉頁面 重繪操作）
-
location.href
-
location.assign()
-
location.replace()
-
history.back()
-
history.forward()
-
等這系列的操作都會導致頁面進行跳轉，重新加載頁面（重繪）
2.hash路由 （使用hash來實作 后面必須要帶上# 不會重繪頁面）
-
通過hash的改變來改變的對應的渲染內容 （事件監聽 onhashchange）
window.onhashchange = function(){ console.log('hash值變了') }
3.H5路由 （history里面state進行監聽）（常用SPA （單頁應用程式））
-
history.pushState() 加一個歷史頁面（地址變了 不會重繪）
-
history.replaceState() 替換歷史頁面 （地址變數 不會重繪）
-
也是通過事件進行監聽 （onpopstate）
window.onpopstate = function(){ console.log('路由改變了') }
在對應的框架學習中 我們里面的路由的寫法底層主要采用hash以及h5的方式（vue react）默認是路由模式為hash
vue中路由有幾種模式 （面試題）
倆種模式（hash模式和history模式）
總結：
主要認識：location history 的用法
路由的基本原理 h5 與 hash!!!(為將來寫底層代碼做鋪墊)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501012.html
標籤：其他
下一篇：js專項之變數提升和函式提升題目