BOM

定义

浏览器对象模型, 其实就是操作浏览器的一些能力

核心

window 对象
window 时 JS 内置的一个对象, 里面包含着操作浏览器的方法

获取浏览器窗口的尺寸

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

            console.log(window.innerHeight)
            console.log(window.innerWidth)

浏览器的弹出层

alert
prompt
confirm
- 有一个询问信息和两个按钮
  - 点击确定按钮返回 true
  - 点击取消按钮返回 false

            var boo = confirm('请问您确定进去页面吗')
            console.log(boo)

浏览器的地址信息 (location)

在 window 中，有一个对象叫做location，他是专门用来存储浏览器地址栏内的信息

语法1: location.href -> 这个对象中有一个属性叫做href

  作用:
      1.这个属性是专门存储湖览器地址栏内的url地址的信息
      2.也可以给这个属性赋值，这样就会跳转到我们赋值的地址了

语法2: location.reload() -> 这个对象中,有一个方法叫做reload

  作用:
      会重新加载页面，相当于刷新           
      注意:不要直接写在代码中，否则浏览器会一直刷新

浏览器的历史记录 (history)

window 对象中有一个叫做 history 他专门用来存储历史记录信息

语法1:window.history.back()

  作用:
      专门用来回退历史记录，就是回到前一个页面，相当于浏览器左上角的 ← 按钮
      注意:我们需要有上一条记录否则不能使用这个方法

语法2: window.history.forward()

  作用:
      是去到下一个历史记录里面，也就是去到下一个也买你，相当于浏览器左上角的 → 按钮
      注意:我们需要之前有过回退操作，不然无法使用这个方法

BOM的事件

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

window 中的 navigator 可以获取到浏览器的信息

2.浏览器的 onload 事件

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

语法:

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

3.浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件,或者鼠标滚轮滚动时触发(前提是有滚动条)

语法:

                window.onscroll = function () {
                    console.log('浏览器滚动了')
                }

4.浏览器的滚动距离

浏览器的内容可以滚动，那么我们就能获取到浏览器的滚动距离

注意: 1.浏览器并没有滚动，而是浏览器内部的页面在滚动 2.这里就不能再使用 window 对象, 而是使用 document 对象
4.1 scrollTop
- 作用:获取页面垂直滚动距离
  - 语法1: document.body.scrollTop
  - 语法2: document.documentElement.scrollTop

        window.onscroll = function () {
        // console.log('body: ', document.body.scrollTop)
        console.log('documentElement: ', document.documentElement.scrollTop)
    }

4.2. scrollLeft

作用:获取页面向左滚动距离
- 语法1: document.body.scrollLeft
- 语法2: document.documentElement.scrollLeft

    window.onscroll = function () {
    // console.log('body: ',document.body.scrollLeft)
    console.log('documentElement: ',document.documentElement.scrollLeft)
}

4.3.两种语法的区别

语法1: document.body.scrollTop

语法2: document.documentElement.scrollTop

scrollLeft的语法和scrollTop的语法区别一样

  * IE 浏览器(了解)
      * 没有 DOCTYPE 声明的时候, 两种语法没有差别用哪个都无所谓
      * 有 DOCTYPE 声明的时候, 只能使用语法2 documentElement

  * Chorme 和 FireFox
      * 没有 DOCTYPE 声明的时候, 用 语法1 body
      * 有 DOCTYPE 声明的时候, 用 语法2 documentElement

  * Safari
      * 这两个语法都不用, 使用一个单独的方法 window.pageYOffset

5.点击事件
- 语法:元素.onclick = function () {}

浏览器的本地存储

1.localStorage

浏览器的本地存储,持久存储，一旦存储永久存在
只能存基本数据类型(一般存储字符串)，不能存储其他数据类型
可以跨页面通讯两个页面得到了数据共享，将这种情况叫做跨页面通讯

localStorage(增删除一条删除全部查)

 1.1 增

    window.localStorage.setItem('qq1','123456')
    window.localStorage.setItem('qq2','456789')

 1.2 查

    var qq1 = window.localStorage.getItem('qq1')
    console.log(qq1)             // 123456
    var phone = window.localStorage.getItem('phone')
    console.log(phone)          // null 因为没有对应的 phone 值

1.3 删除一条

    window.localStorage.removeItem('qq1')

1.4删除全部

    window.localStorage.clear()

2.sessionStorage

浏览器的本地存储，临时存储，关闭浏览器以后，存储内容自动消失
想要跨页面通讯，必须是本页面跳转的才可以

sessionStorage(增删除一条删除全部查)

2.1 增

    window.sessionStorage.setItem('wx1','88888')
    window.sessionStorage.setItem('wx2','66666')
    window.sessionStorage.setItem('wx3','33333')

2.2 查

    var wx1 = window.sessionStorage.getItem('wx1')
    console.log(wx1);        // 88888
    var phone = window.sessionStorage.getItem('phone')
    console.log(phone)          // null  因为没有对应的 phone 值

2.3 删除一条

    window.sessionStorage.removeItem('wx3')

2.4 清空

    window.sessionStorage.clear()

3.cookie

3.1 设置一个cookie

            document.cookie = 'a=100'

3.2 设置一个三秒后过期的 cookie 因为我们所在的东八区,比世界标准时间快8小时所以我们想要设置一个3秒后过期的cookie 必须将时间往前调整8小时，然后加上过期时间

            var timer = new Date()
            timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 3 )
            document.cookie = 'QQ=123456;expires=' + timer

3.3 设置多个cookie

            document.cookie = 'wx1=45678'
            document.cookie = 'wx2=12354'

3.4 获取 cookie

            setTimeout(function(){
                console.log(document.cookie)
            }, 5000)

注意:
- 1.只能存储字符串，并且有固定的格式
  - key=value; key2=value2
- 2.存储大小有限制(大约是4kb)
- 3.存储有时效性
  - 默认是会话级别失效,但是可以手动设置过期时间
- 4.操作必须依赖服务器
  - 本地打开的页面不能操作 cookie
  - 要求页面必须在服务器打开
- 5.跟随前后端请求自动携带
  - 只要 cookie 空间中有内容时
  - 会在该页面和后端交互的过程中自动携带
- 6.前后端操作
  - 前段可以使用JS操作 cookie
  - 任何一个后端语言都可以操作 cookie
- 7.存储依赖域名
  - 哪一个域名存储,哪一个域名使用
  - 不能跨域名通讯

4.本地存储的区别

1.出现时间
- cookie: 有JS 的时候就存在了
- storage: H5 出现以后才有
2.存储大小
- cookie: 4k 左右
- storage: 20M 左右
3.前后端交互
- cookie: 会跟随页面的请求自动携带
- storage: 不会跟随请求自动携带
4.过期时间
- cookie:默认是会话级别，可以手动设置过期时间
- storage:不能手动设置
5.前后端粲作
- cookie:前后端语言都能操作
- storage:只能由Js操作

5. localStorage 和 sessionStorage区别和共同点

1.过期时间
- localStorage:永久存储,除非手动删除
- sessionStorage:暂时存储
2.跨页面通讯
- localStorage:直接跨页面通讯
- sessionStorage:只能是当前窗口(页面) 跳转的页面才能通讯
3.共同点:
- 只能存储字符串,不能存储复杂的数据类型

(JS基础)BOM 学不会?

BOM

定义

核心

获取浏览器窗口的尺寸

浏览器的弹出层

浏览器的地址信息 (location)

浏览器的历史记录 (history)

BOM的事件

浏览器的本地存储

1.localStorage

2.sessionStorage

3.cookie

4.本地存储的区别

5. localStorage 和 sessionStorage区别和共同点