#JavaScript(WebAPIs)【02】

已于 2023-09-14 16:51:22 修改
阅读量43 收藏 1
点赞数
文章标签： javascript css css3
于 2023-09-14 16:40:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79501633/article/details/132748135
版权

目录

一，事件监听案例

1.1，广告点击关闭

1.2，随机点名案例

1.3，补充：

 二， 事件监听版本

 三，事件类型

​编辑

 3.1，鼠标事件

3.2，焦点事件

3.3，键盘事件

四，事件对象(就是个对象)

4.1，事件对象的属性

五，事件对象

5.1，回调函数

5.2,table栏切换案例

5.3，表单全选案例

六，事件流

6.1，事件流指的是事件完整执行过程中的流动路径

6.2，事件捕获

6.3，事件冒泡

6.4，阻止冒泡

6.5，解绑事件（了解）

 6.6，补充，鼠标经过事件的区别

6.7，总结

七，事件委托

7.1，tab栏切换优化

7.1，阻止默认行为

八，其他事件

8.1，页面加载事件

8.2，页面滚动事件

 8.3，页面尺寸事件

九，元素尺寸与位置

一，事件监听案例

1.1，广告点击关闭

广告关闭案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 1500px;
      height: 200px;
      background-color: skyblue;
      font-size: 50px;
      font-weight: 700;
      text-align: center;
      line-height: 200px;
    }

    .box1 {
      width: auto;
      height: auto;
      cursor: pointer;
      color: brown;
      float: right;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>

  <script>
    // 获取事件源
    const box1 = document.querySelector('.box1')
    //关闭大盒子
    const box = document.querySelector('.box')
    //事件监听
    box1.addEventListener('click', function () {
      box.style.display = 'none'
    })

  </script>
</body>

</html>

1.2，随机点名案例

随机抽奖案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>

<body>
  <h2>随机抽奖</h2>
  <div class="box">
    <span>结果是</span>
    <div class="qs">这里显示名字</div>
  </div>
  <div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
  </div>
  <script>
    //定时器的全局变量
    let n = 0
    //随机号为全局变量
    let random = 0
    //数组数据
    const arr = ['吃饭', '睡觉', '喝水', '玩游戏', '学习']

    const qs = document.querySelector('.qs')

    //开始按钮 点击事件
    //获取开始按钮对象
    const start = document.querySelector('.start')
    //获取关闭按钮对象
    const end = document.querySelector('.end')
    //添加点击事件
    start.addEventListener('click', function () {
      n = setInterval(function () {//间歇函数 35ms
        //随机数
        random = parseInt(Math.random() * arr.length)
        // console.log(arr[random]);
        qs.innerHTML = arr[random] //拿到随机盒子写到盒子中
      }, 35)
      //如果数组只有一个元素就不能抽取了 禁用两个按钮
      if (arr.length === 1) {
        start.disabled = true
        end.disabled = true
      }
    })
    end.addEventListener('click', function () {
      clearInterval(n)
      arr.splice(random, 1)//抽到的删除掉
    })

  </script>

</body>

</html>

1.3，补充：

 二， 事件监听版本

 三，事件类型

 3.1，鼠标事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    //鼠标经过
    div.addEventListener('mouseenter', function () {
      console.log('鼠标来了');
    })
    //鼠标离开
    div.addEventListener('mouseleave', function () {
      console.log('鼠标走了');
    })
  </script>

</body>

</html>

3.2，焦点事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
      console.log('有焦点触发');
    })
    input.addEventListener('blur', function () {
      console.log('失去焦点触发');
    })
  </script>

</body>

</html>

3.3，键盘事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('keydown', function () {
      console.log('键盘按下');
    })
    input.addEventListener('keyup', function () {
      console.log('键盘弹起');
    })
  </script>

</body>

</html>

 获取文本内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    // input.addEventListener('keydown', function () {
    //   console.log('键盘按下');
    // })
    // input.addEventListener('keyup', function () {
    //   console.log('键盘弹起');
    // })
    input.addEventListener('input', function () {
      console.log(input.value);
    });
  </script>

