加载,三大家族,延时器,递归location对象navigator对象history对象

龙骑士-黎明

于 2022-06-06 13:59:42 发布

阅读量111

点赞数

分类专栏：工作-笔记前端开发-js 文章标签： javascript vue.js 前端

原文链接：https://juejin.cn/post/7087114992821993509

版权

前端开发-js 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

工作-笔记

12 篇文章 0 订阅

订阅专栏

加载事件

有很多业务和功能 都需要使用到外部资源（外部css js 图片 视频）
      我们希望等待资源都加载回来，才去做其他事情
      写代码的时候，我们会把所有的代码 都写在  window load事件中来确保 资源全部都可以使用 
复制代码

  <script>
      window.addEventListener('load', function () {
        console.log('load 标签加载完毕-标签对应外部资源加载完毕');
      });
      // DOMContentLoaded 
      // 页面的标签 都加载完毕就触发了，不需要等待标签的内容回来
      // video标签一生成， 事件就触发 
      // load事件等待 vide标签生成了，同时 video标签内的视频也加载回来 才触发 

      // video加载 分两部
      // 只是加载标签而已 很快 DOMContentLoaded    快
      // 会去加载 标签对应的视频 比较慢  load 慢
      document.addEventListener("DOMContentLoaded",function () {
        console.log("DOMContentLoaded 标签加载完毕就触发了");
      })
    </script>
复制代码

案例对比两者直接的差别

  </style>
    <!-- 以前写js 习惯写在head标签中 -->
    <!-- <script>
      // 等待标签加载完毕了，才去获取dom元素
      document.addEventListener('DOMContentLoaded', function () {
        const h1 = document.querySelector('h1');
        console.log(h1);
        h1.innerText = '我们自己修改的';
      });
      // js先执行，但是 dom元素还没有开始加载
    </script> -->
  </head>
  <body>
    <h1>大标题</h1>
     <img
      src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
      alt=""
    /> 
    <!-- 
      load 作用 
      我希望  在h1标签上输出一张图片的高度
     -->
    <script>
      window.addEventListener('load', function () {
      // 等待图片完全加载了 内容也回来， 才触发,在上面这行代码里面可以获取到高度
       const img = document.querySelector('img');
      // 获取图片标签的宽度
       console.dir(img.height); 
          // 0 单独把获取高度的这两行代码放在外面高度为0 因为 代码执行到这里的时候 图片的内容还没有回来

      // document.querySelector("h1").innerHTML=img.height;
       });

      // 现在建议把代码 写在 </body> 上面 ， 先等待dom标签加载，然后才去获取dom元素
    </script>
  </body>
复制代码

三大家族scroll ,offset,client

scroll家族

 <script>
      /* 
      scrollWidth  不包含 滚动条 大小 
      scrollWidth  等于容器可以滚动的大小 
       */
      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); // 获取当前容器的滚动距离
      });
      /* 
      1 页面滚动 使用  window.addEventListener("scroll") 事件
      2 页面的滚动距离 document.documentElement.scrollTop

      1 元素滚动 dom.addEventListener("scroll")
      2 获取元素滚动的距离
        dom.scrollTop
        dom.scrollLeft

      3 scrollWidth 整个可以滚动的区间的宽度
      4 scrollHeight 整个可以滚动的区域的高度 

      小细节  PC端的滚动条大小 17px
      小细节 移动端的滚动条 不占大小 
       */
    </script>
复制代码

offset家族

 <script>
      const offsetDom = document.querySelector('.offset');

      // 获取宽度和高度 包含这滚动条的大小 
      console.log(offsetDom.offsetWidth);// 300 
      console.log(offsetDom.offsetHeight);// 300
      // console.log(offsetDom.scrollWidth); // 283
      // console.log(offsetDom.scrollHeight);// 283 

      // 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
      console.log(offsetDom.offsetLeft);
      console.log(offsetDom.offsetTop);
      /* 
      总结 offset家族
      1 offsetWidth  获取元素的宽度 包含这滚动条
      2 offsetHeight 获取元素的高度 包含这滚动条
      3 offsetLeft 获取定位了的父元素的 水平距离 左 
      4 offsetTop 获取定位了的父元素的 垂直距离 上
       */
    </script>
复制代码

client家族

 <script>
      const clientDom = document.querySelector('.client');
      // 宽度和高度
      console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
      console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）

      // 获取边框的大小
      console.log(clientDom.clientLeft); // 左边框
      console.log(clientDom.clientRight); // 有没有？
      console.log(clientDom.clientTop); // 上边框  
    </script>
复制代码

总结

 scollWidth     获取容器的宽度（包含滚动的区域）  scrollHeight 获取容器的高度 （包含滚动的区域）
 offsetWidth    获取可视区域的宽度（包含滚动条）   offsetHeight 获取元素的高度 包含这滚动条
 clientWidth    获取可视区域的宽度（不包含滚动条） clientHeight    获取可视区域的高度（不包含滚动条）

  scrollLeft    获取左侧滚动的距离                scrollTop   获取顶部滚动的距离 
  offsetLeft    获取和已经定位了的父级元素的左距离  offsetTop  获取和已经定位了的父级元素的上面距离
  clientLeft    获取左边框的大小                  clientTop   获取上边框的大小 
