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

【JS】APIs：事件流、事件委托、其他事件、页面尺寸、日期对象与节点操作

news 2025/8/27 5:21:59

1 事件流

捕获阶段：从父到子

冒泡阶段：从子到父

1.1 事件捕获

<body>
<div class="fa"><div class="son"></div>
</div>
<script>const fa=document.querySelector('.fa');const son=document.querySelector('.son');// 事件捕获,从父到子;冒泡阶段：从子到父// 事件冒泡：默认，当一个元素触发事件，会依次调用父级元素的同级事件,比如'click'
document.addEventListener('click',function(){
alert('我是yeye')
},true)
fa.addEventListener('click',function(){
alert('我是father')
},true)
son.addEventListener('click',function(){
alert('我是son')
},true)
</script>
<!-- 结果：yeye->father->son -->
</body>

1.2 事件冒泡

<body>
<div class="fa"><div class="son"></div>
</div>
<script>const fa=document.querySelector('.fa');const son=document.querySelector('.son');// 事件冒泡：默认，当一个元素触发事件，会依次调用父级元素的同级事件,比如'click'
document.addEventListener('click',function(){
alert('我是yeye')
})
fa.addEventListener('click',function(){
alert('我是father')
})
son.addEventListener('click',function(){
alert('我是son')
})
</script>
//结果:son->father->yeye

1.3 阻止冒泡

son.addEventListener('click',function(e){
alert('我是son')
e.stopPropagation()
})
<!-- 结果：只有son的alert -->

1.4 阻止捕获

// 在yeye身上加，而不是在son的身上加
document.addEventListener('click',function(e){
alert('我是yeye')
e.stopPropagation()
},true)

1.5 解绑事件

<body>
<button>提交</button>
<script>
const btn=document.querySelector('button')
btn.onclick=function(){}
// L0事件移除解绑
btn.onclick=null
function fn(){}
// 绑定事件
btn.addEventListener('click',fn)
// 解绑事件
// L2事件移除解绑
btn.removeEventListener('click',fn)
</script>
</body>

1.5 鼠标经过事件

1.6 两种注册事件区别

2 事件委托

2.1 事件委托

<body>
<ul><li>1111111111</li><li>2222222222</li><li>3333333333</li><span>66666666</span>
</ul>
<script>// 子元素没有绑定事件，但是冒泡到了父元素身上，点li跳出警告11
const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){alert('11')// console.dir()可以显示一个对象所有的属性和方法// e.target是我们点击的那个对象console.dir(e.target)// 只点击li才有效果if(e.target.tagName==='LI'){e.target.style.color='red'}
})
</script>

2.2 Tab栏切换（用事件委托）

<body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:; " data-id="0">精选</a></li><li><a href="javascript:;" data-id="1">美食</a></li><li><a href="javascript:;" data-id="2">百货</a></li><li><a href="javascript:;" data-id="3">个护</a></li><li><a href="javascript:;" data-id="4">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./image/tab00.png" alt="" /></div><div class="item"><img src="./image/tab01.png" alt="" /></div><div class="item"><img src="./image/tab02.png" alt="" /></div><div class="item"><img src="./image/tab03.png" alt="" /></div><div class="item"><img src="./image/tab04.png" alt="" /></div></div></div>
<script>const ul=document.querySelector('ul')const items=document.querySelectorAll('.item')ul.addEventListener('click',function(e){document.querySelector('.tab-nav .active').classList.remove('active')e.target.classList.add('active')// 下面大盒子模块// i是字符串型，'1'+1为'11'const i=+e.target.dataset.iddocument.querySelector('.tab-content .active').classList.remove('active')//document.querySelector(`.tab-content .item:nth-child(${ i + 1 })`).classList.add('active')//  第二种方法items[i].classList.add('active')
})
</script>
</body>

3 其他事件

3.1 阻止元素默认跳转

<a href="#">跳转</a>
</ul>
<script>
const a=document.querySelector('a')
a.addEventListener('click',function(e){// 不让你跳转e.preventDefault()
})
</script>

3.2 页面加载事件

<head><meta charset="UTF-8"><script>// 当页面所有资源执行完毕，再去执行回调函数window.addEventListener('load',function(){const a=document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})})// 当图片资源执行完毕，再去执行回调函数img.addEventListener('load',function(){const a=document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})})// 给document加，当HTML文档被完全加载和解析执行完成（不等样式、图片加载完），再去执行回调函数document.addEventListener('DOMContentLoaded',function(){const a=document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})})</script>
</head>

3.3 元素滚动事件

<body>
<script>// 可以读取，可以赋值window.addEventListener('scroll',function () {// document.documentElement获取html元素console.log(document.documentElement.scrollTop)})
</script>
</body>

