Web前端105天-day46-DOM

最新推荐文章于 2024-06-16 18:09:06 发布

smile陌辰

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量135

点赞数

分类专栏： JSDOM 文章标签： javascript node.js 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_52810836/article/details/128355530

版权

JSDOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM02

目录

一、querySelector

二、classList

三、下拉选框

四、图片大小图效果

五、菜单折叠

六、广告弹窗

前言

DOM02学习开始

一、querySelector

<!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>练习 09:08</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #box {
      display: flex;
      padding: 10px;
      background-color: #eee;
    }

    /* id=box 元素下的 所有 子元素li */
    #box>li {
      margin: 8px;
      cursor: pointer;
    }

    #box>li.active {
      color: #ff5d23;
      border-bottom: 3px solid #ff5d23;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <ul id="box">
    <li class="active">推荐</li>
    <li>颜值</li>
    <li>英雄联盟</li>
    <li>王者荣耀</li>
    <li>热门游戏</li>
  </ul>

  <script>
    // 昨天:  先通过id找到 ul 元素, 然后获取其子元素
    // 更直接的方案: 利用 css 选择器, 来精确查找元素

    // query: 查询   selector: 选择器   all: 所有
    // 查询到所有满足选择器要求的元素
    // qsa
    // 返回值的原型是 NodeList, 虽然是伪数组类型, 但是拥有 forEach 方法
    const lis = document.querySelectorAll('#box>li')
    console.log(lis)

    lis.forEach((li, index) => {
      console.log(index, li)
      li.onclick = function () {
        console.log('this', this) //这个 触发事件的元素
        // 给新的添加激活之前, 先找到之前激活的元素, 删除其 激活样式

        // querySelector: 精确找到 唯一满足条件的元素
        const active = document.querySelector('#box>li.active')
        console.log('active', active)
        active.className = '' //样式类清空

        // 修改class
        this.className = 'active'
      }
    })
  </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>练习 09:08</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #box {
      display: flex;
      padding: 10px;
      background-color: #eee;
    }

    /* id=box 元素下的 所有 子元素li */
    #box>li {
      margin: 8px;
      cursor: pointer;
    }

    #box>li.active {
      color: #ff5d23;
      border-bottom: 3px solid #ff5d23;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <ul id="box">
    <li class="active">推荐</li>
    <li>颜值</li>
    <li>英雄联盟</li>
    <li>王者荣耀</li>
    <li>热门游戏</li>
  </ul>

  <script>
    // 昨天:  先通过id找到 ul 元素, 然后获取其子元素
    // 更直接的方案: 利用 css 选择器, 来精确查找元素

    // query: 查询   selector: 选择器   all: 所有
    // 查询到所有满足选择器要求的元素
    // qsa
    // 返回值的原型是 NodeList, 虽然是伪数组类型, 但是拥有 forEach 方法
    const lis = document.querySelectorAll('#box>li')
    console.log(lis)

    lis.forEach((li, index) => {
      console.log(index, li)
      li.onclick = function () {
        console.log('this', this) //这个 触发事件的元素
        // 给新的添加激活之前, 先找到之前激活的元素, 删除其 激活样式

        // querySelector: 精确找到 唯一满足条件的元素
        const active = document.querySelector('#box>li.active')
        console.log('active', active)
        active.className = '' //样式类清空

        // 修改class
        this.className = 'active'
      }
    })
  </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>练习</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #box {
      border: 1px solid #bbb;
      border-radius: 4px;
      display: inline-block;
      margin: 4px;
      overflow: hidden;
    }

    #box>li {
      padding: 10px;
      cursor: pointer;
      color: #444;
    }

    #box>li:hover {
      background-color: #b7e1ff;
    }

    #box>li.active {
      background-color: #6fc3ff;
      color: white;
    }
  </style>
</head>

<body>
  <ul id="box">
    <li class="active">为你推荐</li>
    <li>热门速递</li>
    <li>都市生活</li>
    <li>奇幻异界</li>
    <li>古风恋爱</li>
  </ul>

  <script>
    // css选择器: 非常灵活 选中任何的标签
    // 关注: 目标元素是 多个 还是 1个
    const lis = document.querySelectorAll('#box>li')
    lis.forEach(li => {
      li.onclick = function () {
        // 旧的不去, 新的不来
        const ac = document.querySelector('#box>li.active')
        ac.className = ''

        this.className = 'active'
      }
    })
  </script>
</body>

</html>

二、classList

<!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>开关 10:18</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    .switch {
      cursor: pointer;
      display: inline-block;
      width: 70px;
      height: 40px;
      border: 1px solid #555;
      margin: 3px;
      border-radius: 100px;
      /* 子绝父相 */
      position: relative;
      transition: 0.3s;
    }

    .switch>span {
      transition: 0.3s;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #ccc;
      position: absolute;
      left: 1px;
      top: 1px;
    }

    .switch.open {
      background-color: #007aff;
      border-color: #007aff;
    }

    .switch.open>span {
      /* calc() : css3提供的函数, 可以进行一些简单的计算 */
      /* 强调: 运算符号的左右 必须空格间隔; 没有JS强大, 必须严格格式 */
      left: calc(100% - 1px - 36px);
    }
  </style>
