当前位置: 首页 > news >正文

前端学习笔记 | WebAPIs(DOM+BOM)

一、作用和分类

1、基本概念

作用:使用JS去操作HTML和浏览器

分类:DOM(文档对象模型)和BOM(浏览器对象模型)

html的标签=JS的DOM对象

2、获取DOM对象-参数必须加引号

(1)选择匹配的第一个元素:可直接进行修改

document.querySelector('选择器') //返回DOM对象

(2)获取多个:返回伪数组,只能通过遍历的方式修改

document.querySelectorAll('ul li') //返回DOM对象

(3)其他

b8ccde623f2245f58be8d1b11ce74189.png

二、操作元素

1、操作元素内容

(1)obj.innerText 仅获取文字

(2)obj.innerHTML 可以解译标签(添加/更改标签)

2、操作元素属性

(1)img.src

(2)img.title

...

3、操作元素样式属性

(1)通过style修改(麻烦)

语法:obj.style.属性值

注:

a.css中带-的采用小驼峰命名法,如background-color→backgroudColor

b.大部分值都是字符串,需要加''",带单位

c.修改body属性可直接使用:document.body.style.属性=' '

(2)通过类名修改(不推荐)

obj.className=' '

缺点:会覆盖原来的类名,需要手动添加原类名

(3)通过classList修改(推荐)

元素.classList.add('类名')

元素.classList.remove('类名')

元素.classList.toggle('类名')  有就删掉,没有就添加

【案例】轮播图

4、操作元素表单属性

表单.value='' 修改表单的值

表单.type='password' 修改成不可见

input.checked=true/false 复选框选中/不选中

button.disabled=true/false 按钮禁用/不禁用

5、自定义属性

在元素标签中内加属性:data-名称

获取自定义属性集合:元素.dataset

获取自定义属性:元素.dataset.名称

6、间歇函数-计时器

(1)开启定时器

方法1:setInterval(函数名-不加小括号,间隔时间-ms)
方法2:setInterval(function(){},间隔实际-ms)

(2)关闭定时器

clearInterval(定时器名)

三、事件监听

事件是在编程中系统发生的动作或发生的事件

1、事件语法

元素对象.addEventListener('事件类型',要执行的函数)

2、事件监听三要素

事件源:哪个dom元素,要获取dom元素

事件类型:用什么方式触发-点击、鼠标经过...

事件调用的函数:要做什么事

3、事件类型

鼠标事件:click(鼠标点击)、mouseenter(鼠标经过)、mouseleave(鼠标离开)

焦点事件:focus(获得焦点)、blur(失去焦点)

键盘事件:keydown(键盘按下触发)、keyup(键盘抬起触发,推荐)

文本事件:input(用户输入事件)

4、事件对象

是什么:也是个对象,有事件触发时的相关信息

在哪里:事件绑定的回调函数的第一个参数就是事件对象

5552bd99b7be450e972c523944670854.png

5、环境对象

目标:能够分析判读函数运行在不同环境中this所指代的对象

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

谁调用,this就是谁

6、回调函数

是什么:函数A作为参数传递给函数B

应用:定时器、监听事件

四、事件流

事件完全执行的流动路径:捕获阶段+冒泡阶段

1、事件捕获

事件被触发,所有元素从祖先开始到子代依次被执行

2、事件冒泡 

事件被触发,所有元素从子代开始到祖先依次被执行

3、阻止冒泡

把事件限制在当前元素内,防止冒泡:既能阻止冒泡,也能阻止捕获

事件对象.stopPropagation()

4、事件解绑

(1)传统on注册(L0)

btn.οnclick=null

(2)事件监听注册(L2)

使用removeEventLisener(事件,函数名)

匿名函数无法解绑,只能修改成在外部定义的函数

5、鼠标经过事件

mouseover和mouseout会有冒泡效果,不推荐

mouseenter和mouseleave没有冒泡效果,推荐

 五、事件委托

1、是什么

减少事件注册次数,利用冒泡的原理:给父元素添加事件-子元素点击-冒泡到父元素

2、方法

(1)获取父元素

(2)注册事件

(3)利用事件对象.target.tagName找到真正触发元素,设置条件:只有点击真正触发元素才能执行函数

3、阻止事件

(1)阻止冒泡

事件对象.stopPropagation()

(2)阻止默认行为

事件对象e.preventDefault()

六、其他事件 

1、页面加载事件

(1)事件名:load

作用:所有外部资源加载完毕后执行js

window.addEventListener('load'.function(){})

