APIs-day3
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: …...
7-1求逆序对数目
目录 题目描述 输入样例: 输出样例: 逆序对的含义： 具体思路： 归并排序： 求逆序对： 代码实现： 对于mid-z1举个例子 题目描述 注意：本问题算法的时间复杂度要求为O(nlogn), 否则得分无效 题目来源ÿ…...
C# 中 Webclient和Httpclient
在C#中，WebClient和HttpClient，这两个类都是用于发起HTTP请求的客户端，它们在使用API上传文件或数据时有不同的优缺点和应用场景。在C#中WebClient是一种较早的网络客户端，而HttpClient是后期提供的更现代的、功能更强大的HTTP客户…...
cesium入门学习三
这期主要学习一下鼠标点击事件以及鼠标滚轮事件。 学习目录总结： cesium入门学习一-CSDN博客 cesium入门学习二-CSDN博客 1.鼠标事件 1.1 点击鼠标左键显示经度、纬度、高度 效果： js代码： var viewer new Cesium.Viewer(cesiumConta…...
swagger，showdoc，apifox，Mock 服务，dubbo，ZooKeeper和dubbo的关系
Swagger、ShowDoc 和 Apifox 之间的区别与优势 Swagger、ShowDoc 和 Apifox 都是用于 API 文档管理和测试的工具，但它们各有特色和适用场景。以下是详细的比较，并附上每个工具的具体用法示例。 1. Swagger 特点与优势： 广泛采用: Swagger…...
【自信息、信息熵、联合熵、条件熵、互信息】
文章目录 一、自信息 I(X)二、信息熵：衡量系统的混乱程度信息熵 H(X)联合熵 H(X,Y) 三、条件熵H(Y|X) 联合熵H(X,Y) - 信息熵H(X)四、互信息 I(X,Y)五、总结References 一、自信息 I(X) 自信息(Self-information) 是由香农提出的，用来衡量单一事件发生…...
免费资源网站
记录一下 音效 爱给网制片帮素材...
C++--------继承
一、继承的基本概念 继承是 C 中的一个重要特性，它允许一个类（派生类或子类）继承另一个类（基类或父类）的属性和方法。这样可以实现代码的重用和建立类之间的层次关系。 #include <iostream>// 基类 class Base…...
Python PyMupdf 去除PDF文档中Watermark标识水印
通过PDF阅读或编辑工具，可在PDF中加入Watermark标识的PDF水印，如下图： 该类水印特点 这类型的水印，会在文件的字节流中出现/Watermark、EMC等标识，那么，我们可以通过改变文件字节内容，清理掉…...
改进爬山算法之四：概率爬山法（Probabilistic Hill Climbing，PHC）
概率爬山法（Probabilistic Hill Climbing，PHC）是一种局部搜索算法，它结合了随机性和贪婪搜索的特点，是对爬山算法（Hill Climbing Algorithm）的一种变体或扩展。与传统的爬山法不同，PHC不是总是选择最优的邻居作为下一步的移动，而是以一定的概率选择最优邻居，同时以一…...
解读DeepseekV3
本年度还剩几天，Deepseek就发布了这么值得惊喜的产品，我觉得是真正做AI，也喜欢AI同学，对这个魔幻的2024年12月，一定是未来多少年想起都能回忆起这波澜壮阔的岁月。 我见过的最省的GPT4o，Claude，…...
【网络安全 | 漏洞挖掘】如何通过竞态条件发现账户接管漏洞
未经许可，不得转载。 文章目录 背景正文设置竞态条件实现漏洞背景 目标应用允许用户创建项目。这些项目中包含多个用户角色，每个角色权限不同（如所有者、管理员、成员管理者等）。用户可通过接受邀请来加入项目，而只有项目所有者才能通过输入邮箱将项目所有权转移给其他用…...
串口通信标准RS232、RS422、RS485有什么区别和不同
目录 第一个区别：硬件管脚接口定义不同： 第二个区别、工作方式不同 第三个区别、通信方式不同 第四个区别，逻辑特性不同 第五个区别、抗干扰性、传输距离和传输速率也不同 RS-232与RS-485对比 RS-422与RS-485对比 今天给大家分享的是&…...
win版ffmpeg的安装和操作
一、ffmpeg软件安装： ffmpeg是一个通过命令行将视频转化为图片的软件。 在浏览器搜索ffmpeg在官网里找到软件并下载（不过官网很慢），建议用这个下载。 下载的文件是一个zip压缩包，将压缩包解压，有如下文件…...
力扣56. 合并区间
此题在技巧上需要掌握Lambda表达式，在 C 的 Lambda 表达式 中，[] 是 捕获列表（capture list），用于指定 Lambda 表达式如何访问其外部作用域的变量。 [捕获列表](参数列表) -> 返回类型 {函数体 };• 捕获列表&…...
2024基于大模型的智能运维（附实践资料合集）
基于大模型的智能运维是指利用人工智能技术，特别是大模型技术，来提升IT运维的效率和质量。以下是一些关键点和实践案例： AIOps的发展：AIOps（人工智能在IT运维领域的应用）通过大数据分析和机器学习技术&…...
Android Java 版本的 MSAA OpenGL ES 多重采样
最近多次被小伙伴问到 OpenGL 多重采样，其实前面文章里多次讲过了，就是构建2个缓冲区，多重采样缓冲区和目标解析缓冲区。 代码流程 // Framebuffer IDs private int msaaFBO; private int msaaColorBuffer; private int msaaDepthBuffer;pr…...
YOLO11改进-注意力-引入自调制特征聚合模块SMFA
本篇文章将介绍一个新的改进机制——SMFA（自调制特征聚合模块），并阐述如何将其应用于YOLOv11中，显著提升模型性能。随着深度学习在计算机视觉中的不断进展，目标检测任务也在快速发展。YOLO系列模型（You Onl…...
VMware虚拟机安装银河麒麟操作系统KylinOS教程(超详细)
目录 引言1. 下载2. 安装 VMware2. 安装银河麒麟操作系统2.1 新建虚拟机2.2 安装操作系统2.3 网络配置 3. 安装VMTools 创作不易，禁止转载抄袭！！！违者必究！！！ 创作不易，禁止转载抄袭…...
Elasticsearch-索引的批量操作
索引的批量操作 批量查询和批量增删改 批量查询 #批量查询 GET product/_search GET /_mget {"docs": [{"_index": "product","_id": 2},{"_index": "product","_id": 3}] }GET product/_mget {"…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
HarmonyOS运动开发：如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言 在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...