【Dom获取&属性操作】JavaScript 全栈体系(十)

2023-11-01

Web APIs

第四章 操作元素属性

一、操作元素常用属性

  • 还可以通过 JS 设置/修改标签元素属性,比如通过 src更换 图片
  • 最常见的属性比如: href、title、src 等
  • 语法:
    • 对象.属性 = 值
<!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>
</head>

<body>
  <img src="./images/1.webp" alt="">
  <script>
    // 1. 获取图片元素
    const img = document.querySelector('img')
    // 2. 修改图片对象的属性   对象.属性 = 值
    img.src = './images/2.webp'
    img.title = '刘德华的照片'
  </script>
</body>

</html>

案例:页面刷新,图片随机更换

  • 需求:当我们刷新页面,页面中的图片随机显示不同的图片
  • 分析:
    • ①:随机显示,则需要用到随机函数
    • ②:更换图片需要用到图片的 src 属性,进行修改
    • ③:核心思路:
      • 获取图片元素
      • 随机得到图片序号
      • 图片.src = 图片随机路径
<!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>
</head>

<body>
  <img src="./images/1.webp" alt="">
  <script>
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    // 1. 获取图片对象
    const img = document.querySelector('img')
    // 2. 随机得到序号
    const random = getRandom(1, 6)
    // 3. 更换路径
    img.src = `./images/${random}.webp`
  </script>
</body>

</html>

二、操作元素样式属性

  • 还可以通过 JS 设置/修改标签元素的样式属性。
  • 比如通过 轮播图小圆点自动更换颜色样式
  • 点击按钮可以滚动图片,这是移动的图片的位置 left 等等

1. 通过 style 属性操作CSS

  • 语法:
    • 对象.style.样式属性 = 值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.style.color = 'red'
    box.style.width = '300px'
    // css 属性的 - 连接符与 JavaScript 的 减运算符
    // 冲突,所以要改成驼峰法
    box.style.backgroundColor = 'pink'
  </script>
</body>
</html>

任何标签都有 style 属性,通过 style 属性可以动态更改网页标签的样式,如要遇到 css 属性中包含字符 - 时,要将 - 去掉并将其后面的字母改成大写,如 background-color 要写成 box.style.backgroundColor

2. 案例:页面刷新,页面随机更换背景图片

需求:当我们刷新页面,页面中的背景图片随机显示不同的图片
分析:
①: 随机函数
②: css页面背景图片 background-image
③: 标签选择body, 因为body是唯一的标签,可以直接写 document.body.style

<!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>
    body {
      background: url(./images/desktop_1.jpg) no-repeat top center/cover;
    }
  </style>
</head>

<body>
  <script>
    // console.log(document.body)
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    // 随机数
    const random = getRandom(1, 10)
    document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
  </script>
</body>

</html>

3. 操作类名(className) 操作CSS

  • 如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
  • 语法:
    • 元素.className = ‘active’
  • 注意:
    • 由于class是关键字, 所以使用className去代替
    • className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.className = 'pink'
  </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>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .nav {
      color: red;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div class="nav">123</div>
  <script>
    // 1. 获取元素
    const div = document.querySelector('div')
    // 2.添加类名  class 是个关键字 我们用 className
    div.className = 'nav box'
  </script>
</body>

</html>

注意:

  1. 由于class是关键字, 所以使用className去代替

  2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

4. 通过 classList 操作类控制CSS

  • 为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
  • 语法:
    • 元素.classList.add(‘类名’) // 追加一个类
    • 元素.classList.remove(‘类名’) // 删除一个类
    • 元素.classList.toggle(‘类名’) // 切换一个类
<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </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>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box active">文字</div>
  <script>
    // 通过classList添加
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改样式
    // 2.1 追加类 add() 类名不加点,并且是字符串
    // box.classList.add('active')
    // 2.2 删除类  remove() 类名不加点,并且是字符串
    // box.classList.remove('box')
    // 2.3 切换类  toggle()  有还是没有啊, 有就删掉,没有就加上
    box.classList.toggle('active')
  </script>
</body>

</html>

5. 轮播图随机版

需求:当我们刷新页面,页面中的轮播图会显示不同图片以及样式
模块:
①:图片会随机变换
②:底部盒子背景颜色和文字内容会变换
③:小圆点随机一个高亮显示
分析:
①:准备一个数组对象,里面包含详细信息(素材包含)
②:随机选择一个数字,选出数组对应的对象,更换图片,底部盒子背景颜色,以及文字内容
③:利用这个随机数字,让小圆点添加高亮的类(addClass) 利用css 结构伪类选择器

在这里插入图片描述

<!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>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // const arr = [1, 3]
    // arr[0]
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
    ]
    // 1. 需要一个随机数 
    const random = parseInt(Math.random() * sliderData.length)
    // console.log(sliderData[random])
    // 2. 把对应的数据渲染到标签里面
    // 2.1 获取图片
    const img = document.querySelector('.slider-wrapper img')
    // 2.2. 修改图片路径  =  对象.url
    img.src = sliderData[random].url
    // 3. 把p里面的文字内容更换
    // 3.1 获取p
    const p = document.querySelector('.slider-footer p')
    // 3.2修改p
    p.innerHTML = sliderData[random].title
    // 4. 修改背景颜色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
    // 5. 小圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    // 让当前这个小li 添加 active这个类
    li.classList.add('active')
  </script>
