• 前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（三）

    思维导图

    全选案例

    大按钮控制小按钮

    小按钮控制大按钮

    css伪类选择器checked

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     /* 选择被勾选的复选框 */
    11.     .ck:checked {
    12.       width: 20px;
    13.       height: 20px;
    14.     }
    15.   style>
    16. head>
    17.  
    18. <body>
    19.   <input type="checkbox" name="" id="" class="ck">
    20.   <input type="checkbox" name="" id="" class="ck">
    21.   <input type="checkbox" name="" id="" class="ck">
    22.   <input type="checkbox" name="" id="" class="ck">
    23. body>
    24.  
    25. html>

    勾选变大

    重点：

    完整代码：

    1. html>
    2.  
    3. <html>
    4.  
    5. <head lang="en">
    6.   <meta charset="UTF-8">
    7.   <title>title>
    8.   <style>
    9.     * {
    10.       margin: 0;
    11.       padding: 0;
    12.     }
    13.  
    14.     table {
    15.       border-collapse: collapse;
    16.       border-spacing: 0;
    17.       border: 1px solid #c0c0c0;
    18.       width: 500px;
    19.       margin: 100px auto;
    20.       text-align: center;
    21.     }
    22.  
    23.     th {
    24.       background-color: #09c;
    25.       font: bold 16px "微软雅黑";
    26.       color: #fff;
    27.       height: 24px;
    28.     }
    29.  
    30.     td {
    31.       border: 1px solid #d0d0d0;
    32.       color: #404060;
    33.       padding: 10px;
    34.     }
    35.  
    36.     .allCheck {
    37.       width: 80px;
    38.     }
    39.   style>
    40. head>
    41.  
    42. <body>
    43.   <table>
    44.     <tr>
    45.       <th class="allCheck">
    46.         <input type="checkbox" name="" id="checkAll"> <span class="all">全选span>
    47.       th>
    48.       <th>商品th>
    49.       <th>商家th>
    50.       <th>价格th>
    51.     tr>
    52.     <tr>
    53.       <td>
    54.         <input type="checkbox" name="check" class="ck">
    55.       td>
    56.       <td>小米手机td>
    57.       <td>小米td>
    58.       <td>￥1999td>
    59.     tr>
    60.     <tr>
    61.       <td>
    62.         <input type="checkbox" name="check" class="ck">
    63.       td>
    64.       <td>小米净水器td>
    65.       <td>小米td>
    66.       <td>￥4999td>
    67.     tr>
    68.     <tr>
    69.       <td>
    70.         <input type="checkbox" name="check" class="ck">
    71.       td>
    72.       <td>小米电视td>
    73.       <td>小米td>
    74.       <td>￥5999td>
    75.     tr>
    76.   table>
    77.   <script>
    78.     // 1. 获取大复选框
    79.     const checkAll = document.querySelector('#checkAll')
    80.     // 2. 获取所有的小复选框
    81.     const cks = document.querySelectorAll('.ck')
    82.     // 3. 点击大复选框  注册事件
    83.     checkAll.addEventListener('click', function () {
    84.       // 得到当前大复选框的选中状态
    85.       // console.log(checkAll.checked)  // 得到 是 true 或者是 false
    86.       // 4. 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
    87.       for (let i = 0; i < cks.length; i++) {
    88.         cks[i].checked = this.checked
    89.       }
    90.     })
    91.     // 5. 小复选框控制大复选框
    92.  
    93.     for (let i = 0; i < cks.length; i++) {
    94.       // 5.1 给所有的小复选框添加点击事件
    95.       cks[i].addEventListener('click', function () {
    96.         // 判断选中的小复选框个数 是不是等于  总的小复选框个数
    97.         // 一定要写到点击里面，因为每次要获得最新的个数
    98.         // console.log(document.querySelectorAll('.ck:checked').length)
    99.         // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
    100.         checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
    101.       })
    102.     }
    103.   script>
    104. body>
    105.  
    106. html>

    Dom事件进阶

    一、事件流

    1.1 事件流和两个阶段说明

    1.2 事件捕获

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     .father {
    11.       width: 500px;
    12.       height: 500px;
    13.       background-color: pink;
    14.     }
    15.  
    16.     .son {
    17.       width: 200px;
    18.       height: 200px;
    19.       background-color: purple;
    20.     }
    21.   style>
    22. head>
    23.  
    24. <body>
    25.   <div class="father">
    26.     <div class="son">div>
    27.   div>
    28.   <script>
    29.     const fa = document.querySelector('.father')
    30.     const son = document.querySelector('.son')
    31.     // 山东  济南  蓝翔   目标（pink老师）  捕获阶段
    32.     //  蓝翔  济南   山东   冒泡阶段
    33.     document.addEventListener('click', function () {
    34.       alert('我是爷爷')
    35.     }, true)
    36.     fa.addEventListener('click', function () {
    37.       alert('我是爸爸')
    38.     }, true)
    39.     son.addEventListener('click', function () {
    40.       alert('我是儿子')
    41.     }, true)
    42.  
    43.   script>
    44. body>
    45.  
    46. html>

    1.3 事件冒泡

    1.4 阻止冒泡

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     .father {
    11.       width: 500px;
    12.       height: 500px;
    13.       background-color: pink;
    14.     }
    15.  
    16.     .son {
    17.       width: 200px;
    18.       height: 200px;
    19.       background-color: purple;
    20.     }
    21.   style>
    22. head>
    23.  
    24. <body>
    25.   <div class="father">
    26.     <div class="son">div>
    27.   div>
    28.   <script>
    29.     const fa = document.querySelector('.father')
    30.     const son = document.querySelector('.son')
    31.     // 山东  济南  蓝翔   目标（pink老师）  捕获阶段
    32.     //  蓝翔  济南   山东   冒泡阶段
    33.     document.addEventListener('click', function () {
    34.       alert('我是爷爷')
    35.     })
    36.     fa.addEventListener('click', function () {
    37.       alert('我是爸爸')
    38.     })
    39.     son.addEventListener('click', function (e) {
    40.       alert('我是儿子')
    41.       // 组织流动传播  事件对象.stopPropagation()
    42.       e.stopPropagation()
    43.     })
    44.  
    45.   script>
    46. body>
    47.  
    48. html>

    1.4.2 阻止默认行为

    1.5 解绑事件

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <button>点击button>
    13.   <script>
    14.     const btn = document.querySelector('button')
    15.     // btn.onclick = function () {
    16.     //   alert('点击了')
    17.     //   // L0 事件移除解绑
    18.     //   btn.onclick = null
    19.     // }
    20.     function fn() {
    21.       alert('点击了')
    22.     }
    23.     btn.addEventListener('click', fn)
    24.     // L2 事件移除解绑
    25.     btn.removeEventListener('click', fn)
    26.   script>
    27. body>
    28.  
    29. html>

    鼠标经过事件的区别

    使用mouseover会有冒泡效果，当鼠标移动到子元素会触发mouseout事件，然后再由子元素冒泡还会触发mouseover事件。

    但使用mouseenter无冒泡效果，且当鼠标进过子元素不会触发mouseleave事件，只有完全离开父元素才会触发mouseleave事件。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     .dad {
    11.       width: 400px;
    12.       height: 400px;
    13.       background-color: pink;
    14.     }
    15.  
    16.     .baby {
    17.       width: 200px;
    18.       height: 200px;
    19.       background-color: purple;
    20.     }
    21.   style>
    22. head>
    23.  
    24. <body>
    25.   <div class="dad">
    26.     <div class="baby">div>
    27.   div>
    28.   <script>
    29.     const dad = document.querySelector('.dad')
    30.     const baby = document.querySelector('.baby')
    31.     dad.addEventListener('mouseenter', function () {
    32.       console.log('鼠标经过')
    33.     })
    34.     dad.addEventListener('mouseleave', function () {
    35.       console.log('鼠标离开')
    36.     })
    37.   script>
    38. body>
    39.  
    40. html>

    两种注册事件的区别

    二、事件委托

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <ul>
    13.     <li>第1个孩子li>
    14.     <li>第2个孩子li>
    15.     <li>第3个孩子li>
    16.     <li>第4个孩子li>
    17.     <li>第5个孩子li>
    18.     <p>我不需要变色p>
    19.   ul>
    20.   <script>
    21.     // 点击每个小li 当前li 文字变为红色
    22.     // 按照事件委托的方式  委托给父级，事件写到父级身上
    23.     // 1. 获得父元素
    24.     const ul = document.querySelector('ul')
    25.     ul.addEventListener('click', function (e) {
    26.       // alert(11)
    27.       // this.style.color = 'red'
    28.       // console.dir(e.target) // 就是我们点击的那个对象
    29.       // e.target.style.color = 'red'
    30.       // 我的需求，我们只要点击li才会有效果
    31.       if (e.target.tagName === 'LI') {
    32.         e.target.style.color = 'red'
    33.       }
    34.     })
    35.   script>
    36. body>
    37.  
    38. html>

    上面案例，不再遍历，无法获取序号i，

    使用自定义属性

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <div data-id="0">div>
    13.   <script>
    14.     const div = document.querySelector('div')
    15.     console.log(div.dataset.id) // 0 
    16.   script>
    17. body>
    18.  
    19. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>tab栏切换title>
    9.   <style>
    10.     * {
    11.       margin: 0;
    12.       padding: 0;
    13.     }
    14.  
    15.     .tab {
    16.       width: 590px;
    17.       height: 340px;
    18.       margin: 20px;
    19.       border: 1px solid #e4e4e4;
    20.     }
    21.  
    22.     .tab-nav {
    23.       width: 100%;
    24.       height: 60px;
    25.       line-height: 60px;
    26.       display: flex;
    27.       justify-content: space-between;
    28.     }
    29.  
    30.     .tab-nav h3 {
    31.       font-size: 24px;
    32.       font-weight: normal;
    33.       margin-left: 20px;
    34.     }
    35.  
    36.     .tab-nav ul {
    37.       list-style: none;
    38.       display: flex;
    39.       justify-content: flex-end;
    40.     }
    41.  
    42.     .tab-nav ul li {
    43.       margin: 0 20px;
    44.       font-size: 14px;
    45.     }
    46.  
    47.     .tab-nav ul li a {
    48.       text-decoration: none;
    49.       border-bottom: 2px solid transparent;
    50.       color: #333;
    51.     }
    52.  
    53.     .tab-nav ul li a.active {
    54.       border-color: #e1251b;
    55.       color: #e1251b;
    56.     }
    57.  
    58.     .tab-content {
    59.       padding: 0 16px;
    60.     }
    61.  
    62.     .tab-content .item {
    63.       display: none;
    64.     }
    65.  
    66.     .tab-content .item.active {
    67.       display: block;
    68.     }
    69.   style>
    70. head>
    71.  
    72. <body>
    73.   <div class="tab">
    74.     <div class="tab-nav">
    75.       <h3>每日特价h3>
    76.       <ul>
    77.         <li><a class="active" href="javascript:;" data-id="0">精选a>li>
    78.         <li><a href="javascript:;" data-id="1">美食a>li>
    79.         <li><a href="javascript:;" data-id="2">百货a>li>
    80.         <li><a href="javascript:;" data-id="3">个护a>li>
    81.         <li><a href="javascript:;" data-id="4">预告a>li>
    82.       ul>
    83.     div>
    84.     <div class="tab-content">
    85.       <div class="item active"><img src="./images/tab00.png" alt="" />div>
    86.       <div class="item"><img src="./images/tab01.png" alt="" />div>
    87.       <div class="item"><img src="./images/tab02.png" alt="" />div>
    88.       <div class="item"><img src="./images/tab03.png" alt="" />div>
    89.       <div class="item"><img src="./images/tab04.png" alt="" />div>
    90.     div>
    91.   div>
    92.   <script>
    93.     // 采取事件委托的形式 tab栏切换
    94.     // 1. 获取 ul 父元素 因为 ul只有一个
    95.     const ul = document.querySelector('.tab-nav ul')
    96.     // 获取 5个 item 
    97.     const items = document.querySelectorAll('.tab-content .item')
    98.     // 2. 添加事件
    99.     ul.addEventListener('click', function (e) {
    100.       // console.log(e.target)  // e.target是我们点击的对象
    101.       // 我们只有点击了 a 才会 进行 添加类和删除类操作 
    102.       // console.log(e.target.tagName)  // e.target.tagName 点击那个对象的 标签名
    103.       if (e.target.tagName === 'A') {
    104.         // console.log('我选的是a')
    105.         // 排他思想 ，先移除原来的active  
    106.         document.querySelector('.tab-nav .active').classList.remove('active')
    107.         //当前元素添加 active  是 e.target
    108.         // this 指向ul 不能用this 
    109.         e.target.classList.add('active')
    110.  
    111.         // 下面大盒子模块
    112.         // console.log(e.target.dataset.id)
    113.         const i = +e.target.dataset.id
    114.         // 排他思想 ，先移除原来的active 
    115.         document.querySelector('.tab-content .active').classList.remove('active')
    116.         // 对应的大盒子 添加 active 
    117.         // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
    118.         items[i].classList.add('active')
    119.       }
    120.     })
    121.   script>
    122. body>
    123.  
    124. html>

    三、其他事件

    3.1 页面加载事件

    注意   加载事件监听器   添加到谁身上

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <script>
    10.     // 等待页面所有资源加载完毕，就回去执行回调函数
    11.     // window.addEventListener('load', function () {
    12.     //   const btn = document.querySelector('button')
    13.     //   btn.addEventListener('click', function () {
    14.     //     alert(11)
    15.     //   })
    16.     // })
    17.  
    18.     // img.addEventListener('load', function () {
    19.     //   // 等待图片加载完毕，再去执行里面的代码
    20.     // })
    21.  
    22.     document.addEventListener('DOMContentLoaded', function () {
    23.       const btn = document.querySelector('button')
    24.       btn.addEventListener('click', function () {
    25.         alert(11)
    26.       })
    27.     })
    28.   script>
    29. head>
    30.  
    31. <body>
    32.   <button>点击button>
    33.  
    34. body>
    35.  
    36. html>

    3.2 页面滚动事件

    在谁的范围内滚动（滚动谁的滚动条），滚动事件加给ta

    scroll事件，一旦滚动就触发

    3.2 页面滚动事件-获取位置

    获取body元素，document.body

    获取html元素，document.documentElement

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     body {
    11.       padding-top: 100px;
    12.       height: 3000px;
    13.     }
    14.  
    15.     div {
    16.       display: none;
    17.       margin: 100px;
    18.       overflow: scroll;
    19.       width: 200px;
    20.       height: 200px;
    21.       border: 1px solid #000;
    22.     }
    23.   style>
    24. head>
    25.  
    26. <body>
    27.   <div>
    28.     我里面有很多很多的文字
    29.     我里面有很多很多的文字
    30.     我里面有很多很多的文字
    31.     我里面有很多很多的文字
    32.     我里面有很多很多的文字
    33.     我里面有很多很多的文字
    34.     我里面有很多很多的文字
    35.     我里面有很多很多的文字
    36.     我里面有很多很多的文字
    37.     我里面有很多很多的文字
    38.     我里面有很多很多的文字
    39.     我里面有很多很多的文字
    40.     我里面有很多很多的文字
    41.     我里面有很多很多的文字
    42.  
    43.   div>
    44.   <script>
    45.     const div = document.querySelector('div')
    46.     // 页面滚动事件
    47.     window.addEventListener('scroll', function () {
    48.       // console.log('我滚了')
    49.       // 我想知道页面到底滚动了多少像素， 被卷去了多少  scrollTop
    50.       // 获取html元素写法  
    51.       // document.documentElement  
    52.       // console.log(document.documentElement.scrollTop)
    53.       const n = document.documentElement.scrollTop
    54.       if (n >= 100) {
    55.         div.style.display = 'block'
    56.       } else {
    57.         div.style.display = 'none'
    58.       }
    59.     })
    60.     // const div = document.querySelector('div')
    61.     // div.addEventListener('scroll', function () {
    62.     //   // console.log(111)
    63.     //   // scrollTop 被卷去的头部
    64.     //   console.log(div.scrollTop)
    65.     // })
    66.   script>
    67. body>
    68.  
    69. html>

    document.documentElement.scrollTop得到是数字型 不带单位,且scrollTop可读写（写的时候不要带单位）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     body {
    11.       height: 3000px;
    12.     }
    13.   style>
    14. head>
    15.  
    16. <body>
    17.   <script>
    18.     document.documentElement.scrollTop = 800
    19.     window.addEventListener('scroll', function () {
    20.       // 必须写到里面
    21.       const n = document.documentElement.scrollTop
    22.       // 得到是什么数据   数字型 不带单位
    23.       // console.log(n)
    24.     })
    25.   script>
    26. body>
    27.  
    28. html>

    还可以使用scrollTo方法，但scrollTop可读写

    3.3 页面尺寸事件

    以前用它做响应式，现在不用了

    3.3 页面尺寸事件-获取元素宽高

    包含padding（padding撑大盒子）

    四、元素尺寸与位置

    offsetWidth和offsetHeight

    offsetLeft和offsetTop

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

    （但一般需要定位的大盒子都没有父元素，是标准流）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     div {
    11.       position: relative;
    12.       width: 200px;
    13.       height: 200px;
    14.       background-color: pink;
    15.       margin: 100px;
    16.     }
    17.  
    18.     p {
    19.       width: 100px;
    20.       height: 100px;
    21.       background-color: purple;
    22.       margin: 50px;
    23.     }
    24.   style>
    25. head>
    26.  
    27. <body>
    28.   <div>
    29.     <p>p>
    30.   div>
    31.   <script>
    32.     const div = document.querySelector('div')
    33.     const p = document.querySelector('p')
    34.     // console.log(div.offsetLeft)
    35.     // 检测盒子的位置  最近一级带有定位的祖先元素
    36.     console.log(p.offsetLeft)
    37.   script>
    38. body>
    39.  
    40. html>

    getBoundClientRect针对视口，比如说滚动后，相对视口位置会改变

    五、综合案例

    关键代码：

    ①使用自定义属性＋属性选择器 选出大盒子元素

    ②添加active前的判定

    1. <script>
    2.     // 第一大模块，页面滑动可以显示和隐藏
    3.     (function () {
    4.       // 获取元素
    5.       const entry = document.querySelector('.xtx_entry')
    6.       const elevator = document.querySelector('.xtx-elevator')
    7.       // 1. 当页面滚动大于 300像素，就显示 电梯导航
    8.       // 2. 给页面添加滚动事件
    9.       window.addEventListener('scroll', function () {
    10.         // 被卷去的头部大于 300 
    11.         const n = document.documentElement.scrollTop
    12.         // if (n >= 300) {
    13.         //   elevator.style.opacity = 1
    14.         // } else {
    15.         //   elevator.style.opacity = 0
    16.         // }
    17.         // 简写
    18.         elevator.style.opacity = n >= entry.offsetTop ? 1 : 0
    19.       })
    20.  
    21.       // 点击返回页面顶部
    22.       const backTop = document.querySelector('#backTop')
    23.       backTop.addEventListener('click', function () {
    24.         // 可读写
    25.         // document.documentElement.scrollTop = 0
    26.         // window.scrollTo(x, y)
    27.         window.scrollTo(0, 0)
    28.       })
    29.     })();
    30.  
    31.     // 第二第三都放到另外一个执行函数里面
    32.     (function () {
    33.       // 2. 点击页面可以滑动 
    34.       const list = document.querySelector('.xtx-elevator-list')
    35.       list.addEventListener('click', function (e) {
    36.         // console.log(11)
    37.         if (e.target.tagName === 'A' && e.target.dataset.name) {
    38.           // 排他思想  
    39.           // 先移除原来的类active 
    40.           // 先获取这个active的对象
    41.           const old = document.querySelector('.xtx-elevator-list .active')
    42.           // console.log(old)
    43.           // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
    44.           if (old) old.classList.remove('active')
    45.           // 当前元素添加 active 
    46.           e.target.classList.add('active')
    47.           // 获得自定义属性  new   topic 
    48.           // console.log(e.target.dataset.name)
    49.           // 根据小盒子的自定义属性值 去选择 对应的大盒子
    50.           // console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop)
    51.           // 获得对应大盒子的 offsetTop
    52.           const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
    53.           // 让页面滚动到对应的位置
    54.           document.documentElement.scrollTop = top
    55.  
    56.         }
    57.       })
    58.  
    59.  
    60.       // 3. 页面滚动，可以根据大盒子选 小盒子 添加 active 类
    61.       window.addEventListener('scroll', function () {
    62.         //  3.1  先移除类 
    63.         // 先获取这个active的对象
    64.         const old = document.querySelector('.xtx-elevator-list .active')
    65.         // console.log(old)
    66.         // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
    67.         if (old) old.classList.remove('active')
    68.         // 3.2 判断页面当前滑动的位置，选择小盒子
    69.  
    70.         // 获取4个大盒子
    71.         const news = document.querySelector('.xtx_goods_new')
    72.         const popular = document.querySelector('.xtx_goods_popular')
    73.         const brand = document.querySelector('.xtx_goods_brand')
    74.         const topic = document.querySelector('.xtx_goods_topic')
    75.         const n = document.documentElement.scrollTop
    76.         if (n >= news.offsetTop && n < popular.offsetTop) {
    77.           // 选择第一个小盒子
    78.           document.querySelector('[data-name=new]').classList.add('active')
    79.         } else if (n >= popular.offsetTop && n < brand.offsetTop) {
    80.           document.querySelector('[data-name=popular]').classList.add('active')
    81.         } else if (n >= brand.offsetTop && n < topic.offsetTop) {
    82.           document.querySelector('[data-name=brand]').classList.add('active')
    83.         } else if (n >= topic.offsetTop) {
    84.           document.querySelector('[data-name=topic]').classList.add('active')
    85.         }
    86.       })
    87.  
    88.     })();
    89.  
    90.       // let n = 10
    91.       // n = 20
    92.   script>

  • 相关阅读:
    Leetcode 1541. Minimum Insertions to Balance a Parentheses String (括号问题好题)
    【JavaScript实现 百元买百鸡问题】
    在 Python 中使用 Pillow 进行图像处理【3/4】
    rsync+inotify-tools文件传输
    【python】爬虫系列之requests库介绍
    【无标题】
    前端开发面试题自测
    Python 有哪些好的学习资料或者博客？
    从0到一配置单节点zookeeper
    安全热点|国新办发布《携手构建网络空间命运共同体》白皮书
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/133388247