(2)事件名:DOMContentLoaded

作用:HTML文档被完全加载和解析完成后,不用等等样式、图像等完全加载

2、元素滚动事件

事件名:scroll

滚动条在滚动时触发事件

window.addEventListener('scroll'.function(){})

(1)获取被卷去的大小:

  • scrollLeft
  • scrollTop

检测方法:

document.documentElement.scrollTop

(2)scrollTo,滚动至具体位置

window.scrollTo(x,y)

3、页面尺寸事件

窗口改变时触发事件

window.addEventListener('resize'.function(){})

clientWidth、clientHeight:获取宽高(不包含border)

七、元素的尺寸与位置

offsetWidth、offsetHeight:获取宽高(内容+padding+border)

offsetLeft、offsetTop:得到的位置优先级(以带有定位的父级>文档左上角)

dcfc11c5284b4895b00527c5d8e3b991.png

八、日期对象

日期对象:用于表示时间的对象

作用:获取当前系统时间

1、实例化日期对象

//得到当前时间
const data=new Date()

2.转换日期格式

日期对象.toLocaleString()
日期对象.toLocaleTimeString() 仅显示时间
日期对象.toLocaleDateString() 仅显示日期

3.时间戳:计算时间的方式—主要用于计算倒计时

三种方式获取时间戳

1、getTime() 必须实例化Date()
2、+new Date() 推荐
+new Date('2022-4-1 18:30:00')
3、Date.now() 仅能返回当前的时间戳

九、节点操作

1、DOM节点

  • 元素节点
  • 属性节点
  • 文本节点
  • 其他

2、节点操作(元素节点)

(1)查找节点

通过关系来查找

  • 父节点
元素对象.parentNode
  • 字节点
元素对象.children
  • 兄弟节点
元素对象.previousElementSibling 上一个兄弟元素
元素对象.nextElementSibling 下一个兄弟元素

(2)增加节点

步骤1 创建节点

const div = document.createElement('div')

步骤2  追加节点

插入到父元素的最后一个子元素

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素,在哪个元素前面)
e.g ul.insertBefore(li,ul.children[0])

(3)克隆节点

步骤1 克隆元素

元素对象.cloneNode(true)
参数:
true 克隆标签及内容
false 仅可怜标签不克隆内容

步骤2 追加元素

元素对象.appendChild(要插入的元素)

(4)删除节点

删除元素必须通过父元素删除

父元素.removeChild(父元素.children[0])

 十、M端事件(移动端)

1、了解M端常见的事件

  • touchstart 手指在DOM元素中触摸
  • touchmove 手指在DOM元素中滑动
  • touchend  手指在DOM元素中移开

2、swiper插件

(1)引入.css和.js文件

(2)复制demo的HTML内容、CSS内容、JS内容

十一、window对象

1、BOM

2、定时器(延时函数)

只执行一次

setTimeout(回调函数,等待延迟的毫秒数)

清除延时函数

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

3、JS执行机制

同步任务:都在主线程上执行,形成一个执行栈

异步任务:添加到任务(=消息)队列中

(1)普通事件

(2)资源加载

(3)定时器

事件循环:主线程不停地获取任务→执行任务→再获取任务→执行任务

4、location对象

数据类型:对象

  • location.href:获取完整的URL地址,对其赋值时用于地址的跳转
  • location.search:获取地址中携带的参数,符号?后面部分
  • location.hash:获取地址中的哈希值,符号#后面部分
  • reload():刷新页面,强制刷新reload(true)

5、navigator对象

navigator.userAgent:主要用来获取浏览器信息

应用:判断进入pc或者移动端

6、history对象

back():进行后退

forward():前进

go():-1后退,1前进

十二、本地存储

1、本地存储的介绍

存储在本地用户浏览器中,一刷新不丢失数据

2、本地存储的分类

(1)localStorage

本地存储只能存字符串类型

//增-添加数据
localStorage.setItem(key,value)
//查-获取数据
localStorage.getItem(key)
//删-删除数据:只删除名字
localStorage.removeItem(key)
//改-前提,已有改键值
localStorage.setItem(key,value)

(2)sessionStorage

生命周期为关闭浏览器窗口,再同一个窗口下数据可共享,用法同localStorage

3、存储复杂数据类型

复杂数据类型必须先转为JSON

localStorage.setItem(key,JSON.stringify(obj))

取出来需要再转成对象

JSON.parse(localStorage.getItem('obj'))

十三、数组map和join方法

目的:利用数组的方式实现字符串拼接(高效,开发常用)

