js的基础知识——BOM

一、认识BOM

BOM是浏览器对象模型, 其实就是操作浏览器的一些能力
BOM 的核心就是window 对象，window是JS内置的一个对象, 里面包含着操作浏览器的方法

二、BOM事件

1.获取浏览器窗口的尺寸

innerHeight / innerWidth
- 作用: 获取浏览器窗口的高度和宽度(包含滚动条)
- 语法: window.innerHeight / window.innerWidth
```
      // console.log('高度', window.innerHeight)
      // console.log('宽度', window.innerWidth)
```

2.浏览器的弹出层 （一般不用）

alert
prompt
confirm 有一个询问信息和两个按钮

     var boo = confirm('确定进如此页面')
     console.log(boo)  // 返回 true/false

3.浏览器的地址信息

 // 参数1：location ———— 获取本浏览器的地址
         console.log(window.location)
      // 实现3s后直接跳转 百度   
        setTimeout(function () {
           window.location.href = 'https://www.baidu.com/'
          }, 3000)
// 参数2.reload  调用时会重新加载页面, 相当于 刷新
         var count = 0
         setInterval(function () {
            count++
            console.log(count)
             if (count === 5) {
              window.location.reload()    // 不能直接写在 代码中，否则浏览器会一直刷新
            }
        }, 1000)   //1秒执行一次5秒刷新一次
```

4.浏览器的历史记录

注：前提是页面中得有前一页或后一页的内容，不能是新打开的页面

    // 1). history.back  用来回退历史记录,返回上一页
         window.history.back()  //可直接在控制台使用
    // 2).history.forward  是去到下一个历史记录里面, 也就是去到下一个页面
        window.history.forward() //可直接在控制台使用

5.浏览器的版本信息 (了解)

在控制台内输入 window.navigator 即可查看

6.浏览器的 onload 事件

这个事件会在页面所有资源加载完毕后执行

window.onload = function () { 将 JS 代码全部书写在这个函数内部 }

注1：在浏览器中, 把 JS 写在 head 中, 在 JS 加载时, 下边的 body标签还没来得及加载,可能会导致我们获取body内部的标签, 比如说 div 或者 img, 出现问题获取不到
注2：如果把代码放在 onload 中, 则不会出现这问题
注3：如果把 JS 写在 body 底部, 写不写onload 都无所谓

7.浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发(前提是有滚动条)
```
        window.onscroll = function(){
        console.log('浏览器滚动')
        }
```

8.浏览器的滚动距离

垂直距离的语法
- 语法1: document.body.scrollTop
- 语法2: document.documentElement.scrollTop
水平距离的语法
- 语法1: document.body.scrollLeft
- 语法2: document.documentElement.scrollLeft
两种语法的区别
- IE 浏览器(了解)：
  - 没有 DOCTYPE 声明的时候, 两种语法没有差别用哪个都无所谓
  - 有 DOCTYPE 声明的时候, 只能使用语法2 documentElement
- Chrome 和 FireFox
  - 没有 DOCTYPE 声明的时候, 用语法1 body
  - 有 DOCTYPE 声明的时候, 用语法2 documentElement
- Safari
  - 这两个语法都不用, 使用一个单独的方法 window.pageYOffset

9.浏览器的本地存储

localStorage —— 持久存储

   // 1.增
      window.localStorage.setItem('qq1','1234567') 
      window.localStorage.setItem('qq2','1234567') 
      window.localStorage.setItem('qq3','1234567') 
   // 2.查
      var qq = window.localStorage.getItem('qq1')
      console.log(qq)
   // 3.删一条
      window.localStorage.removeItem('qq3') 
   // 4.删全部
      window.localStorage.clear()

sessionStorage —— 临时存储

    // 1.增
      window.sessionStorage.setItem('wx1','1234567') 
      window.sessionStorage.setItem('wx2','qcgh1234') 
      window.sessionStorage.setItem('wx3','1234567') 
    // 2.查(找不到，返回null )
      var wx = window.sessionStorage.getItem('wx2')
      console.log(wx)
    // 3.删一条
      window.sessionStorage.removeItem('wx1') 
    // 4.删全部
      window.sessionStorage.clear()

cookie 只能存储字符串，且有固定格式

   // 1.设置cookie
      document.cookie = 'qq = 6123789'
   // 2.设置一条带有过期时间的cookie
      var timer = new Date()
      document.cookie = 'qq = 6123789;expires' + timer
   // 3.设置一个3s后过期的cookie
      var timer = new Date()
      timer.setTime(timer.setTime() - 1000*60*60*8 + 3)
      document.cookie = 'qq = 6123789;expires' + timer
      document.cookie = 'WX = 12ss45sa'
      document.cookie = 'WX1 = wrt12ss45sa'
   // 4.获取cookie
      setTimeout(function (){
        console.log(document.cookie)
      },5000)

浅识js——BOM

js的基础知识——BOM

一、认识BOM

二、BOM事件