DOM- 网页特效篇

NIEandyou
247 阅读5分钟

滚动事件和加载事件

01-load和DomContentLoaded事件

元素的大小和位置

scroll家族

滚动事件

滚动事件是指当页面进行滚动时触发的事件

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

image.png 给 window 或 document 添加 scroll 事件

加载事件

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

有些时候需要等页面资源全部处理完了做一些事情

老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

事件名：load

监听页面所有资源加载完毕： 给 window 添加 load 事件

image.png

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕： 给 document 添加 DOMContentLoaded 事件

image.png

页面滚动事件如何添加？

scroll

监听整个页面滚动给 window 或 document 加

加载事件有哪两个？如何添加？

load 事件

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

DOMContentLoaded

给 document 加,当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

元素的大小和位置

通过scroll系列的相关属性可以用与获取内容区域的宽高，滚动的距离

**使用场景：**我们想要页面滚动一段距离，比如：100px之后，人某个元素显示隐藏，那就需要知道页面滚去了都是距离进行判断处理--》scroll就可以用来检测页面滚动的距离

1.scrollWidth 和 scrollHeight ：获取元素内容区域的高度

1.页面滚动 使用window.addEventListener('scroll')

2.页面的滚动距离 document.documentElement.scrollTop

获取高度 image.png

         
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .sc {
        width: 300px;
        height: 300px;
        background-color: aqua;

        /* 滚动条 */
        overflow: scroll; 
        overflow-x: scroll;
      }
    </style>
   
</head>
<body>
    <div class="sc">
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
      <h1>26</h1>
      <h1>27</h1>
      <h1>28</h1>
      <h1>29</h1>
      <h1>30</h1>
    </div>
      <script>
        //1. scrollWidth不包含滚动条的大小
        //2. scrollWidth等于容器滚动的大小
          const sc = document.querySelector('.sc')
          //输出它的高度
          console.log(sc.scrollWidth);
          //输出它的高度
          console.log(sc.scrollHeight);
      </script>
</body>

** 获取垂直方向滚动的距离** image.png

         
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .sc {
        width: 300px;
        height: 300px;
        background-color: aqua;

        /* 滚动条 */
        overflow: scroll; 
        overflow-x: scroll;

     
      }
    </style>
   
</head>
<body>
    <div class="sc">
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
      <h1>26</h1>
      <h1>27</h1>
      <h1>28</h1>
      <h1>29</h1>
      <h1>30</h1>
    </div>
      <script>
     
          const sc = document.querySelector('.sc')
          //获取当前容器的滚动距离
          sc.addEventListener('scroll',function(){
            console.log(this.scrollTop);
            
          })
      </script>
</body>

获取水平方向滚动的距离 image.png

         
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .sc {
        width: 300px;
        height: 300px;
        background-color: aqua;

        /* 滚动条 */
        overflow-x: scroll;
        /* 让文字不要换行 */
        white-space: nowrap;
     
      }
    </style>
   
</head>
<body>
    <div class="sc">
     asdfqwfqwfqwdqwdqwdqwdq
     wdqwdwqdqwdfqwfqwfqwdqwdq
    </div>
      <script>
     
          const sc = document.querySelector('.sc')
          //获取当前容器的滚动距离
          sc.addEventListener('scroll',function(){
            //设置水平方向的滚动
            console.log(this.scrollLeft);

          })
      </script>
</body>

小结:

  1. 页面的滚动距离使用 window.addEventListener('scroll')事件

  2. 页面的滚动距离 document.documentElement.scroll

  3. 元素滚动 dom.addEventListener('scroll')

  4. 获取元素的滚动距离 . this.scrollTop

. this.scrollLeft

  1. scrollWidth 整个可以滚动区间的宽度

  2. scrollHeight 整个可以滚动的区间的高度

  3. 小细节 PC端的滚动条的大小 17px

  4. 小细节 移动端的滚动条不占大小

~~

offset家族

使用场景：

  前面案例滚动多少距离，都是我们自己算的，最好是页面
  
  滚动到某个元素，就可以做某些事。
  
  简单说，就是通过js的方式，得到元素在页面中的位置
  
  这样我们可以做，页面滚动到这个位置，就可以返回
  
  顶部的小盒子显示…

image.png

image.png

获取宽高：

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

offsetWidth和offsetHeight

获取位置：

获取元素距离自己定位父级元素的左、上距离

offsetLeft和offsetTop 注意是只读属性

image.png

获取宽高

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        .of {
          width: 300px;
          height: 300px;
          background-color: aqua;
  
          overflow: scroll;
         margin-left: 10px;
        }
        
      </style>
</head>
<body>
    <div class="parent">
        <h1>标题</h1>
        <div class="of"></div>
    </div>
   
    <script>
        const of = document.querySelector('.of')

        //获得宽度和高度 包含着滚动条的大小
        console.log(of.offsetWidth); //300  
        console.log(of.offsetHeight); //300
        

    </script>    
</body>

获取位置

image.png

    <div class="parent">
        <h1>标题</h1>
        <div class="of"></div>
    </div>
   
    <script>
        const of = document.querySelector('.of')

        //获取当前元素距离  定位了的父元素的大小(如果找不到定位的父元素 就相当于页面计算)
        console.log(of.offsetTop);
        console.log(of.offsetLeft);

    </script>    
</body>

获取当前元素距离 定位了的父元素的大小 image.png

    <div class="parent">
        <h1>标题</h1>
        <div class="of"></div>
    </div>
   
    <script>
        const of = document.querySelector('.of')

        //获取当前元素距离  定位了的父元素的大小(如果找不到定位的父元素 就相当于页面计算)
        console.log(of.offsetTop);
        console.log(of.offsetLeft);

    </script>    