</body>

</html>

小案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .input {
      width: 200px;
      transition: all .3s;
    }

    /* focus伪类选择器 */
    .input:focus {
      width: 300px;
    }

    .total {
      float: left;
    }
  </style>
</head>

<body>
  <!-- <input type="text" name="" id=""> -->
  <textarea class="input" id="tx" cols="30" rows="2" placeholder="恶语伤人" maxlength="200"></textarea>
  <div>
    <span class="total">0/200字</span>
  </div>
  <button>提交</button>
  <script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const btn = document.querySelector('button')
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    tx.addEventListener('input', function (event) {
      total.innerHTML = `${tx.value.length}/200字`
      if (tx.value.length > 200) {
        event.preventDefault()
      }
    })
  </script>

</body>

</html>

四，事件对象(就是个对象)

  • 获取事件对象
  • 事件对象常用的属性
  • 绑定函数的第一个参数就是事件对象
  • 语法：如何获取
  • 事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event ev e
  • 元素.addEventListener('click',function(e){
  • })
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>按钮</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function (e) {
      console.log(e);
    })
  </script>

</body>

</html>

4.1，事件对象的属性

  • type :获取当前事件类型
  • clientX/clientY :获取光标相对于浏览器可见窗口左上角位置
  • offsetX/offsetY :获取光标相对于当前DOM元素左上角的位置
  • key:用户按下键盘的值   选择不提倡keyCode
  • 举例：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <button>按钮</button -->
  <input type="text" name="" id="">
  <script>
    const input = document.querySelector('input')
    // btn.addEventListener('click', function (e) {
    // console.log(e);
    // })
    input.addEventListener('keyup', function (e) {
      console.log(e.key);
      if (e.key === 'Enter') {
        console.log('我按下了回车键');
      }
    })

  </script>

</body>

</html>

五，事件对象

  <script>
    //每个函数里面都有this 环境对象 普通函数里面this 指向的是window
    // function fn() {
    //   console.log(this);
    // }
    // window.fn()
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      console.log(this);
    })//this指向函数的调用者   指向btn  谁调用This就指向谁
  </script>
  <button>点击</button>
  <script>
    //每个函数里面都有this 环境对象 普通函数里面this 指向的是window
    // function fn() {
    //   console.log(this);
    // }
    // window.fn()
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      console.log(this);
      btn.style.color = 'red'
      this.style.color = 'red'
    })//this指向函数的调用者   指向btn  谁调用This就指向谁
  </script>

5.1，回调函数

  • 函数A作为应该参数传递给函数B时，我们称函数A为回调函数
  <script>

    function fn() {
      console.log('回调函数');
    }
    setInterval(fn, 3000)

  </script>

5.2,table栏切换案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">百货</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./imag/pic1.jpg" alt="" /></div>
      <div class="item"><img src="./imag/pic2.png" alt="" /></div>
      <div class="item"><img src="./imag/pic3.png" alt="" /></div>
      <div class="item"><img src="./imag/pic4.jpg" alt="" /></div>
      <div class="item"><img src="./imag/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    //第一个模块 a模块
    const as = document.querySelectorAll('.tab-nav a')
    // console.log(a);
    //遍历所有的a
    for (let i = 0; i < as.length; i++) {
      //鼠标经过
        as[i].addEventListener('mouseenter', function () {
        // console.log('鼠标经过');
        //排查思想  移除类  添加类
        document.querySelector('.tab-nav .active').classList.remove('active')
        //添加类  this 就是当前as
        this.classList.add('active')
        //下面五个大盒子
        //移除别人
        document.querySelector('.tab-content .active').classList.remove('active')
        //对应序号的那个item 显示 添加active 类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
      })
    }
  </script>

</body>

</html>

5.3，表单全选案例

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    //获取元素 获取所有的小复选框
    const checkAll = document.querySelector('#checkAll')
    //获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    //点击大复选框 注册事件
    checkAll.addEventListener('click', function () {
      // console.log(checkAll.checked);
      //遍历所有的小复选框  小复选框的checked = 大复选框的checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = checkAll.checked
      }
    })
    
  </script>