</head>

<body>
  <div class="switch">
    <span></span>
  </div>

  <script>
    // 单个元素
    const sw = document.querySelector('.switch')
    console.dir(sw);

    // 元素: 统称 el
    sw.onclick = function () {
      console.log(this)
      // 作者在 classList 属性中 提供了很多 操作class的方法, 比我们直接操作className 更加简单易用
      this.classList.toggle('open')
      // toggle: 切换;  自动判定是否存在open样式, 来决定 移除还是添加


      // 判断: 如果没有open, 就添加; 否则就删除
      // if (this.className == 'switch') {
      //   // alt + 方向键:  可以快速移动光标行代码
      //   this.className = 'switch open'
      // } else {
      //   this.className = 'switch'
      // }
    }
  </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>练习 11:27</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      display: flex;
      padding: 20px;
    }

    ul>li {
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-size: 14px;
    }

    ul>li>img {
      border: 4px solid #7a7a7a;
      border-radius: 0 15px;
    }

    /* li 激活时, 其下方的img */
    ul>li.active>img {
      border-color: #f3c258;
    }
  </style>
</head>

<body>
  <ul>
    <li class="active">
      <img src="./imgs/smallskin-5.jpg" alt="">
      <span>时之愿境</span>
    </li>
    <li>
      <img src="./imgs/smallskin-4.jpg" alt="">
      <span>时之祈愿</span>
    </li>
    <li>
      <img src="./imgs/smallskin-3.jpg" alt="">
      <span>遇见神鹿</span>
    </li>
    <li>
      <img src="./imgs/smallskin-2.jpg" alt="">
      <span>森&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </li>
    <li>
      <img src="./imgs/smallskin-1.jpg" alt="">
      <span>鹿灵守心</span>
    </li>
  </ul>

  <script>
    const lis = document.querySelectorAll('ul>li')

    lis.forEach(li => {
      // onmouseover: 鼠标移到某元素之上
      li.onmouseover = function () {
        const ac = document.querySelector('ul>li.active')
        ac.classList.remove('active') // remove: 移除

        // 不推荐直接操作 class 的本体, 有可能会覆盖其原有的其他class
        // this.className = 'active'

        // 推荐使用作者提供的专业的方法
        this.classList.add('active')  //add:添加,新增
      }
    })
  </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>下拉选框 14:01</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    .select {
      margin: 4px;
      border: 1px solid #bbb;
      background-color: #f9f9fb;
      padding: 4px;
      position: relative;
    }

    .select>ul {
      overflow: hidden;
      position: absolute;
      border: 1px solid #bbb;
      background-color: #f9f9fb;
      border-radius: 4px;
      top: calc(100% + 4px);
    }

    .select>ul>li {
      padding: 10px 20px;
      color: #333;
      cursor: pointer;
      font-size: 13px;
    }

    .select>ul>li.active {
      background-color: orange;
    }

    .hide {
      display: none;
    }
  </style>
</head>

<body>
  <select>
    <option value="0">奔驰</option>
    <option value="1">宝马</option>
    <option value="2">奥迪</option>
    <option value="3">雅迪</option>
  </select>

  <hr>
  <div class="select">
    <button>English</button>
    <ul class="hide">
      <li>日本语</li>
      <li>中文</li>
      <li class="active">English</li>
      <li>韩语</li>
    </ul>
  </div>

  <script>
    // 元素之间的关系只有4种
    // 1. 儿子们  childern
    // 2. 父  parentElement
    // 3. 弟弟 nextElementSibling
    // 4. 哥哥 previousElementSibling

    // DOM的套路: 找到要操作的元素  -> 操作他
    const lis = document.querySelectorAll('.select>ul>li')
    lis.forEach(li => {
      // 鼠标悬浮
      li.onmouseover = function () {
        const ac = document.querySelector('.select>ul>li.active')
        ac.classList.remove('active')

        this.classList.add('active')
      }

      // 鼠标点击
      li.onclick = function () {
        // 父元素: parentElement
        this.parentElement.classList.add('hide')
        console.dir(this) //查看元素的内容文本在哪个属性?
        // previousElementSibling: 上一个 元素 兄弟
        const btn = this.parentElement.previousElementSibling
        // 按钮的内容 等于 当前点击项的内容
        btn.innerHTML = this.innerHTML
      }
    })

    const btn = document.querySelector('.select>button')

    btn.onclick = function () {
      // 选择元素的 下一个兄弟
      // next: 下一个   element: 元素   sibling: 兄弟姐妹
      const ul = this.nextElementSibling
      console.log('ul', ul)
      // toggle: 切换
      ul.classList.toggle('hide')
    }
  </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>练习 15:12</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    .select {
      /* border: 1px solid red; */
      display: inline-block;
      position: relative;
    }

    .select>ul {
      position: absolute;
      top: 0;
      left: calc(100% + 5px);
      width: 200px;
      padding: 10px;
      background-color: #eee;
      display: flex;
      flex-wrap: wrap;
    }

    .select>ul>li {
      padding: 5px 10px;
      border: 2px solid red;
      margin: 0 10px 10px 0;
      cursor: pointer;
    }

    .select>ul>li.active {
      background-color: orange;
    }

    .hide {
      display: none !important;
    }
  </style>
