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

APIs-day3

news 2025/6/19 19:26:22

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求逆序对数目

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

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

C# 中 Webclient和Httpclient

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

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

cesium入门学习三

这期主要学习一下鼠标点击事件以及鼠标滚轮事件。学习目录总结： cesium入门学习一-CSDN博客 cesium入门学习二-CSDN博客 1.鼠标事件 1.1 点击鼠标左键显示经度、纬度、高度效果： js代码： 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 文档管理和测试的工具，但它们各有特色和适用场景。以下是详细的比较，并附上每个工具的具体用法示例。 1. Swagger 特点与优势： 广泛采用: Swagger…...

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

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

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

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

免费资源网站

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

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

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

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

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

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

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

编程日记 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

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

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

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

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

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

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

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

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

win版ffmpeg的安装和操作

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

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

力扣56. 合并区间

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...

编程新知 2025/6/19 13:34:44

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/6/15 17:25:38

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/6/17 8:48:27

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/6/18 3:14:31

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/6/16 14:59:39

12.找到字符串中所有字母异位词

🧠 题目解析题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。返回的答案以数组形式表示。字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...

编程新知 2025/6/15 23:16:52

多元隐函数偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式，给定一个隐函数关系： F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标： 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...

编程新知 2025/6/16 14:58:05