</body>

</html>

修复bug后：

  • 分析
  • 遍历下面所有的checkbox，添加点击事件
  • 检查小复选框中的个数，是不是等于小复选框总的个数
  • 把结果给全按钮
  • 利用CSS复选框选择器 input:checked
<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    //获取元素 获取所有的小复选框
    const checkAll = document.querySelector('#checkAll')
    //获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    //点击大复选框 注册事件
    checkAll.addEventListener('click', function () {
      // console.log(checkAll.checked);
      //遍历所有的小复选框  小复选框的checked = 大复选框的checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = checkAll.checked
      }
    })
    //小复选框控制大复选框
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        //判断小复选框的个数是不是等于总的小复选框个数
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
      })
    }
  </script>
</body>

</html>

六，事件流

  • 事件流的两个阶段
  • 事件捕获（了解）
  • 事件冒泡
  • 阻止事件
  • 解绑事件

6.1，事件流指的是事件完整执行过程中的流动路径

6.2，事件捕获

  <script>
    const fa = document.querySelector(".father")
    const son = document.querySelector(".son")
    document.addEventListener("click", function () {
      alert("我是爷爷")
    }, true)
    fa.addEventListener("click", function () {
      alert("我是爸爸")
    }, true)
    son.addEventListener('click', function () {
      alert("我是儿子")
    })
    DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

  </script>
  • 说明
  • addEventListener第三个参数传入true代表捕获触发阶段
  • 若传入false代表冒泡阶段触发，默认就是false
  • 若是用L0事件监听，则只有冒泡阶段，没有捕获阶段

6.3，事件冒泡

第三个参数不写默认为false:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">

    </div>
  </div>
  <script>
    const fa = document.querySelector(".father")
    const son = document.querySelector(".son")
    document.addEventListener("click", function () {
      alert("我是爷爷")
    })
    fa.addEventListener("click", function () {
      alert("我是爸爸")
    })
    son.addEventListener('click', function () {
      alert("我是儿子")
    })
    DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

  </script>
</body>

</html>

6.4，阻止冒泡

目标：能够写出阻止冒泡的代码

  • 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
  • 需求：若想把事件就限制在当前元素内，就需要阻止冒泡
  • 前提：阻止事件冒泡需要拿到事件对象
  • 语法：
    事件对象.stopPropagation()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">

    </div>
  </div>
  <script>
    const fa = document.querySelector(".father")
    const son = document.querySelector(".son")
    document.addEventListener("click", function () {
      alert("我是爷爷")
    })
    fa.addEventListener("click", function () {
      alert("我是爸爸")
    })
    son.addEventListener('click', function (e) {
      alert("我是儿子")
      //阻止流动传播
      //事件对象.stopPropagation()
      e.stopPropagation()
    })
  </script>
</body>

</html>

6.5，解绑事件（了解）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    // btn.onclick = function(){
    //   alert('11111')
    // }
    // btn.click = null
    // btn.addEventListener('click',function(){
    //   alert('222')
    // })
    // //匿名函数无法被解绑
    // btn.removeEventListener('click')
    function fn() {
      alert("555")
    }
    btn.addEventListener('click', fn)
    btn.removeEventListener('click', fn)
  </script>
</body>