</head>

<body>
  <div class="select">
    <button>澜</button>
    <ul class="hide">
      <li>瑶</li>
      <li>司马懿</li>
      <li>夏洛特</li>
      <li>孙策</li>
      <li class="active">澜</li>
    </ul>
  </div>

  <script>
    const btn = document.querySelector('.select>button')
    btn.onclick = function () {
      this.nextElementSibling.classList.toggle('hide')
    }

    const lis = document.querySelectorAll('.select>ul>li')
    lis.forEach(li => {
      li.onclick = function () {
        this.parentElement.classList.add('hide')

        const ac = document.querySelector('.select>ul>li.active')
        ac.classList.remove('active')

        this.classList.add('active')

        this.parentElement.previousElementSibling.innerHTML = this.innerHTML
      }
    })
  </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>练习</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      display: inline-block;
      width: 300px;
    }

    ul>li {
      height: 80px;
      border-radius: 10px;
      margin-bottom: 5px;
      background-size: cover;
      transition: 0.5s;
    }

    ul>li.active {
      height: 137px;
    }
  </style>
</head>

<body>
  <ul>
    <!-- 为什么不用 img 而使用 背景图:  因为 img 显示的图, 如果宽高比例错误, 图片会变形 -->
    <li class="active" style="background-image: url(./imgs/bigskin-1.jpg);"></li>
    <li style="background-image: url(./imgs/bigskin-2.jpg);"></li>
    <li style="background-image: url(./imgs/bigskin-3.jpg);"></li>
    <li style="background-image: url(./imgs/bigskin-4.jpg);"></li>
    <li style="background-image: url(./imgs/bigskin-5.jpg);"></li>
  </ul>

  <script>
    const lis = document.querySelectorAll('ul>li')
    lis.forEach(li => {
      li.onmouseover = function () {
        document.querySelector('ul>li.active').classList.remove('active')

        this.classList.add('active')
      }
    })
  </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>练习 17:13</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    .menu {
      padding: 10px;
      display: inline-block;
      width: 200px;
    }

    .menu>li>h3 {
      padding: 10px;
      background-color: #eee;
      border-radius: 4px;
    }

    .menu>li>ul {
      margin-left: 10px;
      padding: 10px 0;
    }

    .menu>li>ul>li {
      padding: 10px 0;
      border-bottom: 1px dashed gray;
    }

    .hide {
      display: none;
    }

    .menu>li {
      margin-bottom: 4px;
    }
  </style>
</head>

<body>
  <ul class="menu">
    <li>
      <h3>阶段1</h3>
      <ul class="hide">
        <li>html</li>
        <li>css</li>
        <li>js</li>
      </ul>
    </li>
    <li>
      <h3>阶段2</h3>
      <ul class="hide">
        <li>node.js</li>
        <li>express</li>
        <li>sql</li>
      </ul>
    </li>
  </ul>

  <script>
    const h3s = document.querySelectorAll('.menu>li>h3')

    h3s.forEach(h3 => {
      h3.onclick = function () {
        this.nextElementSibling.classList.toggle('hide')
      }
    })
  </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>练习 17:40</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #box {
      padding: 10px;
      background-color: #eee;
      width: 150px;
      height: 250px;
      position: fixed;
      bottom: 0;
      right: 0;
      transition: 1s;
    }

    #box.hide {
      bottom: -250px;
    }
  </style>
</head>

<body>
  <div id="box" class="hide">
    <button>关闭</button>
    <p>大家好，我系渣渣辉，戏我演过很多；但游戏，我只喜欢贪玩蓝月，装备秒回收；交易自由，来到就是赚到。赶快过来一起贪玩蓝月。 </p>
  </div>

  <script>
    const box = document.getElementById('box')

    setTimeout(() => {
      // 删除隐藏的class
      box.classList.remove('hide')
    }, 5000);

    document.querySelector('#box>button').onclick = function () {
      this.parentElement.classList.add('hide')

      setTimeout(() => {
        this.parentElement.classList.remove('hide')
      }, 1500);
    }
  </script>
</body>

</html>

总结

DOM02学习结束

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端105天-day46-DOM

Web前端105天-day46-DOM
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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