十分钟快速干完 Web Api 应用

小藤神
144 阅读7分钟

一、DOM-操作元素和事件基础

1.WebApi-基本认识

  • WebApi是浏览器提供的一组接口

image.png

  • API: 应用程序接口（Application Programming Interface）
  • 接口： 本质上就是各种函数，无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
  • 作用： 开发人员使用 JavaScript提供的接口来操作网页元素和浏览器

image.png

2.DOM-基本认识

  • DOM（Document Object Model——文档对象模型）
  • 作用： DOM用来 操作网页文档，开发网页特效和实现用户交互
  • DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
  • document对象是DOM顶级对象，是网页内容的入口
  • document对象中提供的属性和方法都是用来访问和操作网页内容的

image.png

3.DOM-事件基础

  • 事件是浏览器针对用户的各种行为定义出的一些列的响应机制，当程序在运行时，用户特定的行为就会触发特定的响应机制来执行指定的函数代码

image.png

事件监听三要素
  • 事件源(哪个元素对象被触发了) -> 事件监听是将事件处理函数注册到元素对象身上
  • 事件类型 (什么情况下触发，点击还是鼠标经过等)
  • 事件处理函数（要做什么事情，是弹出警告框，还是修改元素值，还是修改css属性）

二、事件进阶

image.png

1.事件流

  • 什么是事件流： 事件流指的是事件完整执行过程中的流动路径
  • 当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

image.png

2.阻止冒泡

  • 因为默认就有冒泡阶段的存在，所以容易导致事件影响到父级元素（祖先元素）
  • 语法：事件对象.stopPropagation()

image.png

3.事件委托

  • 事件委托(EventDelegation) ：是JavaScript中注册事件的常用技巧，也称为事件委派、事件代理
  • 简单理解： 原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务
  • 事件对象.target获得触发事件的元素对象
  • 事件对象.target. tagName 可以获得真正触发事件的元素名

4.阻止默认行为

  • 像用户点击了a标签，浏览器默认会发生一次跳转
  • 用户点击了表单中的提交按钮时浏览器会自动提交一次表单
  • 语法：事件对象.preventDefault()

5.事件解绑

image.png

6.页面加载事件

  • 页面加载事件，分为 load 和 DOMContentLoaded 两个，在页面加载完毕后触发，可以用来处理一些需要再页面加载完成后才能处理的一些逻辑

image.png

7.元素滚动事件

  • 滚动条在滚动的时候持续触发的事件，用来监听整个页面滚动 或者某个元素滚动
  1. 监控浏览器中整个页面的滚动行为，可以将scroll事件绑定到 window上
  2. 监控某个html元素的滚动行为，将scroll实践绑定到该元素上

scrollTop / scrollLeft, 被卷去的头部或者左侧，可以读取，也可以修改（赋值可以让页面滚动到指定位置） image.png

8.页面尺寸事件

  • 在窗口尺寸改变的时候触发事件resize

两种用法：

  1. 获取页面大小

document.documentElement.clientWidth

document.documentElement.clientHeight

  1. 获取元素大小

dom元素.clientWidth

dom元素.clientHeight

举例：页面中的div盒子当页面宽>=400时，背景为绿色green，<400时为黄色yellow

3.gif

9.元素尺寸与位置

大小： offsetWidth 和 offsetHeight 位置: offsetLeft 和 offsetTop

image.png

三、节点操作

1.日期对象

  • 日期对象Date，是JavaScript内置对象，是用来表示日期和时间的对象
  • 作用：可以得到当前系统日期和时间 以及 格式化日期和时间
<body>
  <script>
    // 1. 实例化日期对象
    // 1.1 得到当前的日期和时间
    const date = new Date()
    console.log(date)

    // 1.2 得到指定的日期和时间
    const date1 = new Date('2099-12-12 08:08:08')
    console.log(date1)
  </script>

</body>

image.png

image.png