</html>

 6.6，补充，鼠标经过事件的区别

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dad {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .baby {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="dad">
    <div class="baby">

    </div>
  </div>
  <script>
    const dad = document.querySelector('.dad')
    const baby = document.querySelector('.baby')
    dad.addEventListener('mouseover', function () {
      console.log("鼠标经过");
    })
    dad.addEventListener('mouseout', function () {
      console.log("鼠标离开");
    })//出现冒泡行为
  </script>
</body>

</html>

6.7，总结

七，事件委托

  • 优点：减少注册次数
  • 原理：给父元素注册事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    //获取父元素
    const uls = document.querySelector('ul')
    //事件委托
    uls.addEventListener('click', function (e) {
      // alert(e)
      console.log(e);
      e.target.style.color = 'red'
      // this.style.color = 'red'
      if (e.target.tagName === 'li') {
        e.target.style.color = 'red'
      }
    })

  </script>
</body>

</html>

e.target, 点击谁 谁就是目标

7.1，tab栏切换优化

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
        <!-- 给每个小a添加自定义属性 -->
        <li><a href="javascript:;" data-id="1">美食</a></li>
        <li><a href="javascript:;" data-id="2">百货</a></li>
        <li><a href="javascript:;" data-id="3">个护</a></li>
        <li><a href="javascript:;" data-id="4">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./imag/pic1.jpg" alt="" /></div>
      <div class="item"><img src="./imag/pic2.png" alt="" /></div>
      <div class="item"><img src="./imag/pic3.png" alt="" /></div>
      <div class="item"><img src="./imag/pic4.jpg" alt="" /></div>
      <div class="item"><img src="./imag/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    const ul = document.querySelector('.tab-nav ul')
    const items = document.querySelectorAll('.tab-content .item')
    ul.addEventListener('click', function (e) {
      console.log(e.target);//e.target是我们点击的对象
      //我们只有点击了a才会进行添加类删除类的操作
      if (e.target.tagName === 'A') {
        // console.log('a');
        //排他思想 先移除原来的active
        document.querySelector('.tab-nav .active').classList.remove('active')
        e.target.classList.add('active')

        console.log(e.target.dataset.id);
        const i = +e.target.dataset.id
        document.querySelector('.tab-content .active').classList.remove('active')
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
        items[i].classList.add('active')
      }
    })
  </script>

</body>

</html>

7.1，阻止默认行为

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="submit" value="免费注册">
    <a href="baidu.com">baidu.com</a>
  </form>
  <script>
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      e.preventDefault()
    })
    const a = document.querySelector('a')
    a.addEventListener('click', function (e) {
      e.preventDefault()
    })

  </script>
</body>

</html>

八，其他事件

  • 页面加载事件
  • 元素滚动事件
  • 页面尺寸事件

8.1，页面加载事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  window.addEventListener('load', function () {
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert(111)
    })
  })
</script>

<body>
  <button>点击</button>

</body>

</html>

另外一种方法

加载速度快

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  // window.addEventListener('load', function () {

  // })
  document.addEventListener('DOMContentLoaded', function () {
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert(111)
    })
  })
</script>

<body>
  <button>点击</button>

</body>

</html>

8.2，页面滚动事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding-top: 100px;
      height: 3000px;
    }

    div {
      margin: 100px;
      overflow: scroll;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div>
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
    我不想学js了
  </div>

  <script>
    // window.addEventListener('scroll', function () {
    //   console.log("我滚了");
    // })
    const div = document.querySelector('div')
    window.addEventListener('scroll', function () {
      // console.log(111);
      // // 被减去的滚动条 
      // console.log(div.scrollTop);
      const n = document.documentElement.scrollTop
      if (n >= 100) {
        div.style.display = 'block'
      }
      else {
        div.style.display = 'none'
      }
    })
  </script>
</body>

</html>

 给window加或document添加scroll事件

 电梯小案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <script>
    //给页面添加滚动事件
    //获取上下滚动时的标签
    const elevator = document.querySelector()
    window.addEventListener('scroll', function () {
      const n = document.documentElement.scrollTop
      // if(n>300){
      //   elevator.style.opacity = 0
      // }
      // else{
      //   elevator.style.opacity = 1
      // }
      elevator.style.opacity = 300 ? 0 : 1
    })
    //点击回到顶部
    //先获取顶部标签
    const backTop = document.querySelector()
    backTop.addEventListener('click',function(){
      // document.documentElement.scrolltop = 0
      //window.scrollTo方法  window.scrollTo(x,y)
      window.scrollTo(0,0)
    })
  </script>
</body>

</html>

 8.3，页面尺寸事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, i
  nitial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    console.log(div.clientWidth); //可以检测盒子的尺寸
    //resize浏览器窗口大小发生变化时触发事件
    window.addEventListener('resize', function () {
      console.log(1);
    })
  </script>
</body>

</html>

九，元素尺寸与位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 200px;
      width: 200px;
      margin: 100px;
      background-color: pink;
    }

    p {
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: purple;
    }
  </style>

