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

APIs-day3

news 2026/2/10 13:23:42

1.全选反选案例

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>*{margin: 0;padding: 0;}table{margin: 100px auto;width: 500px;border: 1px solid #c0c0c0;border-collapse: collapse;text-align: center;border-spacing: 0;}th{background-color: #09c;color:#fff;font:bold 16px "微软雅黑";height: 24px;}td{padding: 10px;color:#404060;border:1px solid #d0d0d0;}.allcheck{width: 80px;}</style></head><body><table><tr><th class="allcheck"><input type="checkbox" name="" id="checkAll"><span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>const allcheck=document.querySelector('#checkAll')const ck=document.querySelectorAll('.ck')allcheck.addEventListener('click',function(){for(let i=0;i<ck.length;i++){ck[i].checked=this.checked}})for(let i=0;i<ck.length;i++){ck[i].addEventListener('click',function(){allcheck.checked=document.querySelectorAll('.ck:checked').length===ck.length})}</script>
</body></html>

2.事件流

事件流是事件完整执行过程中的流动路径

捕获阶段：从父到子，DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）

冒泡阶段：从子到父，当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发，（同名事件）

阻止冒泡：把事件限制在当前元素中，事件对象.stopPropagation（） 冒泡和捕获都有效

L2 事件解绑：removeEventListener（事件类型，事件处理函数，【获取捕获或者冒泡阶段】）匿名函数不能解绑

L0事件解绑：btn.οnclick=null

鼠标经过事件：mouseover和mouseout有冒泡效果，mouseenter和mouseleave没有冒泡效果

3.事件委托

利用事件流特征解决一些开发需求的知识技巧

优点：减少注册次数，可以提高程序性能

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

实现：事件对象.target.tagName可以获得真正触发事件的元素

<body><ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不要变色</p></ul><script>const ul = document.querySelector('ul')ul.addEventListener('click', function (e) {if(e.target.tagName==='LI'){e.target.style.color = 'red'}})</script></body>

使用事件委托来写tab切换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;}.tab-nav ul li a {text-decoration: none;color: #333;border-bottom: 2px solid transparent;font-size: 14px;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.item {display: none;}.item.active {display: block;}</style></head><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="./06-素材(1)/images/tab00.png" alt=""></div><div class="item "><img src="./06-素材(1)/images/tab01.png" alt=""></div><div class="item "><img src="./06-素材(1)/images/tab02.png" alt=""></div><div class="item "><img src="./06-素材(1)/images/tab03.png" alt=""></div><div class="item "><img src="./06-素材(1)/images/tab04.png" alt=""></div></div></div><script>const ul = document.querySelector('.tab-nav ul')ul.addEventListener('click', function (e) {if (e.target.tagName === 'A') {document.querySelector('.tab-nav .active').classList.remove('active')e.target.classList.add('active')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')}})</script>
</body></html>

4.阻止默认行为

e.preveDefault（）防止直接提交直接跳转

5.其他事件

页面加载事件：加载外部资源（图片，外联css，javascript）加载完毕时触发的事件

load

window.addEventListener（‘load’，function（）{}）所有资源加载完毕

也可以针对某个资源绑定load事件

DOMContentLoaded事件，当初始的html文档被完全加载和解析完之后

document.addEventListener（‘DOMContentLoaded’，function（）{}）

元素滚动事件：监听整个页面滚动，

<body><script>window.addEventListener('scroll',function(){console.log('11');})</script>
</body>

获取位置：scrollLeft和scrollTop

  <script>const div=document.querySelector('div')div.addEventListener('scroll',function(){console.log(div.scrollTop)})</script>

获得页面的滚动距离：document.documentElement.scrollTop得到的是数字型，不带单位

可以赋值document.documentElement.scrollTop=800

相关文章：

APIs-day3

1.全选反选案例 <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>练习</title><style>*{margin: 0;padding: 0;}table{margin: 100px auto;width: …...

编程日记 2024/12/28 14:33:15

7-1求逆序对数目

目录 题目描述 输入样例: 输出样例: 逆序对的含义&#xff1a; 具体思路&#xff1a; 归并排序&#xff1a; 求逆序对&#xff1a; 代码实现&#xff1a; 对于mid-z1举个例子 题目描述 注意&#xff1a;本问题算法的时间复杂度要求为O(nlogn), 否则得分无效 题目来源&#xff…...

编程日记 2024/12/28 14:28:10

C# 中 Webclient和Httpclient

在C#中&#xff0c;WebClient和HttpClient&#xff0c;这两个类都是用于发起HTTP请求的客户端&#xff0c;它们在使用API上传文件或数据时有不同的优缺点和应用场景。在C#中WebClient是一种较早的网络客户端&#xff0c;而HttpClient是后期提供的更现代的、功能更强大的HTTP客户…...

编程日记 2024/12/28 14:26:06

cesium入门学习三

这期主要学习一下鼠标点击事件以及鼠标滚轮事件。 学习目录总结&#xff1a; cesium入门学习一-CSDN博客 cesium入门学习二-CSDN博客 1.鼠标事件 1.1 点击鼠标左键显示经度、纬度、高度 效果&#xff1a; js代码&#xff1a; var viewer new Cesium.Viewer(cesiumConta…...

编程日记 2024/12/28 14:25:04

swagger，showdoc，apifox，Mock 服务，dubbo，ZooKeeper和dubbo的关系

Swagger、ShowDoc 和 Apifox 之间的区别与优势 Swagger、ShowDoc 和 Apifox 都是用于 API 文档管理和测试的工具&#xff0c;但它们各有特色和适用场景。以下是详细的比较&#xff0c;并附上每个工具的具体用法示例。 1. Swagger 特点与优势&#xff1a; 广泛采用: Swagger…...

编程日记 2024/12/28 14:24:03

【自信息、信息熵、联合熵、条件熵、互信息】

文章目录 一、自信息 I(X)二、信息熵&#xff1a;衡量系统的混乱程度信息熵 H(X)联合熵 H(X,Y) 三、条件熵H(Y|X) 联合熵H(X,Y) - 信息熵H(X)四、互信息 I(X,Y)五、总结References 一、自信息 I(X) 自信息(Self-information) 是由香农提出的&#xff0c;用来衡量单一事件发生…...

编程日记 2024/12/28 14:18:57

免费资源网站

记录一下 音效 爱给网制片帮素材...

编程日记 2024/12/28 14:13:51

C++--------继承

一、继承的基本概念 继承是 C 中的一个重要特性&#xff0c;它允许一个类&#xff08;派生类或子类&#xff09;继承另一个类&#xff08;基类或父类&#xff09;的属性和方法。这样可以实现代码的重用和建立类之间的层次关系。 #include <iostream>// 基类 class Base…...

编程日记 2024/12/28 14:12:50

Python PyMupdf 去除PDF文档中Watermark标识水印

通过PDF阅读或编辑工具&#xff0c;可在PDF中加入Watermark标识的PDF水印&#xff0c;如下图&#xff1a; 该类水印特点 这类型的水印&#xff0c;会在文件的字节流中出现/Watermark、EMC等标识&#xff0c;那么&#xff0c;我们可以通过改变文件字节内容&#xff0c;清理掉…...

编程日记 2024/12/28 14:11:49

改进爬山算法之四：概率爬山法（Probabilistic Hill Climbing，PHC）

概率爬山法（Probabilistic Hill Climbing，PHC）是一种局部搜索算法，它结合了随机性和贪婪搜索的特点，是对爬山算法（Hill Climbing Algorithm）的一种变体或扩展。与传统的爬山法不同，PHC不是总是选择最优的邻居作为下一步的移动，而是以一定的概率选择最优邻居，同时以一…...

编程日记 2024/12/28 14:09:47

解读DeepseekV3

本年度还剩几天&#xff0c;Deepseek就发布了这么值得惊喜的产品&#xff0c;我觉得是真正做AI&#xff0c;也喜欢AI同学&#xff0c;对这个魔幻的2024年12月&#xff0c;一定是未来多少年想起都能回忆起这波澜壮阔的岁月。 我见过的最省的GPT4o&#xff0c;Claude&#xff0c…...

编程日记 2024/12/28 14:07:44

【网络安全 | 漏洞挖掘】如何通过竞态条件发现账户接管漏洞

未经许可，不得转载。 文章目录 背景正文设置竞态条件实现漏洞背景 目标应用允许用户创建项目。这些项目中包含多个用户角色，每个角色权限不同（如所有者、管理员、成员管理者等）。用户可通过接受邀请来加入项目，而只有项目所有者才能通过输入邮箱将项目所有权转移给其他用…...

编程日记 2024/12/28 14:06:43

串口通信标准RS232、RS422、RS485有什么区别和不同

目录 第一个区别&#xff1a;硬件管脚接口定义不同&#xff1a; 第二个区别、工作方式不同 第三个区别、通信方式不同 第四个区别&#xff0c;逻辑特性不同 第五个区别、抗干扰性、传输距离和传输速率也不同 RS-232与RS-485对比 RS-422与RS-485对比 今天给大家分享的是&…...

编程日记 2024/12/28 14:05:42

win版ffmpeg的安装和操作

一、ffmpeg软件安装&#xff1a; ffmpeg是一个通过命令行将视频转化为图片的软件。 在浏览器搜索ffmpeg在官网里找到软件并下载&#xff08;不过官网很慢&#xff09;&#xff0c;建议用这个下载。 下载的文件是一个zip压缩包&#xff0c;将压缩包解压&#xff0c;有如下文件…...

编程日记 2024/12/28 14:03:40

力扣56. 合并区间

此题在技巧上需要掌握Lambda表达式&#xff0c;在 C 的 Lambda 表达式 中&#xff0c;[] 是 捕获列表&#xff08;capture list&#xff09;&#xff0c;用于指定 Lambda 表达式如何访问其外部作用域的变量。 [捕获列表](参数列表) -> 返回类型 {函数体 };• 捕获列表&…...

编程日记 2024/12/28 14:02:39

2024基于大模型的智能运维（附实践资料合集）

基于大模型的智能运维是指利用人工智能技术&#xff0c;特别是大模型技术&#xff0c;来提升IT运维的效率和质量。以下是一些关键点和实践案例&#xff1a; AIOps的发展&#xff1a;AIOps&#xff08;人工智能在IT运维领域的应用&#xff09;通过大数据分析和机器学习技术&…...

编程日记 2024/12/28 14:01:37

Android Java 版本的 MSAA OpenGL ES 多重采样

最近多次被小伙伴问到 OpenGL 多重采样&#xff0c;其实前面文章里多次讲过了&#xff0c;就是构建2个缓冲区&#xff0c;多重采样缓冲区和目标解析缓冲区。 代码流程 // Framebuffer IDs private int msaaFBO; private int msaaColorBuffer; private int msaaDepthBuffer;pr…...

编程日记 2024/12/28 13:59:36

YOLO11改进-注意力-引入自调制特征聚合模块SMFA

本篇文章将介绍一个新的改进机制——SMFA&#xff08;自调制特征聚合模块&#xff09;&#xff0c;并阐述如何将其应用于YOLOv11中&#xff0c;显著提升模型性能。随着深度学习在计算机视觉中的不断进展&#xff0c;目标检测任务也在快速发展。YOLO系列模型&#xff08;You Onl…...

编程日记 2024/12/28 13:58:34

VMware虚拟机安装银河麒麟操作系统KylinOS教程(超详细)

目录 引言1. 下载2. 安装 VMware2. 安装银河麒麟操作系统2.1 新建虚拟机2.2 安装操作系统2.3 网络配置 3. 安装VMTools 创作不易&#xff0c;禁止转载抄袭&#xff01;&#xff01;&#xff01;违者必究&#xff01;&#xff01;&#xff01; 创作不易&#xff0c;禁止转载抄袭…...

编程日记 2024/12/28 13:57:31

Elasticsearch-索引的批量操作

索引的批量操作 批量查询和批量增删改 批量查询 #批量查询 GET product/_search GET /_mget {"docs": [{"_index": "product","_id": 2},{"_index": "product","_id": 3}] }GET product/_mget {"…...

编程日记 2024/12/28 13:56:28

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2026/1/28 7:31:14

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2026/2/10 8:01:27