时间戳
  • 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型)，它是一种特殊的计量时间的方式

image.png

Date.now() 得到当前日期的时间戳
// +new Date() 获取指定日期时间的时间戳
console.log(+new Date('2025-1-1'))

image.png

2.DOM 节点操作

DOM树：DOM 将 HTML文档以树状结构直观的表现出来，我们称之为 DOM 树 或者 节点树
节点（Node） 是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

image.png

  • 父节点查找 => 子元素.parentNode
  • 子节点查找 => 父元素.children
  • 上一个兄弟节点 => 节点对象.previousElementSibling
  • 下一个兄弟节点 => 节点对象.nextElementSibling

image.png

  • 1. 父元素最后一个子节点之后，插入节点元素 => element.append()
  • 2. 父元素第一个子元素的之前，插入节点元素 => element.prepend()
  • 3. 把对象从它所属的 DOM 树中删除 => element.remove()

3.M端事件

触屏事件 touch（也称触摸事件），鸿蒙、Android 、IOS都有。

image.png

判断左滑右滑
<!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>M端触摸事件</title>
  <style>
    .box {
      width:200px;
      height: 200px;
      background-color: pink;     
    }
  </style>
</head>

<body>
  <div class="box">div盒子</div>
  <script>
    // 触摸事件
    const box = document.querySelector('.box')
    let startNum = 0  // 保存开始位置的数字
    let endNum = 0 // 保存结束位置的数字
    // 1. 手指触屏开始事件 touchstart
    box.addEventListener('touchstart', function (e) {
      // 记录开始点击位置
      startNum = e.touches[0].clientX
    })
    // 2. 手指触屏滑动事件 touchmove
    box.addEventListener('touchmove', function (e) {
     // 记录结束移动位置
      endNum = e.touches[0].clientX
    })
    // 3. 手指触屏结束事件  touchend
    box.addEventListener('touchend', function (e) {
      // 判断左滑还是右滑
      let lessnum = endNum - startNum
      if (lessnum < 0) {
        alert('向左移动'+lessnum)      
      } else {
        alert('向右移动'+lessnum)
      }
    })
  </script>
</body>

</html>

四、BOM-操作浏览器

1.JavaScript的组成

  • ECMAScript:
    • 规定了js基础语法核心知识。
    • 比如：变量、分支语句、循环语句、对象等等 image.png

2.window对象

BOM (Browser Object Model ) 是浏览器对象模型

  • window对象是一个全局对象，也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

image.png

3.定时器-延迟函数

  • setTimeout(回调函数, 延迟时间毫秒)
  • let timerId = setTimeout(回调函数, 延迟时间毫秒)
  • clearTimeout(timerId) // 清除延时函数

4.location对象

location是一个对象 它拆分并保存了 URL 地址的各个组成部分

image.png

5.navigator对象

navigator是对象，它记录了浏览器自身的相关信息

常用属性和方法：

  • 通过 userAgent 检测浏览器的版本及平台
  • 获取剪贴板内容：navigator.clipboard.readText()
// 检测浏览器版本及平台
navigator.userAgent

// 读取当前剪贴板内容
navigator.clipboard.readText()
    .then(res=>{
      console.log(res)      
    })

6.history对象

history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等

image.png

7.本地存储（重点）

本地存储：将数据存储在本地浏览器中，分为两种技术方案：

  1. localStorage

页面刷新或者关闭不丢失数据，实现数据持久化

  1. sessionStorage

只在当前打开的浏览器中有效，关闭浏览器后数据丢失

  • sessionStorage和 localStorage 存储容量约 5M 左右
localStorage（重点）：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

image.png image.png

  • 需要将复杂数据类型转换成 JSON字符串,再存储到本地：JSON.stringify(复杂数据类型数组或者对象)
  • 把取出来的字符串转换为对象：JSON.parse(JSON字符串)

image.png

avatar
文章
阅读
粉丝