JavaScript复习3.0

JS复习1.0主要为js基础语法中较重要的知识如数组、日期、对象等：详见JavaScript复习1.0
JS复习2.0主要为Web APIs中的DOM（页面文档对象模型）详见JavaScript复习2.0
JS复习3.0主要为Web APIs中的BOM（浏览器对象模型）与offset、client、scroll家族系列

JS复习3.0

BOM

1. window对象的使用

window.onload 窗口加载事件：
window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成(包括图像、脚本文件、CSS
文件等)会触发该事件
window.onload = function() { }
window.addEventListener('load', function() { })

document.addEventListener('DOMContentLoaded',function(){}):
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载，加载速度比 load更快。若页面的图片很多的话, 从用户访问到onload触发时间较长, 此时用 DOMContentLoaded 事件比较合适


window.onresize调整窗口大小事件:
window.addEventListener("resize",function(){});:
只要窗口大小发生像素变化，就会触发这个事件,可利用此事件完成响应式布局 ，window.innerWidth 当前屏幕的宽度

定时器:
setTimeout(function[, delay, arg1, arg2, ...]):
function：是你想要在到期时间 (delay毫秒) 之后执行的函数
delay 可选：延迟的毫秒数 (一秒等于 1000 毫秒)
arg1, …, argN 可选：附加参数，一旦定时器到期，它们会作为参数传递给function
取消定时器：clearTimeout(timeoutID)timeoutID为设置定时器时赋值给的变量

setInterval :
设置定时器：var intervalID = setInterval(func, [delay, arg1, arg2, …]);
清除定时器： clearInterval( intervalID );
注意： setInterval 每隔delay时间就会调用一次回调函数，而setTimeout只可调用一次回调函数就停止定时器

2. location对象的使用

window 对象提供了一个 location 属性用于获取或设置窗体的 URL

属性

location.hash:
location 接口的 hash 属性返回一个 USVString，包含 URL 标识中的 ‘#’ 和 后面 URL 片段标识符

<a id="myAnchor" href="/en-US/docs/Location.href#Examples">Examples</a>
<script>
  var anchor = document.getElementById("myAnchor");
  console.log(anchor.hash); // 返回'#Examples'
</script>

location.href:获取或设置整个url
location.search:返回参数，即URL 标识中的 ‘?’ 以及跟随其后的一串 URL 查询参数（注意获取的字符串有包含？）

方法

location.assign(url):
可跳转到url页面，此方法可后退到原来页面，即记录浏览历史
location.replace(url):
以给定的url来替换当前页面的url, 此方法不会将当前页面保存到会话历史中（session History），故用户点击回退按钮时不会跳转到原来页面，即不记录浏览历史
location.reload(boolean) :
刷新当前页面，相当于按f5。若括号里传值为 true 时，将强制 Firefox 从服务器加载页面资源。但是在其他浏览器中任何参数都是无效的

 var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            console.log(window.location);
           location.assign('https://www.baidu.com');
            // 不记录浏览历史，所以不可以实现后退功能
           location.replace('https://www.baidu.com');
           location.reload(true);  //刷新
        })

提取url的参数

原生js方法提取传入的url参数，返回的为对象形式

function getParams(url){
    let res = {}
    //判断url中是否有请求参数，若有则提取？后面部分
    let arr = url.indexOf('?') > -1 ?url.split('?')[1]:[]
    arr = arr.split('&')
    arr.forEach(v=>{
        let params = v.split('=')
        res[params[0]] = params[1]
    })
    return res
}

直接获取浏览器窗口的url，使用location.search方法获取请求参数

   function geteasylly() {
        //先去掉？
        let res= {}
        //去掉参数的?
        let params = location.search.substring(1); 
       let arr = params.split('&')
         console.log(arr);
       for (let  v of arr){
        res[v.split('=')[0]] = v.split('=')[1]
       }
       return res
      }

3. navigation对象的使用

navigator 对象包含有关浏览器（包括手机端）的信息，通过console.log(navigator)j即可查看，它有很多属性，最常用的是 userAgent，该属性可以返回 user-agent 头部的值，可用来判断用户在哪个终端打开页面，实现跳转

  function whichTerminal() {
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
      )
    ) {
      //  i 表示不区分(ignore)大小写；
      window.location.href = ''; //手机
    } else {
      window.location.href = ''; //电脑
    }
  }

4. history对象的使用

Window.history是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口
使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转

window.history.back()：
可以实现后退功能，和用户点击浏览器回退按钮的效果相同
window.history.forward()：
向前跳转，如同用户点击了前进按钮
window.history.go(参数)：
用 go() 方法载入到会话历史中的某一特定页面(当前页面的相对位置标志为 0)，若go(1)相当于forward()，go(-1)相当于back()

