五大对象

一.window对象

1.window对象介绍

window对象:浏览器窗口,是js中的顶级对象,一切默认全局函数和全局变量都是window的成员(属性+方法)

只要是window对象的成员,使用时一律可以省略window

window对象有一个特殊的属性叫做top,指向window本身(变量名不能用top)无法被覆盖 (*声明变量尽量要规范,不要用标准属性作为变量名)

2.window对象两个方法

打开窗口 window.open()

第一个参数: url网址
//第二个参数: 相当于a标签target属性.默认值_blank:新窗口  _self:当前窗口
//第三个参数: 设置新窗口样式
//第四个参数: 是否替换当前的历史记录. true:替换   false:不替换
    window.open('http://www.baidu.com', '_blank', 'top=200,left=200,width=300,height=300')

关闭窗口 window.close()

3.window对象事件

window.onload = function(){} *加载事件: DOM树+外部资源加载完毕后执行

window.onbeforeunload = function (){} *关闭事件:页面关闭之前执行(一般用于存储数据)

二.location对象

location对象:浏览器地址栏url

1.重点掌握 :location.href = 'url'

2.三个方法

  location.assign('url')   :跳转页面,可以回退
  location.replace('url')  :替换页面,不可以回退
  location.reload()        :刷新网页,相当于F5(一般用于移动端)

三.history对象

history对象: 历史记录

    history.back() : 返回上一页
    history.forward() : 前进下一页
    history.go(数字) : 跳转指定页面 
         history.go(0): 刷新
         history.go(正数): 前进 1:前进1页  2:前进2页
         history.go(负数): 回退 -1:回退1页  -2:回退2页

四.navigator对象

navigator对象: 用户信息

navigator.userAgent : 用户代理

五.screen对象

screen:用户电脑屏幕

存储对象

一.localStorage

1.localStorage : 本地存储

应用场景:免登陆

2.语法：

        存数据 ：  localStorage.setItem('属性名',属性值)
        取数据 ：  localStorage.getItem('属性名')
        删数据 :   localStorage.removeItem('属性名')
        清空数据 : localStorage.clear()

3.注意点：

3.1 localStorage会永久存储,数据存入硬盘中,一直存在.

3.2 localStorage只能存储字符串类型数据,如果是其他类型,编译器会自动转成字符串.

二.sessionStorage

1.sessionStorage : 会话存储

应用场景:页面间传值

2.语法：

        存数据 ：  sessionStorage.setItem('属性名',属性值)
        取数据 ：  sessionStorage.getItem('属性名')
        删数据 :   sessionStorage.removeItem('属性名')
        清空数据 : sessionStorage.clear()

3.注意点：

3.1 sessionStorage会临时存储,数据存入内存中,只要页面关闭就会消失.

3.2 sessionStorage只能存储字符串类型数据,如果是其他类型,编译器会自动转成字符串.

三.localStorage和sessionStorage的区别(异同点)

相同点:作用一致,都是存储数据

不同点:存储方式不同

            localStorage: 硬盘存储
            sessionStorage: 内存存储

JSON格式

1.JSON是什么: 是一种数据格式，本质是字符串

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

2.JSON作用 : 解决数据跨平台兼容性(跨平台数据传输)

在实际开发中,我们前端要经常与服务器(后端)进行数据交互。而前端与后端编程语言不同。

前端： js , 后端： java、c++ 、 php 、 python 、 .net 、 c# 、 go 等等.不同的编程语言数据类型不一致。无法互通的。为了可以让不同的编程语言之间可以进行数据交互，后来人们发明了一种所有编程语言都通用的格式：叫做 JSON 。

3.JSON语法 :

     json -> js : let jsObj = JSON.parse( json格式 )
     js -> json : let jsonStr = JSON.stringify( js对象 )
    */

4.案例

   let obj = {
                name: 'ikun',
                age: 30,
                sex: '男'
            }
            //存对象
            document.querySelector('.btn1').onclick = function () {
                // jsobj转换为json
                let json = JSON.stringify(obj)
                //会话存储
                sessionStorage.setItem('json', json)

                //简写 
                // sessionStorage.setItem('json', JSON.stringify(obj))

            }
            //取对象
            document.querySelector('.btn2').onclick = function () {
                //取对象
                let json = sessionStorage.getItem('json')
                // json转换为jsobj
                let js = JSON.parse(json)
                console.log(js)
                //简写
                //let js = JSON.parse(sessionStorage.getItem('json'))
                // console.log(js)
            }

三大家族

offset家族 : 获取元素 ‘自身’ 的真实宽高和真实位置

  offsetWidth / offsetHeight : 获取 width+padding+border

  offsetLeft / offsetTop : 获取 左/上 外边框 到定位父元素  左/上 内边框距离

scroll家族 : 获取元素 ‘内容’ 的真实宽高和位置

scrollWidth / scrollHeight : 获取内容的宽高

scrollLeft / scrollTop : 内容的位置（就是滚动条滚动的距离）

3.client家族 : 获取元素 ‘可视区域’ 宽高和位置

      clientWidth / clientHeight : 可视区域大小
  
      clientLeft / clientTop : 可视区域位置（就是左边框 和 上边框 宽度）

2.获取页面滚动距离

/* 获取网页滚动距离 1.给页面注册滚动事件 : window.onscroll 2.获取页面滚动距离 : document.documentElement.scrollTop */

webAPI 五大对象和三大家族