1、map

遍历处理的数据,生成新的数组

const arr=['red','blue','pink']
arr.map(function(ele,index){
return ele+'颜色'
})

2、join

把数组中所有元素转换成一个字符串

arr.join(连接字符串)

3、map+join渲染页面

(1)渲染业务要封装成一个函数render

(2)使用map方法遍历数组,里面更换数据,然后会返回有数据的tr数组

(3)通过join方法把map返回的数组转换为字符串

(4)把字符串通过innerHTML赋值给tbody

十四、正则表达式

1、介绍

正则表达式是用于匹配字符串中字符组合的模式。在JS中,正则表达式也是对象。

通常来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。

2、作用

  • 表单验证(匹配)
  • 过滤敏感词(替换)
  • 字符串中提取我们想要的部分(提取)

3、语法

(1)定义规则

const reg=/规则词/

(2)查找

reg.test(字符串变量):返回true/false

reg.exec(字符串变量):找到返回数组,找不到返回null

注:也可写成下列

/哈哈/.test('哈哈')

4、元字符

是具有特殊含义的字符

[a-z]表示26个字母

(1)边界符

  • ^ 开头
  • $ 结尾

(2)量词

  • *  重复零次或更多次
  • + 重复一次或更多次
  • ?重复零次或一次
  • {n} 重复n次
  • {n,} 重复n次或更多次
  • {n,m} 重复n到m次

(3)字符类

  • [ ] 匹配字符串集合
  • [^ ] ^为取反符号
  • . 除换行符之外的字符

(4)预定类

5、修饰符

  • /表达式/修饰符
    • i 不区分大小写  e.g /表达式/i
    • g 全局匹配,找出所有满足正则表达式的
  • replace
const re=str.replace(/java/ig,'前端')

相关文章:

前端学习笔记 | WebAPIs(DOM+BOM)

一、作用和分类 1、基本概念 作用:使用JS去操作HTML和浏览器 分类:DOM(文档对象模型)和BOM(浏览器对象模型) html的标签JS的DOM对象 2、获取DOM对象-参数必须加引号 (1)选择匹配的第…...

简易内存池(100%用例)C卷(JavaPythonC++Node.jsC语言)

请实现一个简易内存池 , 根据请求命令完成内存分配和释放。 内存池支持两种操作命令,REQUEST和RELEASE,其格式为: REQUEST=请求的内存大小 表示请求分配指定大小内存,如果分配成功,返回分配到的内存首地址;如果内存不足,或指定的大小为 0 ,则输出error。 RELEASE=释放的…...

【算法与数据结构】队列的实现详解

文章目录 📝队列的概念及结构🌠 队列的顺序实现🌉初始化🌠入队🌉出队🌠获取队列首元素🌉获取队列尾部元素🌠获取队列中有效元素个数🌉 队列是否为空🌠查看队列…...

GPT-3后的下一步:大型语言模型的未来方向

摘要: 本文将概述GPT-3后的下一步:大型语言模型的未来方向,包括技术发展趋势、应用场景、挑战与机遇。 引言: GPT-3是OpenAI于2020年发布的一款大型语言模型,它在自然语言处理领域取得了突破性进展。GPT-3的出现标志…...

基于机器学习的曲面拟合方法

随着科技的不断发展,机器学习成为了最近最热门的技术之一,也被广泛应用于各个领域。其中,基于机器学习的曲面拟合方法也备受研究者们的关注。曲面拟合是三维模型处理中的重要技术,其目的是用一组数据点拟合出平滑的曲面&#xff0…...

【C++从练气到飞升】03---构造函数和析构函数

🎈个人主页:库库的里昂 ✨收录专栏:C从练气到飞升 🎉鸟欲高飞先振翅,人求上进先读书。 目录 ⛳️推荐 一、类的6个默认成员函数 二、构造函数 1. 构造函数的概念 2. 构造函数的定义 3. 构造函数的特性 三、析构函…...

mybatis转义字符

编写SQL中会用到<,>,<,> 等&#xff0c;但是在mybatis中不可以这么写&#xff0c;与xml文件的元素<>冲突&#xff0c;所以需要转义。整理转义字符如下&#xff1a; 符号原始字符转义字符大于>>大于等于>>小于<<小于等于<<和&&a…...

vue3 实现一个tab切换组件

一. 效果图 二. 代码 文件 WqTab.vue: <template><div ref"wqTabs" class"wq-tab"><template v-for"tab in tabs" :key"tab"><div class"tab-item" :class"{ ac: tabActive tab.key }" c…...