</body>

小结: offset家族
  1. offsetWidth 获取元素的宽度 包含这滚动条
  2. offsetHeight 获取元素的高度 包含这滚动条
  3. offsetLeft 获取定位了的父元素的 水平距离 左
  4. offsetTop 获取定位了的父元素的 垂直距离 上

client家族

image.png

获取宽高：

获取元素的可见部分宽高（不包含边框，滚动条等）

clientWidth和clientHeight

获取位置：

获取左边框和上边框宽度

clientLeft和clientTop 注意是只读属性

image.png

        .cli{
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 100px auto;

            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="cli"></div>
    <script>
        const cli = document.querySelector('.cli')
        //获取宽高
        console.log(cli.clientWidth); //不包含滚动条
        console.log(cli.clientHeight);//不包含滚动条
    </script>
</body>

当此时里面有内容 且超出滚动条可视区域

1.gif

        .cli{
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 100px auto;

            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="cli">
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>6</h1>
        <h1>7</h1>
        <h1>8</h1>
        <h1>9</h1>
        <h1>10</h1>
        <h1>11</h1>
        <h1>12</h1>
        <h1>13</h1>
        <h1>14</h1>
        <h1>15</h1>
        <h1>16</h1>
        <h1>17</h1>
        <h1>18</h1>
        <h1>19</h1>
        <h1>20</h1>
    </div>
    <script>
        const cli = document.querySelector('.cli')
        //获取宽高
        console.log(cli.clientWidth); //不包含滚动条
        console.log(cli.clientHeight);//不包含滚动条
    </script>
</body>

**

三大家族总结**

  • scrollWidth    获取容器的宽度(包含滚动的区域)内容会撑大
offsetWidth    获取可视区域的宽度(包含滚动条)
clientWidth    获去可视区域的宽度(不包含滚动条)

scrollLeft     获取左侧滚动的距离
offsetLeft     获取已经定位的父级元素的左距离
clientLef      获取边宽的大小

image.png

image.png

页面（屏幕）大小改变事件

2.gif

        .cli{
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 100px auto;

            overflow: scroll;
        }
        div{
            width: 1rem;
            height: 1rem;
            background-color:aqua;
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div class="cli">
      h1
    </div>
    <script>
        //页面大小发生了就会触发的事件   resize'  window 来绑定
      window.addEventListener('resize',function(event){
        console.log('页面大小发生变化了');
        
        console.log(document.body.offsetWidth);

        // 移动端屏幕适配 rem 淘宝js库  flexible.js  作用 设置html
        // 的字体大小为当前页面宽的十分之
        document.documentElement.style.fontSize=document.body.offsetWidth/10+'px';
      })
        
    </script>
</body>

定时器---延时器

3.gif

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

取消延时器 -- 刚刚开启就取消

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

        //取消延时器
        clearTimeout(timeId);
    </script>
</body>

延时器需求 ---小案例关闭广告

需求：5秒钟后广告自动消失 分析：

  1. 设置延时函数
  2. 隐藏元素

5.gif

         div{
            width: 300px;
            height: 300px;
            background-color: #cccc;
            border-radius: 30px;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        } 
    </style>
</head>
<body>
     <div>骆驼香烟：为了买这包骆驼香烟，我走了一英里!!!</div> 
    <script>
     
     const div = document.querySelector('div')

        setTimeout(function( ) {
           div.style.display='none'
        }, 5000);

    </script>
</body>

递归 1. image.png

    <div>
        <p>
            <span>
                <a href="">
                    <button></button>
                </a>
            </span>
        </p>
    </div>
    <!-- 递归
    1.一个函数调用自己
    2.使用场景，可以打印出 一个dom元素的所有祖先元素

    这个函数接收一个参数，= dom 
    如果这个dom元素有父元素，就继续调用自己函数 -->

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

        //调用函数
        getParent(button);
        function getParent(dom){
            console.log(dom);
            if(dom.parentNode){
                // 如果有父元素
                getParent(dom.parentNode);
            }else{
                console.log('结束了');
            }
        }
    </script>
</body>

2.延时器 递归来实现定时器功能

image.png

    <script>
        
        // 递归 自己调用自己  函数自己调用自己 
        let index=0;
        function func() {
          console.log(++index);
          setTimeout(func,1000);
        };
        func();
  
      </script>
</body>

location

实用a标签 href 属性 可以实现页面跳转

  1. 在js中 ，也可以直接跳转 location.href 来调整

  2. location.href 也可以实现刷新功能

3.location.reload(true);//强制刷新

5.search 后一个阶段就会用到 获取url上 ？ 后面的一串字符

（1） 问问.gif

    <button>跳转到百度</button>
    <script>
        //1.
        const button = document.querySelector('button');
        button.addEventListener('click',function(){
             location.href="https://www.baidu.com/";  
        })

    </script>
</body>

（2）

当地.gif

    <button>跳转到百度</button>
    <script>

        const button = document.querySelector('button');
        button.addEventListener('click',function(){

            //刷新功能 相当于自己跳转自己
             location.href=location.href
            
        })
    </script>
</body>

（3） location.reload(true);//强制刷新

当地.gif

    <button>跳转到百度</button>
    <script>

        const button = document.querySelector('button');
        button.addEventListener('click',function(){

            //括号里面传入true 表示强制刷新
             location.reload(true);
            
        })
    </script>
</body>

（4）

当地.gif

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