web APIs

最新推荐文章于 2024-09-13 21:00:00 发布

Heart_brave

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量102

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Heart_brave/article/details/130565101

版权

1. Web API 基本认知

1.1 作用和分类

作用:使用Js去操作浏览器和html
分类：DOM(文档对象模型)、BOM(浏览器对象模型)

1.2 DOM树

将HTML文档以树状结构直观的表现出来，我们称之为DOM树或文档树
在这里插入图片描述

1.3 DOM对象

浏览器根据html标签生成的JS对象

所有标签属性都可以在这个对象上面找到
修改这个对象的属性会映射到标签身上

2. 获取DOM元素

根据CSS选择器来获取DOM元素
1. 选择匹配的第一个元素
  document.querySelector('CSS选择器')
2. 选择匹配的多个元素
  document.querySelectorAll('CSS选择器')

其他获取DOM元素的方法（了解）

<!-- 根据id获取一个元素 -->
  document.getElementById('nav')
<!-- 根据标签获取一类元素 获取页面所有的div -->
  document.getElementByTagName('div')
<!-- 根据类名获取元素 获取页面所有类名为w的 -->
  document.getElementByClassName('w')

3.操作元素内容

3.1 元素.innerText属性

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

3.2 元素.innerHTML属性

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

4.操作元素属性

4.1 操作元素常用属性

语法：对象.属性 = 值

4.2 操作元素样式属性

语法：对象.style.样式属性 = '值'
注意：多组单词的采用小驼峰命名法
如果修改样式过多可通过类名修改样式
语法： 元素.class = '类名'
(会覆盖之前类名)

为了解决className容易覆盖以前类名的问题，我们可以通过classList方式追加或删除类名
语法：

<!-- 追加一个类 -->
元素.classList.add('类名')
<!-- 删除一个类 -->
元素.classList.remove('类名')
<!-- 切换一个类 -->
元素.classList.toggle('类名')

4.3 操作表单元素属性

获取： DOM对象.属性名
设置： DOM对象.属性名 = 新值

4.4 自定义属性

在HTML5中推出来专门的data-自定义属性
在标签上一律以data-开头
在DOM对像上一律以dataset对象方式获取

5.定时器—间歇函数

5.1 开启定时器

setInterval(函数名，间隔时间)
作用：每间隔多少时间调用这个函数；间隔时间单位为毫秒。

5.2 关闭定时器

let 变量名 = setInterval(函数名，间隔时间)
clearInterval(变量名)

6.事件监听（绑定）

6.1 事件监听

语法： 元素对象.addEventListener('事件类型'，要执行的函数)
事件监听三要素
1. 事件源：哪个dom元素被事件触发了，要获取dom元素
2. 事件类型：用什么方式触发，比如鼠标单机click，鼠标经过mouseover
3. 事件调用函数：要做什么事

6.2 事件监听的版本

DOM L0
事件源.on事件 = function(){}
DOM L2
事件源.addEventListener(事件，处理函数)
区别
on方式会被覆盖，addEventListener方式可以绑定多次，拥有事件更多特性，推荐使用。

7.事件类型

7.1 鼠标事件

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

7.2 焦点事件

focus 获得焦点
blur 失去焦点

7.3 键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

7.4 文本事件

input 用户输入事件

8.事件对象

语法：如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
部分常用属性
- type 获取当前的事件类型
- clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
- key 用户按下的键盘键的值（现在不提倡使用keycode）
trim方法：去除字符串左右两端的空格

9.环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。

函数的调用方式不同，this指代的对象也不同
[谁调用，this就是谁]是判断this指向的粗略规则
直接调用函数，其实相当于是window.函数，所以，this指代window

10.回调函数

如果将函数A作为参数传递给函数B时，我们称A为回调函数。

11.事件流

11.1 事件流和两个阶段说明

事件流指的是事件完整执行过程中的流动路径
两个阶段:捕获阶段冒泡阶段
实际工作都是以使用事件冒泡为主

11.2 事件捕获(了解)

代码:
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
说明:
- addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
- 若传入false代表冒泡阶段触发,默认就是false
- 若使用L0的事件监听,则只有冒泡阶段,没有捕获

11.3 事件冒泡

简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听的第三个参数是false,或者默认都是冒泡

11.4 阻止冒泡

语法: 事件对像.stopPropagation()
注意:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
阻止默认行为：e.preventDefault() (比如链接的跳转和表单的跳转)

11.5 解绑事件

on事件方式,直接使用null覆盖偶就可以实现事件解绑(L0)
语法:

