JavaScript(二)-Web APIS

文章目录

Web API 基本认知
- 作用和分类
- 什么是DOM
- DOM树
- DOM对象
- 获取DOM对象
- 操作元素内容
- 操作元素属性
- - 操作元素常用属性
  - 操作元素样式属性
  - 自定义属性
- 定时器-间歇函数
- - 定时器函数的理解
  - 定时器函数使用
  - - 间歇函数
- 事件监听与绑定
- 事件监听
- 事件监听版本
- - 事件类型
  - 事件对象
  - - 什么是事件对象
    - 获取事件对象
    - 事件对象中的常用属性
  - 环境对象
  - 回调函数

Web API 基本认知

作用和分类

作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

在这里插入图片描述

DOM树

在这里插入图片描述

DOM对象

在这里插入图片描述

获取DOM对象

1、根据CSS选择器来获取元素（重点）
在这里插入图片描述

<!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: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <div class="box">456</div>
  <p id="nav">导航栏</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    // 1.获取匹配到的第一个元素
    const box1 = document.querySelector('div')
    console.log('box1', box1);
    const box2 = document.querySelector('.box')
    console.log('box2', box2);
    const p = document.querySelector('#nav')
    console.log('p', p);
    const li = document.querySelector('ul li:first-child')
    console.log('li', li);
  </script>
</body>

</html>

2、选择匹配的多个元素
在这里插入图片描述
注意点：选择所有之后只能通过遍历的方式一次给里面的元素做修改

操作元素内容

对象.innerText属性
对象.innerHTML属性
他们之间的区别

操作元素属性

操作元素常用属性

在这里插入图片描述

操作元素样式属性

在这里插入图片描述

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

在这里插入图片描述

自定义属性

在这里插入图片描述

定时器-间歇函数

定时器函数的理解

在这里插入图片描述

定时器函数使用

间歇函数

开启
在这里插入图片描述
关闭

案例
轮播图效果代码

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

<head>
  <meta charset="UTF-8">
  <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-color: 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="./image/1.png" alt="">
    </div>
    <div class="slider-footer">
      <p>123456</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>
    const sliderData = [
      { url: './image/1.png', title: '1', color: "rgb(100, 67, 68)" },
      { url: './image/2.png', title: '2', color: "rgb(43, 35, 26)" },
      { url: './image/3.png', title: '3', color: "rgb(36, 33, 31)" },
      { url: './image/4.png', title: '4', color: "rgb(100, 67, 68)" },
      { url: './image/1.png', title: '1', color: "rgb(67, 92, 90)" },
      { url: './image/2.png', title: '2', color: "rgb(166, 131, 143)" },
      { url: './image/3.png', title: '3', color: "rgb(53, 29, 25)" },
      { url: './image/4.png', title: '4', color: "rgb(99, 72, 114) " },

    ]
    // 1.获取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')

    // 2.开启定时器
    let i = 0
    setInterval(function () {

      i++
      if (i == sliderData.length) i = 0
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      // 小圆点
      // 先删除之前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')


    }, 1000)






  </script>
</body>

</html>