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 {"…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
ffmpeg（四）：滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
提升移动端网页调试效率：WebDebugX 与常见工具组合实践
在日常移动端开发中，网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时，开发者迫切需要一套高效、可靠且跨平台的调试方案。过去，我们或多或少使用过 Chrome DevTools、Remote Debug…...