</head>

<body>
  <div></div>
  <P></P>
  <script>
    const div = document.querySelector('div')
    console.log(div.offsetLeft);
    console.log(div.offsetTop);
  </script>

</body>

</html>

小案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .content {
      overflow: hidden;
      width: 1000px;
      height: 3000px;
      background-color: pink;
      margin: 0 auto;
    }

    .backtop {
      display: none;
      width: 50px;
      left: 50%;
      margin: 0 0 0 505px;
      position: fixed;
      bottom: 60px;
      z-index: 100;
    }

    .backtop a {
      height: 50px;
      width: 50px;
      background: url(./images/bg2.png) 0 -600px no-repeat;
      opacity: 0.35;
      overflow: hidden;
      display: block;
      text-indent: -999em;
      cursor: pointer;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: purple;
      text-align: center;
      color: #fff;
      line-height: 80px;
      font-size: 30px;
      transition: all .3s;
    }

    .sk {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin-top: 500px;
    }
  </style>
</head>

<body>
  <div class="header">我是顶部导航栏</div>
  <div class="content">
    <div class="sk">秒杀模块</div>
  </div>
  <div class="backtop">
    <img src="./images/close2.png" alt="">
    <a href="javascript:;"></a>
  </div>
  <script>
    //获取秒杀模块的class
    const sk = document.querySelector('.sk')
    //获取顶部元素
    const header = document.querySelector('.header')
    //给整个界面添加滚动事件
    window.addEventListener('scroll', function () {
      //整个HTML上滑距离
      const n = document.documentElement.scrollTop
      if (n <= sk.offsetTop) {
        //sk.offsetTop是秒杀模块距离顶部的距离
        header.style.top = 0     //如果整个页面上滑的距离顶部小于等于模块的上滑距离顶部 
      }
      else {
        header.style.top = '-80px'
      }
    })


  </script>
</body>

</html>

大总结