</body>

</html>

三、操作表单元素属性

  • 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
  • 正常的有属性有取值的 跟其他的标签属性没有任何区别
  • 获取: DOM对象.属性名
  • 设置: DOM对象.属性名 = 新值
  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示。如果为 true 代表添加了该属性,如果是 false 代表移除了该属性
  • 比如:disabled、checked、selected

<!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>

</head>

<body>
    <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" id="" class="agree">
    <script>
        // 1. 获取元素
        let input = document.querySelector('input')
        // 2. 取值或者设置值  得到input里面的值可以用 value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'

        // 2. 启用按钮
        let btn = document.querySelector('button')
        // disabled 不可用   =  false  这样可以让按钮启用
        btn.disabled = false
        // 3. 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = false
    </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>
</head>

<body>
  <!-- <input type="text" value="电脑"> -->
  <input type="checkbox" name="" id="">
  <button>点击</button>
  <script>
    // 1 获取元素
    // const uname = document.querySelector('input')
    // 2. 获取值  获取表单里面的值 用的  表单.value
    // console.log(uname.value) // 电脑
    // console.log(uname.innerHTML)  innertHTML 得不到表单的内容
    // 3. 设置表单的值
    // uname.value = '我要买电脑'
    // console.log(uname.type)
    // uname.type = 'password'

    // 1. 获取
    const ipt = document.querySelector('input')
    // console.log(ipt.checked)  // false   只接受布尔值
    ipt.checked = true
    // ipt.checked = 'true'  // 会选中,不提倡  有隐式转换

    // 1.获取
    const button = document.querySelector('button')
    // console.log(button.disabled)  // 默认false 不禁用
    button.disabled = true   // 禁用按钮

  </script>
</body>

</html>

四、自定义属性

  • 标准属性:
    • 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如:disabled、checked、 selected
  • 自定义属性:
    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取

在这里插入图片描述

<!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>
</head>

<body>
  <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  // 1
    console.log(one.dataset.spm)  // 不知道
  </script>
</body>

</html>

第五章 定时器-间歇函数

一、定时器函数介绍

  • 网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发
  • 例如:网页中的倒计时
  • 要实现这种需求,需要定时器函数

二、定时器函数基本使用

  • 定时器函数可以开启和关闭定时器

1. 开启定时器

  • setInterval(函数, 间隔时间)
    • 作用:每隔一段时间调用这个函数
    • 间隔时间单位是毫秒

2. 关闭定时器

在这里插入图片描述

  • 一般不会刚创建就停止,而是满足一定条件再停止
    在这里插入图片描述
<!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>
</head>

<body>
  <script>
    // setInterval(函数, 间隔时间)
    // setInterval(function () {
    //   console.log('一秒执行一次')
    // }, 1000)

    function fn() {
      console.log('一秒执行一次')
    }
    // setInterval(函数名, 间隔时间)  函数名不要加小括号
    let n = setInterval(fn, 1000)
    // setInterval('fn()', 1000)
    console.log(n)
    // 关闭定时器
    clearInterval(n)

    // let m = setInterval(function () {
    //   console.log(11)
    // }, 2000)
    // console.log(m)

    // const num = 10
    // num = 10
    // console.log(num)
    let i = 1
    setInterval(function () {
      i++
      document.write(`${i} `)
    }, 200)
  </script>