复制代码

屏幕大小改变事件

页面大小发生变化了就会触发的事件 resize window来绑定


    <script>
      // 页面大小发生变化了就会触发的事件 resize window来绑定
      window.addEventListener('resize', function (event) {
        console.log('页面大小发生变化了');
      });
    </script>

复制代码

rem

 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 1rem;
        height: 1rem;
        background-color: aqua;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div>div</div>
    
      // 页面大小发生变化了就会触发的事件 resize window来绑定
      window.addEventListener('resize', function (event) {
        // 移动端屏幕适配 rem   淘宝js库，flexible.js  作用  设置html的字体大小 为当前页面的宽度的十分之一
        // 设置页面html标签的字体大小为屏幕的十分之一
        document.documentElement.style.fontSize =
          document.body.offsetWidth / 10 + 'px';
      });
    </script>
  </body>
复制代码

响应式布局js文件

方便告诉我们屏幕的种类和宽度

<script>
const width = document.body.offsetWidth;

        if (width > 1200) {
          document.querySelector('title').innerText = `大屏幕 ${width}`;
        } else if (width > 992) {
          document.querySelector('title').innerText = `中等屏幕 ${width}`;
        } else if (width > 768) {
          document.querySelector('title').innerText = `小屏幕 ${width}`;
        } else {
          document.querySelector('title').innerText = `极小屏幕 ${width}`;
        }
      });
    </script>
复制代码

swiper使用

https://www.swiper.com.cn/usage/index.html
1 下载swiper对应的文件 - css + js 
  2 分布引入他们
  3 拷贝别人的固定结构
  4 拷贝写好的swiper 初始化js代码
复制代码

延时器

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

    </script>
复制代码

递归

一个函数调用自己

<body>
    <div>
      <p>
        <span
          ><a href=""> <button></button> </a
        ></span>
      </p>
    </div>
    <script>
      /* 
      递归
      1 一个函数调用自己  

      2 使用场景
        有一个函数，可以打印出 一个dom元素的所有祖先元素 
        不可能提前知道 这个a标签有多少个父元素 

        这个函数接收一个参数，= dom 
        如果这个dom元素有父元素，就继续调用自己函数
       */
      // let index = 0;
      // function func() {
      //   index++;
      //   console.log(index);
      //   func();
      // }

      // func();

      const button = document.querySelector('button');

      getParent(button);
      function getParent(dom) {
        console.log(dom);
        if (dom.parentNode) {
          // 如果有父元素
          getParent(dom.parentNode);
        } else {
          console.log('结束啦');
        }
      }
    </script>
  </body>
复制代码

使用延时器实现定时器(递归)

 <script>
      // 定时器 不主动清除，定时器永远执行下去
      // 延时器 只会执行一次
      // 延时器实现定时器的功能
      // 在延时器 又开启一个延时器，
      // 递归 自己调用自己  函数自己调用自己 
      let index=0;
      function func() {
        console.log(++index);
        setTimeout(func,1000);
      };
      func();
    </script>
复制代码

js执行机制

location对象

 <body>
    <button>跳转到百度</button>
    <script>
      // 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
      const button = document.querySelector('button');
      button.addEventListener('click', function () {
        // location.href="http://www.baidu.com";
        // console.log(location.href);// http://127.0.0.1:5500/17-location.html
        // 刷新功能
        // location.href = location.href; // 刷新功能
        // reload实现刷新
        // location.reload(true);// true 强制刷新！ 
        console.log(location.hash);
      });
    </script>
  </body>
复制代码

navigator对象

作用 检测当前浏览器的版本和型号
       手机端来说，  安卓手机 可以直接下载apk 手机软件的 
                     ios 手机来说 不可以直接下载手机软件 必须要回到苹果的应用商店中来下载
       安卓手机来说 点击 下载软件 给它下载apk
       iphone手机来说 点击 下载软件 可能只需给苹果手机一个提示 


       可以识别出 当前的访问设备是 pc端还是移动端
       后台根据 当前用户的设备类型 来返回 对应的平台的页面
       pc端来访问我的页面 我给你显示pc端的页面
       移动端来访问我的页面 我给你显示移动端的页面 
       直接找别人写好的代码 检测即可,也可以自己花时间写

复制代码

history对象

 <body>
    <a href="http://www.baidu.com">百度</a>
    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
      const forward = document.querySelector('.forward');
      forward.addEventListener('click', function () {
        // history.forward();
        history.go(1); // 前进一个记录
      });
      const back = document.querySelector('.back');
      back.addEventListener('click', function () {
        // history.back();
        history.go(-1); // 后退一个记录
      });
    </script>
  </body>