WEB APIs 一

最新推荐文章于 2024-09-07 10:11:54 发布

1_菜鸟初学者

最新推荐文章于 2024-09-07 10:11:54 发布

阅读量42

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_48328683/article/details/135116962

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.1变量声明

变量声明有三个 var let 和 const
使用时排除 var, 比较老还有很多问题
建议：const优先，尽量使用const
- const语义化更好
- 很多变量我们声明时候就知道它不会改变，那么为什么不用const
有了变量先给const，如果发现后面需要修改，再改为let
const声明的值不能更改，而且const声明变量的时候需要进行初始化
但是对于引用数据类型，const声明的变量，里面存的不是值，是地址
所以只要引用数据类型的地址不变，里面的内容改变了也是可以const，如下

建议数组和对象用const来声明

一、Web API基本认知

1.1作用和分类

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

1.2 什么是DOM

DOM（文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用
- 开发网页内容特效和实现用户交互

1.3DOM树

DOM树是什么
- 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系

1.4DOM对象（重要）

DOM对象：浏览器根据html表标签生成的JS对象
- 所有的标签属性都可以在这个对象身上找到
- 修改这个对象的属性会自动映射到标签上
DOM的核心思想
- 把网页内容当做对象来处理
document对象
- 是DOM里面提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
  - 例：document.wirte()
- 网页所有的内容都在document里面

二、获取DOM对象

提问：我们想要操作某个标签首先做什么？

肯定首先选中这个标签，根CSS选择器类似，选中标签才能操作
查找元素DOM元素就是利用JS选择页面中标签元素

2.1根据CSS选择器来获取DOM元素（重点）

1.选择匹配的第一个元素

语法：
在这里插入图片描述
参数：
包含一个或者多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null

2.选择匹配的多个元素

语法：
在这里插入图片描述
参数:
包含一个活多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的NodeList 对象集合

得到的是一个伪数组：

有长度有索引的数组
但是没有pop() push()等数组方法

想得到里面的每一个对象，则需要遍历(for)的方式来获得

注：哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已

在这里插入图片描述

三、操作元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
就是操作对象使用的点语法
如果想要修改标签元素里面的内容，则可以使用如下几种方式：

3.1对象.innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

<body>

  <div class="box">我是内容</div>
  <script>
    const box = document.querySelector('.box')
    console.log(box.innerText)
    box.innerText = '我是新内容'
  </script>
</body>

3.2对象.innerHTML属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

<body>

  <div class="box">我是内容</div>

  <script>
    const box = document.querySelector('.box')
    box.innerHTML = '<strong>内容</strong>'

  </script>
</body>

四、操作元素属性

4.1操作元素常用属性

还可以通过JS设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如：href、title、src等
语法：

更换页面图片

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

我们刷新页面，页面中的图片随机显示不同的图片
分析：
①：随机显示，则需要用到随机函数
②：更换图片需要用到图片的src属性，进行修改
③：核心思路：

1.获取图片元素
2.随机得到图片序号
3.图片.src=图片随机路径

<body>
  <img src="../images/1.webp">
  <script>
    const img = document.querySelector('img')
    let random = Math.floor(Math.random() * 7)
    img.src = `../images/${random}.webp`
  </script>
</body>

4.2操作元素样式属性

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

1.通过style属性操作css

语法：

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    const box = document.querySelector('.box')
    box.style.width = '100px'
    //多组单词小驼峰
    box.style.backgroundColor = 'hotpink'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red'
  </script>
</body>

在这里插入图片描述

更换背景图

<style>
    body {
      background: url(../images/desktop_1.jpg) no-repeat top center/ cover;
    }

    h1 {
      color: red;
      text-align: center
    }
  </style>
</head>

<body>
  <h1>
    我是帅哥
  </h1>
  <script>
    const box = document.querySelector('body')
    let random = Math.floor(Math.random() * 10 + 1)
    box.style.background = `url(../images/desktop_${random}.jpg) no-repeat top center/ cover`
  </script>

</body>

2.操作类名(className)操作css

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以借助于css类名的形式
语法：
注意：
- 由于class是关键字，所以使用className去代替
- calssName是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

<body>
  <div class="nav">1234</div>
  <script>
    const div = document.querySelector('nav div')
    div.className = 'box'
  </script>
</body>

3.通过classList操作类型控制css

为了解决className容易覆盖之前的类名，我们可以通过calssList方式追加和删除类型
语法

<body>

  <div class="box active">文字</div>
</body>
<script>
  const box = document.querySelector('.box')
  //修改样式
  //追加类add()类名不加点，并且是字符串
  //box.classList.add('active')
  //删除类 remove()
  //box.classList.remove('box')
  //切换类 toggle() 有就删，没有就加
  box.classList.toggle('active')
</script>

在这里插入图片描述

4.3操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
- 获取：DOM对象.属性名
- 设置：DOM对象.属性名 = 新值

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

  </script>

表单属性中添加就有效果，移除就没有效果，一律使用布尔值来表示，如果为true代表添加了该属性如果为false代表移除了该属性
比如：disabled、checked、selected

<body>
  <input type="checkbox" name="">
  <button>按钮</button>
  <script>
    const ipt = document.querySelector('input')
    ipt.checked = true

    const but = document.querySelector('button')
    but.disabled = true

  </script>
</body>

4.4自定义属性

标签属性：标签自带的属性比如class id tilte等，可以直接使用点语法操作，比如：disabled、checked、selected
自定义属性：
- 在html5中推出来的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取

<body>
  <div data-id="1">1</div>

  <script>
    const one = document.querySelector('div')
    console.log(one.dataset);
  </script>
</body>

五、定时器-间歇函数

5.1定时器函数介绍

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

5.2定时器函数基本使用

定时器函数可以开启和关闭
1、开启定时器
在这里插入图片描述

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒

<script>
    setInterval(function () {
      document.write('1')
    }, 1000)

    function fn(){
      document.write('2')
    }
    //函数名不加小括号
    setInterval(fn, 1000)
  </script>

注：
1、函数名字不需要加括号
2、定时器返回的是一个id数字

2.关闭定时器

在这里插入图片描述

<body>
  <script>
    setInterval(function () {
      document.write('1')
    }, 1000)

    function fn() {
      document.write('2')
    }
    //函数名不加小括号
    let n = setInterval(fn, 1000)
    console.log(n)
    //关闭定时器
    clearInterval(n)
  </script>
</body>

一般是满足某一条件才关闭

案例：阅读注册协议
需求：按钮60秒之后才可以用
分析：
①：开始先把按钮禁用（disabled属性）
②：一定要获取元素
③：函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0停止定时器里面文字变为同意最后按钮可以点击

<body>
  <textarea name="" id="" cols="30" rows="10">
    用户注册协议
    欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
    【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议(5)</button>
  <script>
    const buo = document.querySelector('.btn')

    let i = 5
    let n = setInterval(function () {
      i--
      buo.innerHTML = `我已经阅读用户协议(${i})`
      if (i === 0) {
        clearInterval(n)
        buo.disabled = false
        buo.innerHTML = '我同意'
      }
    }, 1000)
    buo.innerHTML = '我同意'

  </script>
</body>

六、综合案例

需求：每隔一秒切换一个图片
分析：
①：准备一个数组对象，里面包含详细信息
②：获取元素
③：设置定时器函数
设置一个变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
④：处理图片自动复原从头播放（放到变量++后面，紧挨）
如果图片播放到最后一张，就是大于等于数组的长度
则把变量重置为0

<script>
    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')

    //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')
      //给当前li加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

    }, 1000)
  </script>