JSONObject在Android Main方法中无法实例化问题

目录 前言一、Main(非安卓环境)方法下运行二、安卓坏境下运行三、why? 前言 原生的json,即org.json.JSONObject; 在Android Studio中的Main方法里运行报错&#xff0c;但在安卓程序运行过程正常 一、Main(非安卓环境)方法下运行 static void test() {try {// 创建一个 JSON …...

京津冀协同发展:北京·光子1号金融算力中心——智能科技新高地

京津冀协同发展是党中央在新的历史条件下提出的一项重大国家战略&#xff0c;对于全面推进“五位一体”总体布局&#xff0c;以中国式现代化全面推进强国建设、民族复兴伟业&#xff0c;具有重大现实意义和深远历史意义。随着京津冀协同发展战略的深入推进&#xff0c;区域一体…...

aspnetcore使用jwt时一直提示401 authorization

测试aspnetcore使用Jwt做认证授权的时候&#xff0c;一直提示401 Authorization 最后发现问题所在&#xff0c;希望能有所帮助 1.检查注册了认证和授权中间件 缺一不可 /*认证*/app.UseAuthentication();/*授权*/app.UseAuthorization();2.检查swagger的配置项 builder.Servic…...

三款文案自动生成器,帮你轻松生成原创文案

文案在今天已经成为了许多企业和个人推广产品和服务的重要手段。然而&#xff0c;对于很多人来说&#xff0c;写作文案并非易事。有时候&#xff0c;我们可能会遇到文案灵感枯竭的情况&#xff0c;或者花费大量时间在寻找合适的词句上。但是&#xff0c;别担心&#xff01;现在…...

多线程并发模拟实现与分析:基于Scapy的TCP SYN洪水攻击实验研究

简介 实现基于Python实现的多线程TCP SYN洪水攻击。该实例利用Scapy库构造并发送TCP SYN数据包&#xff0c;通过多线程技术模拟并发的网络攻击行为。 实现原理 SYN Flood攻击是一种经典的分布式拒绝服务&#xff08;DDoS&#xff09;攻击方式&#xff0c;利用了TCP协议握手过…...

git命令行提交——github

1. 克隆仓库至本地 git clone 右键paste&#xff08;github仓库地址&#xff09; cd 仓库路径&#xff08;进入到仓库内部准备提交文件等操作&#xff09; 2. 查看main分支 git branch&#xff08;列出本地仓库中的所有分支&#xff09; 3. 创建新分支&#xff08;可省…...

LM2903BIDR比较器芯片中文资料规格书PDF数据手册参数引脚图功能封装尺寸图

产品概述&#xff1a; M393B 和 LM2903B 器件是业界通用 LM393 和 LM2903 比较器系列的下一代版本。下一代 B 版本比较器具有更低的失调电压、更高的电源电压能力、更低的电源电流、更低的输入偏置电流和更低的传播延迟&#xff0c;并通过专用 ESD 钳位提高了 2kV ESD 性能和输…...

遍历list过程中调用remove方法

1、普通for循环遍历List删除指定元素&#xff0c;list.remove(index) List<String> nameList new ArrayList<>(Arrays.asList("张三", "李四", "王五", "赵六")); nameList.add("张七"); nameList.add("…...

Java解决罗马数字转整数

Java解决罗马数字转整数 01 题目 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 …...

无忧·企业文档v2.1.9新版本发布,全新升级,新变化让文档管理更无忧!

项目介绍​ JVS是企业级数字化服务构建的基础脚手架&#xff0c;主要解决企业信息化项目交付难、实施效率低、开发成本高的问题&#xff0c;采用微服务配置化的方式&#xff0c;提供了 低代码数据分析物联网的核心能力产品&#xff0c;并构建了协同办公、企业常用的管理工具等&…...

【C语言_指针[2]_复习篇】

目录 一、数组名的理解 二、使用指针访问一维数组中的每个元素 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 一、数组名的理解 1. 一般情况下&#xff0c;数组名就是数组首元素的地址。 2. 特殊情况1&#xff1a;sizeof(数…...

Rust 泛型使用过程中的 <T> 和 ::<T> 的区别

Rust 的泛型语法中&#xff0c;<T> 和 ::<T> 有不同的用途和上下文&#xff0c;但它们都与泛型有关。 <T> 在类型定义中 当你在定义函数、结构体、枚举或其他类型时&#xff0c;使用 <T> 来表示泛型参数。例如&#xff1a; fn identity<T>(x:…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...