</body>

</html>

三、案例:阅读注册协议

需求:按钮60秒之后才可以使用
分析:
①:开始先把按钮禁用(disabled 属性)
②:一定要获取元素
③:函数内处理逻辑

  • 秒数开始减
  • 按钮里面的文字跟着一起变化
  • 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
<!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>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。
        【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        // 1. 获取元素
        const btn = document.querySelector('.btn')
        // console.log(btn.innerHTML)  butto按钮特殊用innerHTML
        // 2. 倒计时
        let i = 5
        // 2.1 开启定时器
        let n = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                clearInterval(n)  // 关闭定时器
                // 定时器停了,我就可以开按钮
                btn.disabled = false
                btn.innerHTML = '同意'
            }
        }, 1000)

    </script>
</body>

</html>

第六章 综合案例:轮播图定时器版

需求:每隔一秒钟切换一个图片
分析:
①:准备一个数组对象,里面包含详细信息(素材包含)
②:获取元素
③:设置定时器函数

  • 设置一个变量++
  • 找到变量对应的对象
  • 更改图片、文字信息
  • 激活小圆点:移除上一个高亮的类名,当前变量对应的小圆点添加类

④:处理图片自动复原从头播放(放到变量++后面,紧挨)

  • 如果图片播放到最后一张, 就是大于等于数组的长度
  • 则把变量重置为0