电梯导航：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="javascript:;">请先登录</a>
        </li>
        <li>
          <a href="javascript:;">免费注册</a>
        </li>
        <li>
          <a href="javascript:;">我的订单</a>
        </li>
        <li>
          <a href="javascript:;">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">首页</a>
          </li>
          <li>
            <a href="javascript:;">生鲜</a>
          </li>
          <li>
            <a href="javascript:;">美食</a>
          </li>
          <li>
            <a href="javascript:;">餐厨</a>
          </li>
          <li>
            <a href="javascript:;">电器</a>
          </li>
          <li>
            <a href="javascript:;">居家</a>
          </li>
          <li>
            <a href="javascript:;">洗护</a>
          </li>
          <li>
            <a href="javascript:;">孕婴</a>
          </li>
          <li>
            <a href="javascript:;">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="javascript:;" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜">
        </div>
      </div>
    </div>
  </div>
  <!-- 分类及焦点图 -->
  <div class="xtx_entry">
    <div class="wrapper">
      <!-- 分类 -->
      <div class="xtx_category">
        <!-- 顶级分类 -->
        <ul class="xtx_category_super">
          <li>
            <a href="javascript:;">
              生鲜
              <small>水果</small>
              <small>蔬菜</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li class="active">
            <a href="javascript:;">
              美食
              <small>面点</small>
              <small>干果</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              电器
              <small>数码产品</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              居家
              <small>床品</small>
              <small>四件套</small>
              <small>被枕</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              洗护
              <small>洗发洗护</small>
              <small>美妆</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              孕婴
              <small>奶粉</small>
              <small>玩具</small>
              <small>辅食</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              餐橱
              <small>数码产品</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              服饰
              <small>女装</small>
              <small>男装</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              杂货
              <small>户外</small>
              <small>图书</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              品牌
              <small>品牌制造</small>
            </a>
            <i class="sprites"></i>
          </li>
        </ul>
        <!-- 子分类 -->
        <div class="xtx_category_subset">

        </div>
      </div>
      <!-- 焦点图 -->
      <div class="xtx_banner">

        <ul>
          <li>
            <a href="javascript:;">
              <img src="./uploads/banner_1.png" alt="">
            </a>
          </li>
        </ul>
        <!-- 切换按钮  -->
        <a href="javascript:;" class="prev sprites"></a>
        <a href="javascript:;" class="next sprites"></a>
        <!-- 指示器 -->
        <div class="indicator">
          <span></span>
          <span></span>
          <span class="active"></span>
          <span></span>
          <span></span>
        </div>

      </div>
    </div>
  </div>
  <!-- 新鲜好物 -->
  <div class="xtx_goods_new xtx_panel">
    <div class="wrapper">
      <!-- 面板头部 -->
      <div class="xtx_panel_header">
        <h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/new_goods_1.jpg" alt="">
          <span class="name">睿米无线吸尘器F8</span>
          <span class="price"><small>￥</small>899</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_2.jpg" alt="">
          <span class="name">智能环绕3D空调</span>
          <span class="price"><small>￥</small>1299</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_3.jpg" alt="">
          <span class="name">广东软软糯米煲仔饭</span>
          <span class="price"><small>￥</small>129</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_4.jpg" alt="">
          <span class="name">罗西机械智能手表</span>
          <span class="price"><small>￥</small>3399</span>
        </a>
      </div>
    </div>
  </div>

  <!-- 人气推荐 -->
  <div class="xtx_goods_popular xtx_panel">
    <div class="wrapper">
      <!-- 面板头部 -->
      <div class="xtx_panel_header">
        <h3>人气推荐<small>人气爆款 不容错过</small></h3>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/popular_1.jpg">
          <span class="title">特惠推荐</span>
          <span class="alt">我猜得到 你的需要</span>
        </a>
        <a href="./index-hot.html">
          <img src="./uploads/popular_2.jpg">
          <span class="title">爆款推荐</span>
          <span class="alt">人气好物推荐</span>
        </a>
        <a href="./index-one.html">
          <img src="./uploads/popular_3.jpg">
          <span class="title">场景使用一站买全</span>
          <span class="alt">编辑精心整理推荐</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/popular_4.jpg">
          <span class="title">领券中心</span>
          <span class="alt">发现更多超值优惠券</span>
        </a>
      </div>
    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="xtx_goods_brand xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>热门品牌<small>国际经典 品质保证</small></h3>
        <div class="page-bar">
          <a href="javascript:;" class="prev sprites"></a>
          <a href="javascript:;" class="next sprites active"></a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_goods">
        <ul>
          <li>
            <a href="./index-brand.html">
              <img src="./uploads/brand_goods_1.jpg" alt="">
            </a>
            <a href="./brand-list.html">
              <img src="./uploads/brand_goods_2.jpg" alt="">
            </a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_3.jpg" alt="">
            </a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_4.jpg" alt="">
            </a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_5.jpg" alt="">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 分类商品 -->
  <div class="xtx_goods_category xtx_panel">
    <div class="wrapper">
      <!-- 生鲜 -->
      <div class="xtx_panel_header">
        <h3>生鲜</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果</a>
          <a href="javascript:;">蔬菜</a>
          <a href="javascript:;">肉禽蛋</a>
          <a href="javascript:;">裤装</a>
          <a href="javascript:;">衬衫</a>
          <a href="javascript:;">内衣</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/fresh_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>生鲜馆</span>
              <span>全场3件8折</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>59</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
              <p class="flag">火锅食材</p>
              <p class="price"><small>￥</small>71.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
              <p class="flag">海鲜水产</p>
              <p class="price"><small>￥</small>49.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>899</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>29</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">广西沃柑 柑橘1.5kg</p>
              <p class="flag">新鲜水果</p>
              <p class="price"><small>￥</small>59</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">进口 牛油果 6个装 单果重约130-180g</p>
              <p class="flag">新鲜水果</p>
              <p class="price"><small>￥</small>39.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">泰国进口山竹5A级 500g </p>
              <p class="flag">新鲜水果</p>
              <p class="price"><small>￥</small>29.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <!-- 服饰 -->
      <div class="xtx_panel_header">
        <h3>服饰</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">行李箱</a>
          <a href="javascript:;">男士包袋</a>
          <a href="javascript:;">女士包袋</a>
          <a href="javascript:;">钱包及小提袋</a>
          <a href="javascript:;">男鞋</a>
          <a href="javascript:;">女鞋</a>
          <a href="javascript:;">拖鞋</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/clothes_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>服饰馆</span>
              <span>3折狂欢</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>55</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>20.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
              <p class="flag">海鲜水产</p>
              <p class="price"><small>￥</small>209</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>274.5</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">拉夫劳伦t恤男正品 </p>
              <p class="flag">圆领短袖</p>
              <p class="price"><small>￥</small>99</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>79</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>179</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>69</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <!-- 餐厨 -->
      <div class="xtx_panel_header">
        <h3>餐厨</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果</a>
          <a href="javascript:;">蔬菜</a>
          <a href="javascript:;">肉禽蛋</a>
          <a href="javascript:;">裤装</a>
          <a href="javascript:;">衬衫</a>
          <a href="javascript:;">内衣</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/kitchen_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>餐厨馆</span>
              <span>大额优惠<br>等你来拿</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>5.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>20.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>129</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>274.5</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">金纺不伤手柔顺剂 妈妈的选择</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>29</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>10.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 </p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>159</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香 </p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>22.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <!-- 居家 -->
      <div class="xtx_panel_header">
        <h3>居家</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">咖啡具</a>
          <a href="javascript:;">水具酒具</a>
          <a href="javascript:;">锅具</a>
          <a href="javascript:;">餐具</a>
          <a href="javascript:;">功能厨具</a>
          <a href="javascript:;">茶具</a>
          <a href="javascript:;">清洁保鲜</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/home_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>居家馆</span>
              <span>全场满减</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">菜鸟异常专用链接 非请 勿拍</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>8999</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>65</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>129</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>129</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>29</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p>
              <p class="flag">料理机</p>
              <p class="price"><small>￥</small>10.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 </p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>159</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">美式双人实木床 红实木 显档次</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>22.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 最新主题 -->
  <div class="xtx_goods_topic xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>最新专题</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
      </div>
      <div class="xtx_topic">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_1.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物</small>
                </p>
                <span class="price"><small>￥</small>29.9起</span>
              </div>
            </a>
            <div class="social">
              <span class="like">
                <i class="sprites"></i>1220
              </span>
              <span class="view">
                <i class="sprites"></i>1800
              </span>

              <span class="reply">
                <i class="sprites"></i>1220
              </span>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_2.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物</small>
                </p>
                <span class="price"><small>￥</small>29.9起</span>
              </div>
            </a>
            <div class="social">
              <span class="liked">
                <i class="sprites"></i>1220
              </span>
              <span class="view">
                <i class="sprites"></i>1800
              </span>

              <span class="reply">
                <i class="sprites"></i>1220
              </span>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_3.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物</small>
                </p>
                <span class="price"><small>￥</small>29.9起</span>
              </div>
            </a>
            <div class="social">
              <span class="like">
                <i class="sprites"></i>1220
              </span>
              <span class="view">
                <i class="sprites"></i>1800
              </span>

              <span class="reply">
                <i class="sprites"></i>1220
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 电梯 -->
  <div class="xtx-elevator">
    <ul class="xtx-elevator-list">
      <li><a href="javascript:;" data-name="new">新鲜好物</a></li>
      <li><a href="javascript:;" data-name="popular">人气推荐</a></li>
      <li><a href="javascript:;" data-name="brand">热门品牌</a></li>
      <li><a href="javascript:;" data-name="topic">最新专题</a></li>
      <li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
    </ul>
  </div>
  <script>
    //第一个模块  电梯导航事件
    (function () {
      //当页面滚动的距离大于等于电梯距离顶部的距离时  电梯出现 否则消失

      //获取电梯的元素
      const elevator = document.querySelector('.xtx-elevator')
      //给整个页面添加滚动事件
      window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop
        if (n >= elevator.offsetTop) {
          elevator.style.opacity = 1
        }
        else {
          elevator.style.opacity = 0
        }
      })
      //点顶部 回到顶部 
      //获取顶部元素
      const backTop = document.querySelector("#backTop")
      //添加点击事件 当点击回到顶部时 
      backTop.addEventListener("click", function () {
        //与顶部距离赋值为0
        document.documentElement.scrollTop = 0

      })
    }());

    (function () {
      //获取电梯元素
      const list = document.querySelector('.xtx-elevator-list')
      // 给电梯元素添加点击事件
      list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {
          //事件对象点击每一个a标签
          //在A标签下获取active元素
          const old = document.querySelector('.xtx-elevator-list .active')
          //判断它是否有active类的对象 如果有就移除 没有就不删除
          if (old) {
            old.classList.remove('active')
          }//没有就添加
          else {
            e.target.classList.add('active')
          }
          // 电梯到主要位置的代码
        
          const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop // 获取每个电梯固定发梯箱子到顶部的距离
          document.documentElement.scrollTop = top // 让他等于滑动的距离
          // console.log(e.target.dataset.name);
        }
      })
    }())
  </script>

