BOM

window常见事件#

窗口加载#

window.onload 或者window.addEventListener('load',function (){})

意思是在html，js,css全部加载完毕之后进行的事件

DOMContentLoaded,仅当DOM加载完成，不包括样式表，图片，flah等等

一般在图片很多的时候，DOMContentLoaded事件比较好

调整窗口大小事件#

window.onresize

window.onresize=function (){    console.log('xixi')   //只要窗口大小变化，就会触发事件}

通常会应用与相应式布局

定时器#

setTimeOut,setInterval ,已经很熟悉了，不说了

停止定时器#

<button onclick="window.clearInterval(a)">tingzhi</button><script>let a = setInterval(()=>{    console.log('iam xiaoyu')},1500）
</script>

setTimeOut--window.clearTimeout(id)

setInterval --"window.clearInterval(id)

Location#

location 下面主要用到的是href serach

href#

可以获取当前的url

<button onclick="console.log(location.href)">1212</button>

所以我们可以利用这个属性来跳转到我们想要去的页面

<button onclick="location.href='https://www.baidu.com'">1212</button>

reload#

刷新当前页面

<body><button onclick="add()" id="btn1">+1</button><button onclick="relo()">reload</button></body><script>    let a=1    function add(){//这里我们设置一个++的按钮，我们想要再下面再弄一个按钮刷新页面，这样统计恢复1        let btn1=document.querySelector('#btn1')        a++        btn1.innerText=a
    }    function relo(){  //按下按钮页面就刷新了        location.reload()    }
</script>

assign#

跳转到其它页面，和修改location一个效果，带有history，可以返回

<button onclick="location.assign('https://www.baidu.com')">baidu</button>

replace#

跳转到其它页面，和修改location一个效果，不带有history，不可以返回

navigator#

代表浏览器信息的一个属性

 console.log(navigator)

userAgent#

很多属性都已经不在用，只有这个还有点用

console.log(navigator.userAgent)//可以看到我们用的什么浏览器，及内核

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

history#

length#

获取当前浏览历史次数

back#

返回上一个页面，和浏览器的向上一样的

<body><p>one yemian</p><button onclick="qian()"><</button></body><script>    function qian(){        history.back()           }</script>

forward#

 function qian(){        history.forward()          }

go#

可以跳转到指定的页面

需要传入一个整数，1表示向前跳转一个页面，2表示2个页面 -1表示向后跳转一个页面，-2表示2个页面