注意不能少这句：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

3.4 页面尺寸

getBoundingClientRect()：

<body><div></div><script>const div=document.querySelector('div')// 返回元素的大小和距离视口的位置console.log(div.getBoundingClientRect());</script>

3.4 案例

3.4.1 仿新浪固定头部

 .header {
//修改top: -80px;
} 
<script>const sk=document.querySelector('.sk')const header=document.querySelector('.header')window.addEventListener('scroll',function(){const n=document.documentElement.scrollTop// if(n>=sk.offsetTop)// {//     header.style.top=0// }else{//     header.style.top='-81px'// }header.style.top=n>=sk.offsetTop?0:'-80px'})</script>

3.4.2 blibli点击小滑块移动效果

  <script>const list = document.querySelector('.tabs-list')const line = document.querySelector('.line')list.addEventListener('click', function (e) {if (e.target.tagName === 'A') {//translatex设置对象沿X轴平移line.style.transform = `translateX(${e.target.offsetLeft}px)`}})</script>

过渡效果：

.suspension .channel-menu .tabs .tabs-list .line {transition: all 0.5s;
}

3.4.3 电梯导航

APIs-day3-114-综合案例-电梯导航案例上集_哔哩哔哩_bilibili

见资源包源码

4 日期对象

日期对象作用：获取系统时间

4.1 实例化

  <script>const n1=new Date()console.log(n1);const n2=new Date('2030-6-6')console.log(n2);</script>

4.2 日期对象方法

效果：

<body><div></div><script>// 获得现在的时间年月日时分秒const div=document.querySelector('div')const n1=new Date()function fn(){const n=new Date()let h=n.getHours()let m=n.getMinutes()let s=n.getSeconds()h=h<10?'0'+h:hm=m<10?'0'+m:ms=s<10?'0'+s:s// getMonth()取值0-11return `现在的时间是${n.getFullYear()}年：${n.getMonth()+1}月${n.getDate()}日:${h}:${m}:${s}`}div.innerHTML=fn()setInterval(() => {div.innerHTML=fn()}, 1000);2024/3/10 11:20:44//得到日期对象div.innerHTML=n1.toLocaleString()//2024/3/10 11:20:44div.innerHTML=n1.toLocaleDateString()//2024/3/10div.innerHTML=n1.toLocaleTimeString()//11:21:48</script>
</body>

4.3 时间戳

从1970.1.1到某个时间的毫秒数

将来的时间戳-现在的时间戳=剩余时间毫秒数

<script>const date=new Date()// 获取时间戳第一种方法console.log(date.getTime())// 获取时间戳第二种方法// new Date()本来是字符型，+''变为数字型console.log(+new Date());// 获取时间戳第三种方法，不需要实例化console.log(Date.now());const arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']// getDay()返回的是0-6,如果今天是星期天，那就返回0console.log(arr[date.getDay()]);</script>

4.4 毕业倒计时案例

  <script>function getime(){const n=+new Date()const f=+new Date('2024-8-1 00:00:00')// 转换为秒数const t=(f-n)/1000let h=parseInt(t/60/60%24)h=h<10?'0'+h:hlet m=parseInt(t/60%60)m=m<10?'0'+m:mlet s=parseInt(t%60)s=s<10?'0'+s:sdocument.querySelector('#hour').innerHTML=hdocument.querySelector('#minutes').innerHTML=mdocument.querySelector('#sceond').innerHTML=s}getime()setInterval(getime,1000)</script>

5 节点操作

DOM树每一个内容都是一个节点

节点类型：元素节点、属性节点、文本节点

5.1 查找节点

5.1.1 查找父节点

<body><div class="box"><div class="box1">1</div></div><div class="box"><div class="box1">2</div></div><div class="box"><div class="box1">3</div></div><script>const n=document.querySelectorAll('.box1')for(let i=0;i<n.length;i++){n[i].addEventListener('click',function(){// display='none'消除盒子所占地方，从第一个开始关，下一个就顶上来// this.parentNode父节点查找this.parentNode.style.display='none'})}</script>
</body>

效果：点击一个，这一个就没有了

5.1.2 查找子节点

<body><ul><li><span>123</span></li><li></li><li></li><li></li><li></li></ul><script>const ul=document.querySelector('ul')console.log(ul.children);//得到的是伪数组，仅获得所有元素节点</script>
</body>

5.1.3 查找兄弟节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const li3=document.querySelector('ul li:nth-child(3)')console.log(li3.previousElementSibling);//上一个兄弟console.log(li3.nextElementSibling);//下一个兄弟</script>
</body>

5.2 增加节点

5.2.1 增加节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const ul=document.querySelector('ul')// 创建节点const lihou=document.createElement('li')lihou.innerHTML='我是创建的lihou'// 增加节点，插入到这个父元素的最后ul.appendChild(lihou)//  增加节点，插入到这个父元素指定位置之前const libef=document.createElement('li')libef.innerHTML='我是创建的libef'ul.insertBefore(libef,ul.children[0])</script>
</body>

5.2.2克隆节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const ul=document.querySelector('ul')// cloneNode(true)深克隆表示ul.children[0]里面有什么东西全拿过来；（），（false）浅克隆只克隆标签ul.appendChild(ul.children[0].cloneNode())</script>
</body>

5.3 删除节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const ul=document.querySelector('ul')// 没有父子关系删除不成功ul.removeChild(ul.children[0])</script>
</body>

6 swiper插件

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

7 学生信息表案例

APIs-day4-124-今日综合案例-学生信息表上集_哔哩哔哩_bilibili

代码见资源

【JS】APIs：事件流、事件委托、其他事件、页面尺寸、日期对象与节点操作

1 事件流捕获阶段：从父到子冒泡阶段：从子到父 1.1 事件捕获 <body> <div class"fa"><div class"son"></div> </div> <script>const fadocument.querySelector(.fa);const sondocument.qu…...

编程日记 2024/3/12 6:49:52

定制红酒：如何根据客户需求调整红酒口感与风格

在云仓酒庄洒派，云仓酒庄洒派深知不同消费者对于红酒的口感与风格有着不同的喜好和需求。因此，云仓酒庄洒派根据消费者的具体要求，灵活调整红酒的口感与风格，以满足他们的期望。首先，云仓酒庄洒派会与消费者进行深入的…...

编程日记 2024/3/12 6:47:50

利用excel批量修改图片文件名

今天同事提出需求要实现利用excel批量修改某文件夹下的图片重命名，衡量到各种条件，最后还是选择了vbs来实现。代码如下代码创建Excel对象 Set objExcel CreateObject("Excel.Application") objExcel.Visible False 隐藏Excel窗口打开Ex…...

编程日记 2024/3/12 6:46:49

间隔5分钟执行1次Python脚本设置步骤 —— 定时执行专家

《定时执行专家》是一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件，用于在 Windows 系统上定时执行各种任务，包括执行脚本或程序。下面是使用 "定时执行专家" 软件设置定时执行 Python 脚本的步骤： 步骤 1: 设置 P…...

编程日记 2024/3/12 6:45:48

计算机网络基础【信息系统监理师】

计算机网络基础【信息系统监理师】 1、OSI七层参考模型2、TCP/IP协议3、网络拓扑结构分类4、网络传输介质分类5、网络交换技术6、网络存储技术7、网络规划技术8、综合布线系统8.1、综合布线工程内容8.1、隐蔽工程-金属线槽安装8.2、隐蔽工程-管道安装槽道与各种管线间的最小净距…...

编程日记 2024/3/12 6:43:46

网络安全风险评估：详尽百项清单要点

网络安全风险评估是识别、分析和评估组织信息系统、网络和资产中潜在风险和漏洞的系统过程。主要目标是评估各种网络威胁和漏洞的可能性和潜在影响，使组织能够确定优先顺序并实施有效的安全措施来减轻这些风险。该过程包括识别资产、评估威胁和漏洞、分析潜在影响以…...

编程日记 2024/3/12 6:34:37

不会用虚拟机装win10？超详细教程解决你安装中的所有问题！

前言：安装中有任何疑问，可以在评论区提问，博主身经百战会快速解答小伙伴们的疑问 BT、迅雷下载win10镜像（首先要下载win10的镜像）：ed2k://|file|cn_windows_10_business_editions_version_1903_updated_sep…...

编程日记 2024/3/12 6:32:36

洛谷素数环 Prime Ring Problem

题目描述 PDF 输入格式输出格式题意翻译输入正整数 nn，把整数 1,2,\dots ,n1,2,…,n 组成一个环，使得相邻两个整数之和均为素数。输出时，从整数 11 开始逆时针排列。同一个环恰好输出一次。n\leq 16n≤16，保证一定有解。多…...

编程日记 2024/3/12 6:30:34

【DPDK】基于dpdk实现用户态UDP网络协议栈

文章目录一.背景及导言二.协议栈架构设计1. 数据包接收和发送引擎2. 协议解析3. 数据包处理逻辑三.网络函数编写1.socket2.bind3.recvfrom4.sendto5.close 四.总结一.背景及导言在当今数字化的世界中，网络通信的高性能和低延迟对于许多应用至关重要。而用户态网…...

编程日记 2024/3/12 6:29:32

开源好用的所见即所得(WYSIWYG)编辑器：Editor.js

文章目录特点基于区块干净的数据界面与交互插件标题和文本图片列表Todo表格使用安装创建编辑器实例配置工具本地化自定义样式今天介绍一个开源好用的Web所见即所得(WYSIWYG)编辑器： Editor.js Editor.js 是一个基于 Web 的所见即所得富文本编辑器，它…...

编程日记 2024/3/12 6:28:32

sqlite 损坏修复

步骤1 SQLite Download Page下载sqlite3 对应的系统版本 2.参考怎么恢复sqlite 数据库文件✅ - 有乐数据恢复网 sqlite3 dbname > .mode insert > .output dbdump.sql > .dump > .exit 恢复方法1 1.创建一个新的数据库例如名字叫 test.db 2sqlite3 test.…...

编程日记 2024/3/12 6:23:26

初学Vue——Vue路由

0 什么是Vue路由类似于Html中的超链接(<a>)一样，可以跳转页面的一种方式。前端路由：URL中hash(#号之后的内容)与组件之间的对应关系，如下图： 当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路…...

编程日记 2024/3/12 6:22:25

如何使用宝塔面板搭建Discuz并结合cpolar实现远程访问本地论坛

文章目录前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛前言 Crossday Discuz! Board（以下简称 Discuz!）是一套通用的社区论坛软件系统，用户可以在不需要任何编程的基础上&a…...

编程日记 2024/3/12 6:18:21

llc的基波分析法

对于我们之前分析的 LLC等效谐振电路的分析，其实我们发现分析的并不是完整的方波输入，而是用正弦波来分的那么为何用基波来分析呢，因为对于方波而言，根据傅里叶级数它是可以分解成基波、 1次、3次、5次.......等各种奇次谐波的入…...

编程日记 2024/3/12 6:13:18

一键清除JavaScript代码中的注释：使用正则表达式实现

这个正则表达式可以有效地匹配 JavaScript 代码中的各种注释，并且跳过了以 http: 或 https: 开头的链接。 /\/\*[\s\S]*?\*\/|\/\/[^\n]*||(?<!http:|https:)\/\/[^\n]*/gvscode 实战，ctrlF 调出查找替换工具，点…...

编程日记 2024/3/12 6:12:17

第七次作业

IPSEC VPPN实验配置目标：在FW5和FW3之间建立一条IPSEC通道，保证10.0.2.0/24网段可以正常访问到192.168.1.0/24 1.FW1和FW2进行双机热备（之前实验没保存，可看上个实验） 还有一些配置前面实验有。 2.场景选择点对点…...

编程日记 2024/3/12 6:07:13

在jupyternotebook中，如何解决作图时负号无法显示的问题？

输入以下代码即可。 import matplotlib as mpl mpl.rcParams[axes.unicode_minus] False 原文链接：在jupyternotebook中，如何解决作图时负号无法显示的问题？...

编程日记 2024/3/12 6:04:09

ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。

发生的错误信息： File "C:\Users\malongqiang\.conda\envs\ObjectDetection\lib\ssl.py", line 1309, in do_handshakeself._sslobj.do_handshake() ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。分析原因： …...

编程日记 2024/3/12 6:02:07

主流开发语言与环境介绍

主流开发语言与环境介绍 1. 引言随着计算机科学的不断发展，各种编程语言和开发环境层出不穷。选择一种适合自己的主流开发语言和环境是每个开发者都必须面临的问题。本文将为大家介绍几种目前最为流行的主流开发语言和环境，帮助读者选择合适的工具进行…...

编程日记 2024/3/12 6:01:06

Unity性能优化篇(九) 模型优化之LOD技术概述以及操作方法

LOD模型优化技术概述: 1.LOD技术可以根据摄像头远近来显示不同精度的模型(例如吃鸡游戏随着跳伞高度来显示下面树木以及建筑的模型精度) LOD模型优化技术操作方法: 可使用Unity自带的LOD Group组件，并根据项目的情况来调整该组件的属性。Untiy资源商店也有一些其…...

编程日记 2024/3/12 6:00:05

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。权限校验…...

编程新知 2025/7/9 0:22:36

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/8/22 4:03:37

1 方法一先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/8/22 3:50:38

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...

编程新知 2025/8/22 3:51:34

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/8/21 8:01:56

MMaDA: Multimodal Large Diffusion Language Models

CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/8/22 5:05:28

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...

编程新知 2025/8/3 22:07:32

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发下面是 Solidity 合约开发的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为以太坊（Ethereum）平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

ardupilot 开发环境eclipse 中import 缺少C++

目录文章目录目录摘要1.修复过程摘要本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/8/26 20:49:42

JVM 内存结构详解

内存结构运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。每个线程都有一个程序计数…...

编程新知 2025/8/22 12:20:57