webAPI第七天

资源加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

window load 事件

load 事件，监听整个页面资源，给 window 加

     scrollWidth  获取元素实际宽度或滚动的距离大小，不包含 滚动条 大小 
      scrollHeight 获取元素实际高度，整个可以滚动的区域的高度，不包含滚动条
      scrollTop   获取元素内容往上滚出去看不到的距离
      scrollLeft   获取元素内容往左、滚出去看不到的距离
      
      小细节  PC端的滚动条大小 17px
      小细节 移动端的滚动条 不占大小
      
      const scrollDom = document.querySelector('.scroll-dom');
      // 输出它宽度高度
      console.log(scrollDom.scrollWidth);
      // console.log(scrollDom.scrollHeight);

      // 获取当前容器滚动了的距离
      scrollDom.addEventListener('scroll', function () {
        // console.log(this.scrollTop);// 获取当前容器的滚动距离
        console.log(this.scrollLeft); // 获取当前容器的滚动距离
      });

offset家族

offsetTop和offsetLeft：

带有定位的父级，如果都没有则以文档左上角为准

offsetWidth和offsetHeight：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetWidth  获取元素的宽度 包含这滚动条,边框
offsetHeight 获取元素的高度 包含这滚动条，边框
offsetLeft   获取定位了的父元素的 水平距离 左偏移 
offsetTop    获取定位了的父元素的 垂直距离 上偏移
没有父元素则为body

client家族

clientTop      获取元素上边框大小  
clientWidth    获取可视区域的宽度（不包含滚动条）
clientHeight    获取可视区域的宽度（不包含滚动条）
clientLeft     获取元素左边框的大小

屏幕大小改变事件 resize（window）

1 rem + flexible.js (resize)

2 响应式实时显示当前的页面宽度和种类

// 页面大小发生变化了就会触发的事件,用 resize window来绑定
      window.addEventListener('resize', function (event) {
        console.log('页面大小发生变化了');
 // 移动端屏幕适配 rem   淘宝js库，flexible.js 作用 设置html的字体大小 为当前页面的宽度的十分之一
        // 获取当前页面的宽度
        console.log(document.body.offsetWidth);
        // 设置页面html标签的字体大小为屏幕的十分之一
        document.documentElement.style.fontSize =
          document.body.offsetWidth / 10 + 'px';

        // 响应式布局的时候  发一个js文件  方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
        const width = document.body.offsetWidth;

swiper

swiper : 第三方的插件

根据文档或者教程来使用它即可-查询字典来使用！！

Window对象

BOM(Browser Object Model ) 是浏览器对象模型

window 对象下包含了 navigator、location、document、history、screen 5个属性

延时器

指定时间延时执行一次

setTimeout

cleartimout

      // 延时器 - 只会执行一次而已
      let timeid = setTimeout(function () {
        console.log('猜猜我是谁');
      }, 5000);5秒
      // 取消延时器
      clearTimeout(timeid);

location对象

  1 使用a标签 href 属性 可以实现页面跳转
  2 在js中，也可以直接跳转  location.href 来跳转
  3 location.href 也可以实现刷新 location.href = location.href;
  4  location.reload(true);// true 强制刷新！
  5 search 后一个阶段就会用到它 了  获取 url上 ？ 后面一串字符  /17-location.html?a=1&b=2
    6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index  #/index
      
              刷新功能
        location.href = location.href; // 刷新功能

        reload实现刷新
        location.reload(true);// true 强制刷新！

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：通过 userAgent 检测浏览器的版本及平台

知道当前用户的系统版本和浏览器版本

根据不同的用户的设备来响应不同的服务

如果你是安卓手机给你下载apk手机软件的地址

如果你是苹果手机给你提示自己回到app store

如果你pc端响应pc页面

如果你移动端响应移动端页面

histroy对象

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

操作和浏览器上的前进后退一样功能

back()后退上一页

forword()前进一页

go()

go(1) 前进1个页面

go(-1) 后退1个页面

递归

1 对于初学者来说高级编程技巧

2 代码不多，思路绕（初学者都会在这个上面采坑花费很多时间才可以掌握！！！）

webAPI、Window对象