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 {"…...
敲敲云零代码平台一键部署实战：命令安装 vs Docker 安装
敲敲云提供两种一键部署方式，一条命令即可完成私有化部署，全程约 3 分钟。本文记录实际操作过程 部署前准备 服务器配置建议： 4 核 8GB 内存，50GB SSD 系统盘。支持系统：TencentOS、Alibaba Cloud Linux、CentOS Stre…...
AntimicroX：解放游戏体验的手柄映射工具，让每款游戏都支持手柄
AntimicroX：解放游戏体验的手柄映射工具，让每款游戏都支持手柄 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https:…...
千问3.5-9B模型切换指南：OpenClaw多模型动态调用
千问3.5-9B模型切换指南：OpenClaw多模型动态调用 1. 为什么需要多模型动态调用 上周我尝试用OpenClaw自动整理电脑里积压的300多份PDF文档时，遇到了一个有趣的现象：处理简单文件重命名任务时，轻量级模型响应飞快；但遇…...
人工智能应用快速原型开发：基于PyTorch 2.8和Gradio构建交互式Demo
人工智能应用快速原型开发：基于PyTorch 2.8和Gradio构建交互式Demo 1. 为什么需要快速原型开发工具 在人工智能领域，一个好想法从诞生到落地往往需要经历漫长的验证过程。传统方式下，即使训练出了一个效果不错的模型，想要展示给…...
RAGFlow源码部署避坑大全：从Poetry安装失败到NLTK资源缺失的完整修复指南
RAGFlow源码部署全攻略：从环境搭建到疑难解析的终极指南 1. 环境准备与系统要求 在开始RAGFlow的部署之前，确保您的系统满足以下最低配置要求：硬件配置： CPU：4核及以上内存：16GB及以上存储：50GB…...
Youtu-VL-4B-Instruct效果展示：高清OCR+精准Box定位+多轮图文对话作品集
Youtu-VL-4B-Instruct效果展示：高清OCR精准Box定位多轮图文对话作品集 1. 引言：当“看图说话”进化成“看图办事” 你有没有遇到过这种情况？看到一张复杂的图表，想快速提取里面的数据，却要手动一个个去数；…...
ROS2开发环境搭建避坑指南：Win11 + WSL2 + Ubuntu 22.04 从安装到测试的完整记录
ROS2开发环境搭建实战：Win11与WSL2深度适配指南 环境准备与系统调优 在Windows 11上搭建ROS2开发环境，选择WSL2作为Linux子系统是最佳实践方案。不同于传统虚拟机方案，WSL2提供了接近原生Linux的性能表现，同时完美集成Windows桌…...
Kotlin 2.4.0 正式发布，快来看看有哪些更新
昨日，JetBrains 发布了 Kotlin 2.4.0-Beta1。 如果你管的是 Android 工具链、Kotlin 多平台，或者团队里已经开始碰 context receivers、注解处理、.klib 兼容问题，这个版本已经值得单独开分支验证。 先说结论 这次最有分量的变化࿰…...
嵌入式系统调试实战：工具、技巧与内存管理
1. 嵌入式调试的核心价值与挑战从事嵌入式开发十多年来，我深刻体会到调试环节往往决定着项目的成败。与桌面软件开发不同，嵌入式系统一旦部署后很难进行现场维护，这就要求我们必须在上线前解决所有潜在问题。根据行业统计，嵌入式工…...
从Simulink模型到神经网络：一个完整的数据驱动建模与验证实践
1. 为什么需要从Simulink模型转向神经网络？ 在控制系统工程领域，Simulink模型一直是建模和仿真的黄金标准。但最近几年，越来越多的工程师开始尝试用神经网络来替代传统模型。这背后有几个关键原因： 首先，传统物理模型在…...