鼠标事件获取坐标(返回值不带单位)

screenX :是 MouseEvent 的只读属性，返回事件发生时鼠标在全局（屏幕）中的水平坐标（偏移量）

备注： 在多屏显示的环境下，水平对齐的屏幕将被视为单个设备，因此 screenX 值的范围将增加到屏幕的组合宽度

screenY :是 MouseEvent 的只读属性，返回事件发生时鼠标指针相对于屏幕的垂直坐标

pageX：只读属性，返回的相对于整个文档(即页面)的 左边缘偏移量x（水平）坐标（计算时会加上滚动条的距离）

这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。

pageY：只读属性，返回的相对于整个文档(即页面)的上边缘偏移量y（水平）坐标（计算时会加上滚动条的距离）

offsetX： 相对于带有定位的父盒子的x坐标
offsetY： 相对于带有定位的父盒子的y坐标
clientX ：返回当事件被触发时鼠标指针相对于浏览器有效区域（不包含滚动条）的水平坐标
clientY： 返回当事件被触发时鼠标指针相对于浏览器有效区域（不包含滚动条）的垂直坐标

   <style>
      body {
        background-color: antiquewhite;
        width: 2000px;
        height: 100%;
      }
      .father {
        width: 500px;
        height: 400px;
        background-color: aqua;
        margin: auto;
      }
      .son {
        width: 400px;
        height: 300px;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <script>
      var son = document.querySelector('.son');
      son.addEventListener('click', function (e) {
        console.log('鼠标指针在屏幕水平偏移量：' + e.screenX);
        console.log('鼠标指针在屏幕垂直偏移量：' + e.screenY);
        console.log('鼠标指针相对整个文档的水平偏移量(会加上滚动条)：' + e.pageX);
        console.log('鼠标指针相对整个文档的垂直偏移量(会加上滚动条)：' + e.pageY);
        console.log('鼠标指针相对父元素的水平偏移量：' + e.offsetX);
        console.log('相对父元素的垂直偏移量：' + e.offsetY);
        console.log('相对当前浏览器有效区域的x坐标：' + e.clientX);
        console.log('相对当前浏览器有效区域的y坐标：' + e.clientY);
      });
    </script>

元素偏移量 offset 系列

使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等

offset的属性是只读属性，只能获取不能赋值；offset 系列获得的数值都不带单位

属性

HTMLElement.offsetParent：返回对最近的带有定位的祖先元素，若父级均无定位返回body
HTMLElement.offsetTop：返回当前元素的外边界相对于最近的带有定位的祖先元素顶部内边界的距离
HTMLElement.offsetLeft：返回当前元素相对于最近的带有定位的祖先元素左边框的距离
HTMLElement.offsetWidth：
以整数形式返回元素的布局宽度，包括padding、border、垂直滚动条的宽度（如果呈现）和内容宽度（不包括伪元素的宽度，如::beforeor 、::after）

注意：此属性会将值四舍五入为整数。如果您需要小数值，请使用 element.getBoundingClientRect()

HTMLElement.offsetHeight：以整数形式返回元素的高度，返回值包含padding+border+content+元素的水平滚动条的高度，不包含:before 或:after 等伪类元素的高度


offset 与 style 区别：

• style.width /height返回的是带有单位的字符串
• style.width /height 返回的值不包含padding和border （只有content）
• style 只能得到行内样式表中的样式值（就是写在HTML中的style属性，而不是css属性）
• style.width/height 是可读写属性，可以赋值
  综上，想更改元素宽高需用style,想获取元素宽高用offset
  
  

案例：模拟登录框拖拽

<script>
      //登录框id为login，表单名字id为title
      var login = document.querySelector('#login');
      var title = document.querySelector('#title');
      // 1.按下鼠标， 获得鼠标在登录框内的偏移坐标
      title.addEventListener('mousedown', function (e) {
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        //2.鼠标移动时把鼠标在页面中的坐标减去鼠标在登录框内的偏移坐标就是登录框的left和top值
        document.addEventListener('mousemove', move);
        function move(e) {
          login.style.left = e.pageX - x + 'px';
          login.style.top = e.pageY - y + 'px';
        }
        //3.鼠标弹起时移除鼠标事件
        document.addEventListener('mouseup', function () {
          document.removeEventListener('mousemove', move);
        });
      });
 </script>

元素可视区 client 系列

使用client系列相关属性来获取元素可视区的相关信息，动态获取该元素的边框大小、元素大小等

client的属性是只读属性，只能获取不能赋值；client 系列获得的数值都不带单位

Element.clientTop:获取元素上边框大小
Element.clientLeft:获取元素左边框大小
Element.clientHeight:对于没有定义 CSS 或者内联布局盒子的元素为 0；否则clientHeight = content+padding，不包括水平滚动条高度 (如果存在)、边框和外边距
Element.clientWidth：内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。否则clientWidth = content+padding，不包括border、 margin 和垂直滚动条的宽度

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 10px solid red;
        border-left: 20px solid red;
        padding: 10px;
      }
    </style>
        <script>
      var div = document.querySelector('div');
      console.log(div.clientWidth); //220
      console.log(div.clientTop); //10
      console.log(div.clientLeft); //220
      console.log(div.offsetWidth); //250
    </script>