<!-- 绑定事件 -->
btn.onclick = function(){
    alert('点击了')
  }
<!-- 解绑事件 -->
btn.onclick = null

addEventListener方式(L2)，必须使用：removeEventListener(事件类型，事件处理函数)
例如：

function fn(){
      alert ('点击了') 
  }
  <!-- 绑定事件 -->
  btn.addEventListener('click',fn)
  <!-- 解绑事件 -->
  btn.removeEventListener('click',fn)

12.事件委托

原理：事件委托其实是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素事件。

13.其他事件

13.1 页面加载事件

监听页面所有所有资源加载完毕：
给window添加load事件

<!-- 页面加载事件 -->
  window.addEventListener('load',function(){
      <!-- 执行的操作 -->
  })

不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件

监听页面DOM加载完毕
给document添加DOMContentLoaded事件

<!-- 页面加载事件 -->
 document.addEventListener('DOMContentLoaded',function(){
     <!-- 执行的操作 -->
 })

13.2 页面滚动事件

事件名:scroll

监听整个页面滚动:

<!-- 页面滚动事件 -->
  window.addEventListener('scroll',function(){
      <!-- 执行的操作 -->
  })

scrollLeft和scrollTop(属性) 获取被卷去部分的大小
document.documentElement(获取HTML页面)

13.3 页面尺寸事件

窗口尺寸改变时触发事件(resize)

<!-- 窗口尺寸改变事件 -->
  window.addEventListener('resize',function(){
      <!-- 执行的操作 -->
  })

检测屏幕尺寸

<!-- 窗口尺寸改变事件 -->
  window.addEventListener('resize',function(){
      let w = document.documentElement.clientWidth
      console.log(w)
  })

获取元素可见部分的宽高（不包含边框，margin，滚顶条等）
clientWidth和clientHeight

13.4 元素尺寸与位置

获取宽高
- 获取元素自身宽高，包括元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
- 获取到的是数值，方便计算
- 获取的是可视宽高，如果盒子是隐藏的，获取的结果为0
获取位置
- 获取元素距离自己定位父级元素的左、上距离
- offsetLeft和offsetTop（注意是只读属性）
获取尺寸
- element.getBoundingClientRent（）
  方法返回元素的大小及其相对视口的位置

总结

在这里插入图片其他事件总结.png描述

14.日期对象

14.1 实例化

在代码中发现new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
- 获得当前时间
  const date = new Date()
- 获得指定时间
  const date = new Date('日期')

14.2 日期对象方法

在这里插入图片描述

14.3 时间戳

什么是时间戳
是指1970年1月1日00时00分00秒起至现在的毫秒数，是一种特殊的时间里计量方式
算法
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换为剩余时间的年于日时分秒就是倒计时时间

获得时间戳的方法

使用getTime()方法

const date = new Date()
console.log(date.getTime())

简写 +new Date()
(无需实例化)
使用Date.now()
- 无需实例化
- 但是只能返回当前时间戳，而前面两种可以返回指定时间的时间戳

15.节点操作

15.1 查找节点

父节点查找(返回最近一级的父元素)
子元素.parentNode
子节点查找
- childNodes（获取所有子节点，包括文本节点，注释节点等）
- children属性（重点）
  仅返回所有元素节点；返回的是一个伪数组
  父元素.children
兄弟关系查找
- 下一个兄弟节点
  nextElementSibling属性
- 上一个兄弟节点
  previousElementSibling属性

15.2 增加节点

创建节点
语法： document.createElement('标签名')
追加节点
- 要想在界面中看到，还得插入到某个父元素中去
- 插入到父元素的最后一个子元素：
  语法: 父元素.appendChild(要插入的元素)
- 插入到父元素中某个子元素的前面：
  语法： 父元素.insertBefore(要插入的元素，在哪个元素前面)
克隆节点
语法: 元素.cloneNode(布尔值)
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点

15.3 删除节点

要删除元素必须通过父元素删除
语法： 父元素.removeChild(要删除的元素)

16.M端事件

移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件）
常见的触屏事件有：

触摸touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

17.window对象

17.1 定时器——延时函数

javascript内置的一个用来让代码延迟执行的函数，叫setTimeout
语法： setTimeout(回调函数，等待的秒数)
setTimeout仅仅执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

清除延时函数：

let timer = setTimeout(回调函数，等待的秒数)
clearTimeout(timer)

17.2 location对象