<!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>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
    ]
    // 1. 获取元素 
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    let i = 0  // 信号量 控制图片的张数
    // 2. 开启定时器
    // console.log(sliderData[i])  拿到对应的对象啦
    setInterval(function () {
      i++
      // 无缝衔接位置  一共八张图片,到了最后一张就是 8, 数组的长度就是 8
      if (i >= sliderData.length) {
        i = 0
      }
      // console.log(i)
      // console.log(sliderData[i])
      // 更换图片路径  
      img.src = sliderData[i].url
      // 把字写到 p里面
      p.innerHTML = sliderData[i].title
      // 小圆点
      // 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)

  </script>
</body>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Dom获取&属性操作】JavaScript 全栈体系(十) 的相关文章

随机推荐

  • 关于 Windows 10 下安装 Linux 过程及报 'WSL...' 错误的解决办法

    今天下午在群里看到有朋友发有关 Windows 10 下按安装 Linux 系统 的消息 小白我很是激动啊 Linux 贴近工作 Windows 贴近生活 割舍不下 虽然可以在Windows下安装虚拟机 但是真的很占空间 0 0 而这个消息
  • 逻辑回归、激活函数sigmoid、损失及优化、案例代码实现

    一 逻辑回归 逻辑回归 Logistic Regression 是机器学习中的一种分类模型 是一种分类算法 与回归之间有一定的联系 由于算法的简单和高效 在实际中应用非常广泛 应用场景 广告点击率 是否为垃圾邮件 是否患病 金融诈骗 虚假账
  • Java-API简析_java.lang.Float类(基于 Latest JDK)(浅析源码)

    版权声明 未经博主同意 谢绝转载 请尊重原创 博主保留追究权 https blog csdn net m0 69908381 article details 131129886 出自 进步 于辰的博客 因为我发现目前 我对Java API的
  • Sqoop的简单使用案例和一些常用命令及参数

    Sqoop的简单使用案例 1 导入数据 在Sqoop中 导入 概念指 从非大数据集群 RDBMS 向大数据集群 HDFS HIVE HBASE 中传输数据 叫做 导入 即使用import关键字 1 1 RDBMS到HDFS 1 确定Mysq
  • java——编程案例

    文章目录 案例1 买飞机票 案例2 找素数 案例3 开发验证码 案例4 数组元素的复制 案例5 评委打分 案例6 数字加密 案例7 模拟双色球 案例1 买飞机票 import java util Scanner public class T
  • stm32ftp服务器实现文件传输,stm32 ftp服务器

    stm32 ftp服务器 内容精选 换一换 客户端压力机硬件要求如表1所示 负载均衡节点 LVS 硬件要求如表2所示 缓存节点 Nginx ATS 硬件要求如表3所示 源站节点 Nginx 硬件要求如表4所示 操作系统要求如表5所示 软件要
  • MSN下载2010最新版

    转载的 哈哈 我的笔记 MSN 最新微软官网下载地址 NLP伪原创技术早期并不是很受欢迎 基于主动学习的伪原创句法识别研究 这几年专注于Web开发 Web界面设计的心得在这篇文章中已经与大家分享 做项目时 如何做比较美观大方的数据输入窗体
  • apisix高性能网关-中文开发文档

    2020年6月12日13 48 33 github https github com apache incubator apisix 目前此项目已有成为apache孵化项目 官方中文文档 https github com apache in
  • 拓展人脉,把握机会,摆脱“孔乙己的长衫”

    孔乙己的长衫 学历究竟成为敲门砖还是枷锁 孔乙已是鲁迅笔下人物 穷困流倒还穿着象征读书人的长衫 迁腐 麻木 最近 大家自我调佩是 当代孔乙己 学历成为思想负担 找工作时高不成低不就 我将从以下几个方面来说一说我对这方面的看法 我认为 在当今
  • 1. 两数之和

    目录 给定一个整数数组 nums 和一个整数目标值 target 请你在该数组中找出 和为目标值 target 的那 两个 整数 并返回它们的数组下标 你可以假设每种输入只会对应一个答案 但是 数组中同一个元素在答案里不能重复出现 你可以按
  • 数据结构--计算表达式完整版(涉及乘方)

    思路 两个栈 数据栈与符号栈 在描述优先级时 我们将加减描述为 I级 乘除为 II既 乘方为 III级 1 在之前的只有加减乘除的计算表达式里 就有了初步思路 当我们要计算的时候 局部计算函数 数字栈与符号栈 分别在数字栈顶取出两个操作数
  • i2c_SLAVE

    driver driver通过I2C的接口与DUT相连 负责接收DUT通过接口传来的地址数据等读写信息并作出反应 将sequencer中传来的trans中的数据驱动到总线上并根据设置的ack和nack作出回应 将总线上写来的数据存到tran
  • Visual Studio 2019 C语言程序(VS2019 C语言)

    新的Visual Studio 2019出来已经有一段时间了 博主也是一开始就从vs2017换到了vs2019 发现整体的操作流程还是有一定的改变 因为之前发表过一个vs2017的博客 对Visual Studio IDE和风格确实非常喜欢
  • Qt5 通过 QFtp 实现 Ftp文件下载

    在Qt5环境下使用自编译的QFtp库 参考官方提供的实例 对部分内容进行更改 实现了Ftp下载文件的客户端 详细代码如下 h头文件 ifndef FTPWINDOW H define FTPWINDOW H include
  • linux下查看某服务端口对应的进程ID

    Linux下查看某端口号所对应的进程ID 使用lsof命令 格式为 lsof i 端口号 例如 lsof i 30000 root Web Service CAServer lsof i 30000 COMMAND PID USER FD
  • oracle的io优化--db_writer_processes & dbwr_io_slaves对比

    author skate time 2011 09 29 db writer processes 和 dbwr io slaves对比 在计算机世界里 磁盘的发展速度远低于cpu memory 磁盘io现在已经成为计算机的瓶颈 对于orac
  • 揭密微信跳一跳小游戏那些外挂

    欢迎大家前往云 社区 获取更多腾讯海量技术实践干货哦 作者 Hahn 腾讯高级UI工程师 由 WeTest质量开放平台团队 发布于云 社区 WeTest 导读 张小龙 这个游戏发布以后 其实它的效果有点超出我们的预期 我们自己开玩笑说 这个
  • mysql数据表查询操作

    数据表查询操作 准备工作 导入之前需要先创建一个数据库 数据库资料传送门 使用新创建的数据库 使用 source 文件地址 导入数据 create database db charset utf8 use db source home py
  • win10网上邻居看不到别的共享电脑怎么样办

    https jingyan baidu com article 4853e1e5b714aa1909f72600 html 转载于 https www cnblogs com kuangke p 10901469 html
  • 【Dom获取&属性操作】JavaScript 全栈体系(十)

    Web APIs 第四章 操作元素属性 一 操作元素常用属性 还可以通过 JS 设置 修改标签元素属性 比如通过 src更换 图片 最常见的属性比如 href title src 等 语法 对象 属性 值