元素滚动 scroll 系列

使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等（返回的数值不带单位）

属性

Element.scrollTop ：可读写，返回该元素被卷去的上侧距离，也可设置一个元素的内容垂直滚动的像素数px：element.scrollTop =50

警告： 在使用显示比例缩放的系统上，scrollTop、scrollLeft可能会提供一个小数。

Element.scrollLeft ：可读写，返回该元素被卷去的左侧距离，也可设置一个元素的内容水平滚动的像素数px：element.scrollLeft =50

注意如果这个元素的内容排列方向（direction）是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为 0。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数

Element.scrollWidth ：只读属性，包括由于 overflow 溢出而在屏幕上不可见的内容，不包含边框、外边距或垂直滚动条：scrollWidth=padding+content（包括被卷去而不可见的部分）+伪元素宽度

Element.scrollHeight ：只读属性，包括由于溢出导致的视图中不可见内容：scrollHeight=padding+content（包括被卷去而不可见的部分）+伪元素高度

Window.pageYOffset：只读属性，返回页面被卷去的上侧（头部）距离
Window.scrollTo()：滚动到文档中的一组特定坐标

案例1：返回顶部

  header {
        height: 250px;
        background-color: red;
        width: 1200px;
        margin: 20px auto;
      }
      main {
        height: 1200px;
        background-color: aqua;
        width: 1200px;
        margin: 20px auto;
      }
      .slider-bar {
        position: fixed;
        left: 50%;
        top: 100px;
        margin-left: 600px;
        width: 45px;
        height: 50px;
        background-color: pink;
        display: none;
      }

  <body>
    <div class="slider-bar">返回顶部</div>
    <header>头部</header>
    <main>主体</main>
    <script>
      //1. 获取元素
      var sliderbar = document.querySelector('.slider-bar');
      var main = document.querySelector('main');
      var headTop = main.offsetTop;
      sliderbar.addEventListener('click', function () {
       window.scrollTo(0, 0);
      });
      document.addEventListener('scroll', function () {
        if (window.pageYOffset < headTop) {
          sliderbar.style.display = 'none';
        } else {
          sliderbar.style.display = 'block';
        }
      });
    </script>

案例2：图片懒加载

原理：将页面中img标签的src设为空或加载时的图片，并给img标签统一自定义属性data-src用于存放图片的真实src，当检测到图片出现在窗口可视区后将data-src赋值给img的src属性实现图片懒加载

  <body>
    <img src="./load.gif" data-src="./run1.jpg" />
    <img src="./load.gif" data-src="./run2.jpg" />
    <img src="./load.gif" data-src="./run3.jpg" />
    <img src="./load.gif" data-src="./run4.jpg" />
    <img src="./load.gif" data-src="./run1.jpg" />
    <img src="./load.gif" data-src="./run2.jpg" />
    <script>
    //图片懒加载函数
      function lazyLoad() {
        let imgs = document.getElementsByTagName('img');
        if (!imgs.length) return;
        //页面可视区高度
        let viewHeight = document.documentElement.clientHeight;
        //页面被卷掉的高度
        let scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop;
        //若图片的offsetTop（即距离文档顶部的高度，会包含滚动条的卷去的高度）小于（viewHeight+scrollHeight），则图片开始出现在可视区，开始加载
        for (let i = 0; i < imgs.length; i++) {
          if (imgs[i].offsetTop < viewHeight + scrollHeight) {
            imgs[i].src = imgs[i].dataset.src;
          }
        }
      }
      // 初始化的时候执行一次加载图片的函数
      lazyLoad();
      
      //结合节流函数防止滚动时请求过于频繁
      function throttle(fn, delay) {
        let flag = false;
        let _throttle = function () {
          if (flag) return;
          flag = true;
          setTimeout(() => {
            fn.apply(this, arguments);
            flag = false;
          }, delay);
        };
        return _throttle;
      }
      window.addEventListener('scroll', throttle(lazyLoad, 800));
    </script>

刚开始加载只有第一张图显示：

页面滚动实现懒加载出现的图片：

参考资料

window.setTimeout MDN