location的数据类型是对象，他拆分并保存了URL地址的各个组成部分
常用属性和方法：
- search属性获取地址中携带的参数，符号？后边的部分
- hash属性获取地址中的哈希值，符号#后边的部分
- reload方法用来刷新当前页面，传入参数true时表示强制刷新

17.3 navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用的属性和方法：
- 通过userAgent检测浏览器的版本及平台

17.4 history对象

常用的属性和方法：

history对象方法	作用
back（）	可以后退功能
forward（）	前进功能
go（参数）	前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面

18.本地存储

18.1 本地存储分类——localStorage

作用：将数据永久储存在本地(用户的电脑)，除非手动删除，否则关闭页面也会存在
特性：
- 可以多窗口（页面）共享（同意浏览器可以共享）
- 以键值对的形式储存使用
语法：
- 存储数据：
  localStorage.setItem(key,value)
- 获取数据：
  localStorage.getItem(key)
- 删除数据
  localStorage.removeItem(key)

18.2 本地存储分类——sessionStorage

特性：

生命周期为关闭浏览器窗口
在同一个窗口下可共享数据
以键值对的形式存储使用
用法跟localStorage基本相同

18.3 存储复杂数据类型

需要将复杂数据类型转换为JSON字符串，再存储到本地
语法： JSON.stringify(复杂数据类型)
把JSON字符串转化为对象:
JSON.parse(复杂数据类型)

19.数组map()和join()方法

19.1 map方法

map可以遍历数组处理数据，并返回新的数组

语法：

const arr = ['red','green','blue']
const newArr = arr.map(function (ele,index) {
      console.log(ele)  //数组元素
      console.log(index)  //数组索引号
      return ele + '颜色'
   })
      console.log(newArr)  //['red颜色','green颜色','blue颜色']

map也称为映射。map重在有返回值

19.2 join方法

join()方法用于把数组中的所有元素转换为一个字符串

语法：

  const arr = ['red','green','blue']
  console.log(arr.join('')) //redgreenblue

参数为分隔字符串符号，默认为’,’

20.正则表达式

什么是正则表达式
- 正则表达式是用于匹配字符串中字符组合的模式。在Javascript中，正则表达式也是对象
- 通常用来查找、替换那些符合正则表达式的文本，许多语言都支撑正则表达式
语法
1. 定义正则表达式的语法：
  const 变量名 = /表达式/
2. 判断是否有符合规则的字符串：
  规则名.test(被检测的字符串)返回true或false
  规则名.exec(被检测字符串)返回一个数组或null

20.1 元字符

边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)

边界符说明
^ 表示匹配首行的文本(以谁开始)
$ 表示匹配尾行的文本(以谁结束)
(^和$同时出现表示精确匹配)
量词(表示重复次数)

量词说明
* 重复零次或更多次
+ 重复一次或更多次
？重复零次或一次
{n} 重复n次
{n，} 重复n次或更多次
{n，m} 重复n次到m次
字符类(比如/d 表示0~9)
1. []匹配字符集合，只要后边的字符串包含括号中的字符都返回true（只匹配一个）
2. []里使用连字符 - 表示一个范围
3. []里加上 ^ 表示取反
4. 预定义类

边界符	说明
^	表示匹配首行的文本(以谁开始)
$	表示匹配尾行的文本(以谁结束)
(^和$同时出现表示精确匹配)

量词	说明
*	重复零次或更多次
+	重复一次或更多次
？	重复零次或一次
{n}	重复n次
{n，}	重复n次或更多次
{n，m}	重复n次到m次

20.2 修饰符

修饰符约束正则执行某些细节行为，如区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
- i表示匹配时字母不区分大小写
- g表示匹配所有满足正则表达式的结果
替换replace
字符串.replace(/正则表达式/，'替换的文本')

表示重复次数)

量词|说明
---|----
*|重复零次或更多次
+|重复一次或更多次
？|重复零次或一次
{n}|重复n次
{n，}|重复n次或更多次
{n，m}|重复n次到m次

字符类(比如/d 表示0~9)
1. []匹配字符集合，只要后边的字符串包含括号中的字符都返回true（只匹配一个）
2. []里使用连字符 - 表示一个范围
3. []里加上 ^ 表示取反
4. 预定义类
  [外链图片转存中…(img-qc0qgQ1b-1683542950579)]

20.2 修饰符

修饰符约束正则执行某些细节行为，如区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
- i表示匹配时字母不区分大小写
- g表示匹配所有满足正则表达式的结果
替换replace
字符串.replace(/正则表达式/，'替换的文本')

Heart_brave

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