</body>

</html>

CSS/INDEX()

bestwishesn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webapis-playground:Web APIs Playground 是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 可帮助为许多低级任务提供包装函数
07-24
Web APIs Playground是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 为许多低级任务提供包装函数，例如， 设备硬件交互 客户端存储交互 3D 图形，WebGL 通知 音频视频 还有很多...
JavaScript——Web APIs
蟹黄堡
05-22 256
JS的组成 JavaScript由ECMAScript（JavaScript基础）、DOM和BOM（Web APIs）组成。 其中，JavaScript基础是ECMAScript标准规定的基本语法；而Web APIs是W3C组织的标准。 API和Web API API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
JavaScript Web APIs
weixin_51062389的博客
07-02 120
Web APIS Web APIs和JS关联性 JS基础：ECMAscript基本语法 Web APIs阶段：DOM+BOM//页面交互功能 API和Web API API（应用程序编程接口）：是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制和的细节。 简单理解:API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM\DOM） ...
JavaScript核心Web APIs
weixin_58997863的博客
08-23 589
前端学习之 JavaScript核心WebAPIs 学完JavaScript基础，就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，本文会讲解如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。 还会讲解移动端如何制作网页特效，带你进入JavaScript的实际开发应用。
JavaScript Web APIs2
2401_84152911的博客
05-12 702
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript核心之Web APIs实用案例
技术专家
12-22 311
JavaScript核心之Web APIs实用案例
tizen-tv-webapis
05-17
script type =" text/javascript " src =" $WEBAPIS/webapis/webapis.js " > </ script > // js const avinfo = require ( 'tizen-tv-webapis' ) ; const { getVersion , getDolbyDigitalCompMode , ...
day02_WebAPIs.md
07-22
黑马前端
04-WebApis-CodeQuiz
03-09
04-WebApis-CodeQuiz
WebAPIs基础笔记
07-07
WebAPIs笔记
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 113
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 196
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 756
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 855
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
Vue从入门到实战Day07
最新发布
ltt159264的博客
05-21 582
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
jQuery知识点（二）
shsjssnn的博客
05-21 459
1.获取节点： 通过各种选择器或选择器的组合来获取想要的网页元素。 2.创建节点： 元素节点通过工厂函数$()直接创建，文本节点和属性节点可以随着元素节点创建时一起创建，也可以通过先创建元素节点，再使用操作内容和属性的方法产生。 3.插入节点： append()、prepend(): 是父元素的方法 appendTo()、prependTo(): 是要插入的节点的方法 before()、after(): 是要插入
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 679
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
webapis学生报名系统代码步骤
11-25
设计一个webapis学生报名系统的代码步骤如下： 1. 数据库设计：首先确定需要存储的数据，例如学生的基本信息，课程信息等。根据需求设计数据库表结构，并创建相应的表。 2. 后端接口设计：根据系统需求，设计后端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值