【JS】APIs：事件流、事件委托、其他事件、页面尺寸、日期对象与节点操作

1 事件流

捕获阶段：从父到子

冒泡阶段：从子到父

1.1 事件捕获

<body>
<div class="fa"><div class="son"></div>
</div>
<script>const fa=document.querySelector('.fa');const son=document.querySelector('.son');// 事件捕获,从父到子;冒泡阶段：从子到父// 事件冒泡：默认，当一个元素触发事件，会依次调用父级元素的同级事件,比如'click'
document.addEventListener('click',function(){
alert('我是yeye')
},true)
fa.addEventListener('click',function(){
alert('我是father')
},true)
son.addEventListener('click',function(){
alert('我是son')
},true)
</script>
<!-- 结果：yeye->father->son -->
</body>

1.2 事件冒泡

<body>
<div class="fa"><div class="son"></div>
</div>
<script>const fa=document.querySelector('.fa');const son=document.querySelector('.son');// 事件冒泡：默认，当一个元素触发事件，会依次调用父级元素的同级事件,比如'click'
document.addEventListener('click',function(){
alert('我是yeye')
})
fa.addEventListener('click',function(){
alert('我是father')
})
son.addEventListener('click',function(){
alert('我是son')
})
</script>
//结果:son->father->yeye

1.3 阻止冒泡

son.addEventListener('click',function(e){
alert('我是son')
e.stopPropagation()
})
<!-- 结果：只有son的alert -->

1.4 阻止捕获

// 在yeye身上加，而不是在son的身上加
document.addEventListener('click',function(e){
alert('我是yeye')
e.stopPropagation()
},true)

1.5 解绑事件

<body>
<button>提交</button>
<script>
const btn=document.querySelector('button')
btn.onclick=function(){}
// L0事件移除解绑
btn.onclick=null
function fn(){}
// 绑定事件
btn.addEventListener('click',fn)
// 解绑事件
// L2事件移除解绑
btn.removeEventListener('click',fn)
</script>
</body>

1.5 鼠标经过事件

1.6 两种注册事件区别

2 事件委托

2.1 事件委托

<body>
<ul><li>1111111111</li><li>2222222222</li><li>3333333333</li><span>66666666</span>
</ul>
<script>// 子元素没有绑定事件，但是冒泡到了父元素身上，点li跳出警告11
const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){alert('11')// console.dir()可以显示一个对象所有的属性和方法// e.target是我们点击的那个对象console.dir(e.target)// 只点击li才有效果if(e.target.tagName==='LI'){e.target.style.color='red'}
})
</script>

2.2 Tab栏切换（用事件委托）

<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="./image/tab00.png" alt="" /></div><div class="item"><img src="./image/tab01.png" alt="" /></div><div class="item"><img src="./image/tab02.png" alt="" /></div><div class="item"><img src="./image/tab03.png" alt="" /></div><div class="item"><img src="./image/tab04.png" alt="" /></div></div></div>
<script>const ul=document.querySelector('ul')const items=document.querySelectorAll('.item')ul.addEventListener('click',function(e){document.querySelector('.tab-nav .active').classList.remove('active')e.target.classList.add('active')// 下面大盒子模块// i是字符串型，'1'+1为'11'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')//  第二种方法items[i].classList.add('active')
})
</script>
</body>

3 其他事件

3.1 阻止元素默认跳转

<a href="#">跳转</a>
</ul>
<script>
const a=document.querySelector('a')
a.addEventListener('click',function(e){// 不让你跳转e.preventDefault()
})
</script>

3.2 页面加载事件

<head><meta charset="UTF-8"><script>// 当页面所有资源执行完毕，再去执行回调函数window.addEventListener('load',function(){const a=document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})})// 当图片资源执行完毕，再去执行回调函数img.addEventListener('load',function(){const a=document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})})// 给document加，当HTML文档被完全加载和解析执行完成（不等样式、图片加载完），再去执行回调函数document.addEventListener('DOMContentLoaded',function(){const a=document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})})</script>
</head>

3.3 元素滚动事件

<body>
<script>// 可以读取，可以赋值window.addEventListener('scroll',function () {// document.documentElement获取html元素console.log(document.documentElement.scrollTop)})
</script>
</body>

注意不能少这句：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

3.4 页面尺寸

getBoundingClientRect()：

<body><div></div><script>const div=document.querySelector('div')// 返回元素的大小和距离视口的位置console.log(div.getBoundingClientRect());</script>

3.4 案例

3.4.1 仿新浪固定头部

 .header {
//修改top: -80px;
} 
<script>const sk=document.querySelector('.sk')const header=document.querySelector('.header')window.addEventListener('scroll',function(){const n=document.documentElement.scrollTop// if(n>=sk.offsetTop)// {//     header.style.top=0// }else{//     header.style.top='-81px'// }header.style.top=n>=sk.offsetTop?0:'-80px'})</script>

3.4.2 blibli点击小滑块移动效果

  <script>const list = document.querySelector('.tabs-list')const line = document.querySelector('.line')list.addEventListener('click', function (e) {if (e.target.tagName === 'A') {//translatex设置对象沿X轴平移line.style.transform = `translateX(${e.target.offsetLeft}px)`}})</script>

 过渡效果：

.suspension .channel-menu .tabs .tabs-list .line {transition: all 0.5s;
}

3.4.3 电梯导航

APIs-day3-114-综合案例-电梯导航案例上集_哔哩哔哩_bilibili

见资源包源码

4 日期对象

日期对象作用：获取系统时间

4.1 实例化

  <script>const n1=new Date()console.log(n1);const n2=new Date('2030-6-6')console.log(n2);</script>

4.2 日期对象方法

效果：

<body><div></div><script>// 获得现在的时间年月日时分秒const div=document.querySelector('div')const n1=new Date()function fn(){const n=new Date()let h=n.getHours()let m=n.getMinutes()let s=n.getSeconds()h=h<10?'0'+h:hm=m<10?'0'+m:ms=s<10?'0'+s:s// getMonth()取值0-11return `现在的时间是${n.getFullYear()}年：${n.getMonth()+1}月${n.getDate()}日:${h}:${m}:${s}`}div.innerHTML=fn()setInterval(() => {div.innerHTML=fn()}, 1000);2024/3/10 11:20:44//得到日期对象div.innerHTML=n1.toLocaleString()//2024/3/10 11:20:44div.innerHTML=n1.toLocaleDateString()//2024/3/10div.innerHTML=n1.toLocaleTimeString()//11:21:48</script>
</body>

4.3 时间戳

从1970.1.1到某个时间的毫秒数

将来的时间戳-现在的时间戳=剩余时间毫秒数

<script>const date=new Date()// 获取时间戳第一种方法console.log(date.getTime())// 获取时间戳第二种方法// new Date()本来是字符型，+''变为数字型console.log(+new Date());// 获取时间戳第三种方法，不需要实例化console.log(Date.now());const arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']// getDay()返回的是0-6,如果今天是星期天，那就返回0console.log(arr[date.getDay()]);</script>

4.4 毕业倒计时案例

  <script>function getime(){const n=+new Date()const f=+new Date('2024-8-1 00:00:00')// 转换为秒数const t=(f-n)/1000let h=parseInt(t/60/60%24)h=h<10?'0'+h:hlet m=parseInt(t/60%60)m=m<10?'0'+m:mlet s=parseInt(t%60)s=s<10?'0'+s:sdocument.querySelector('#hour').innerHTML=hdocument.querySelector('#minutes').innerHTML=mdocument.querySelector('#sceond').innerHTML=s}getime()setInterval(getime,1000)</script>

5 节点操作

DOM树每一个内容都是一个节点

节点类型：元素节点、属性节点、文本节点

5.1 查找节点

5.1.1 查找父节点

<body><div class="box"><div class="box1">1</div></div><div class="box"><div class="box1">2</div></div><div class="box"><div class="box1">3</div></div><script>const n=document.querySelectorAll('.box1')for(let i=0;i<n.length;i++){n[i].addEventListener('click',function(){// display='none'消除盒子所占地方，从第一个开始关，下一个就顶上来// this.parentNode父节点查找this.parentNode.style.display='none'})}</script>
</body>

效果：点击一个，这一个就没有了

5.1.2 查找子节点

<body><ul><li><span>123</span></li><li></li><li></li><li></li><li></li></ul><script>const ul=document.querySelector('ul')console.log(ul.children);//得到的是伪数组，仅获得所有元素节点</script>
</body>

5.1.3 查找兄弟节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const li3=document.querySelector('ul li:nth-child(3)')console.log(li3.previousElementSibling);//上一个兄弟console.log(li3.nextElementSibling);//下一个兄弟</script>
</body>

 

 5.2 增加节点

5.2.1 增加节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const ul=document.querySelector('ul')// 创建节点const lihou=document.createElement('li')lihou.innerHTML='我是创建的lihou'// 增加节点，插入到这个父元素的最后ul.appendChild(lihou)//  增加节点，插入到这个父元素指定位置之前const libef=document.createElement('li')libef.innerHTML='我是创建的libef'ul.insertBefore(libef,ul.children[0])</script>
</body>

 5.2.2克隆节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const ul=document.querySelector('ul')// cloneNode(true)深克隆表示ul.children[0]里面有什么东西全拿过来；（），（false）浅克隆只克隆标签ul.appendChild(ul.children[0].cloneNode())</script>
</body>

 

5.3 删除节点

<body><ul><li><span>123</span></li><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>const ul=document.querySelector('ul')// 没有父子关系删除不成功ul.removeChild(ul.children[0])</script>
</body>

 

 6 swiper插件

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

7 学生信息表案例

APIs-day4-124-今日综合案例-学生信息表上集_哔哩哔哩_bilibili

代码见资源

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/736678.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器视觉学习（一）—— 认识OpenCV、安装OpenCV

机器视觉学习（一）—— 认识OpenCV、安装OpenCV

目录 一、认识OpenCV 二、通过pip工具安装OpenCV 三、PyCharm安装OpenCV 一、认识OpenCV OpenCV&#xff08;Open Source Computer Vision Library&#xff0c;开源计算机视觉库&#xff09;是一个跨平台的计算机视觉库&#xff0c;最初由威尔斯理工学院的Gary Bradski于199…
阅读更多...
强烈安利！FastReport 商业图形库，炫酷可视化报告开发首选~

强烈安利！FastReport 商业图形库，炫酷可视化报告开发首选~

FastReport Business Graphics .NET&#xff0c;是一款基于fastreport报表开发控件的商业图形库&#xff0c;借助 FastReport 商业图形库&#xff0c;您可以可视化不同的分层数据&#xff0c;构建业务图表以进行进一步分析和决策。利用数据呈现领域专家针对 .NET 7、.NET Core、…
阅读更多...
NXP iMX8MM Cortex-M4 核心 GPT Capture 测试

NXP iMX8MM Cortex-M4 核心 GPT Capture 测试

By Toradex秦海 1). 简介 NXP i.MX8 系列处理器均为异构多核架构 SoC&#xff0c;除了可以运行 Linux 等复杂操作系统的 Cortax-A 核心&#xff0c;还包含了可以运行实时操作系统比如 FreeRTOS 的 Cortex-M 核心&#xff0c;本文就演示通过 NXP i.MX8MM 处理器集成的 Cortex-…
阅读更多...
Node.Js编码注意事项

Node.Js编码注意事项

Node.js 中不能使用 BOM 和 DOM 的 API&#xff0c;可以使用 console 和定时器 APINode.js 中的顶级对象为 global&#xff0c;也可以用 globalThis 访问顶级对象 浏览器端js的组成 Node.js中的JavaScript组成 相比较之下发现只有console与定时器是两个API所共有的&#xff…
阅读更多...
HarmonyOS系统开发基础环境搭建

HarmonyOS系统开发基础环境搭建

目录 一 鸿蒙介绍&#xff1a; 1.1 HarmonyOS系统 1.2 HarmonyOS软件编程语言 二 HarmonyOS编程环境搭建 1.1 官网下载地址 1.2搭建开发流程 1.3 创建安装目录 1.4 下载DevEco Studio​编辑 1.5 下载后点击安装 1.6 自动添加桌面快捷和bin路径 ​编辑1.7 安装好运行 …
阅读更多...
二，几何相交---4，BO算法---（1）接近性和可分离性

二，几何相交---4，BO算法---（1）接近性和可分离性

提了三个观点 1&#xff0c;如果一条直线&#xff08;比如竖直&#xff09;可以分开两个线段&#xff0c;则这两个线段不相交 2&#xff0c;只需要观察与隔离线相交的几个线段 3&#xff0c;从左向右扫描线只需要观察每个线段的两个端点和一些可能的相交点。
阅读更多...
HarmonyOS （一）ArkTS起源及UI框架

HarmonyOS （一）ArkTS起源及UI框架

目录 1 引言 2 框架 3 ArkUI 4 特点 5 总结 1 引言 Mozilla创造了JS&#xff0c;Microsoft创建了TS&#xff0c;Huawei进一步推出了ArkTS。 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;扩展了声明式UI、…
阅读更多...
后悔没有早点看到这份产品说明书模板

后悔没有早点看到这份产品说明书模板

产品说明书是连接产品与消费者的桥梁&#xff0c;它对产品具有多重好处。一份设计精良、内容准确的产品说明书有助于消费者全面了解产品&#xff0c;确保用户正确使用产品&#xff1b;减少消费者因误操作导致的故障&#xff0c;降低企业的售后服务成本&#xff1b;增强消费者对…
阅读更多...
一文带你深度了解FreeRTOS的任务切换之PendSV异常

一文带你深度了解FreeRTOS的任务切换之PendSV异常

RTOS系统的核心是任务管理&#xff0c;而任务管理的核心是任务切换&#xff0c;任务切换决定了任务的执行顺序&#xff0c;任务切换效率的高低也决定了一款系统的性能&#xff0c;尤其是对于实时操作系统。而对于想深入了解 FreeRTOS系统运行过程的同学其任务切换是必须掌握的知…
阅读更多...
项目管理软件：如何确保项目启动顺利？

项目管理软件：如何确保项目启动顺利？

对所有项目经理来说&#xff0c;了解如何启动项目是最关键的技能之一。项目都是从小事开始&#xff0c;逐渐发展为更大型、更复杂的。好的开始是成功的一半&#xff0c;对项目管理来说更是如此。 启动项目的 10 个简单步骤 即使是最复杂的项目&#xff0c;也可以分解成简单的…
阅读更多...
爬虫练习：获取某网站的房价信息

爬虫练习：获取某网站的房价信息

一、相关网站 二、相关代码 import requests from lxml import etree import csv with open(房天下数据.csv, w, newline, encodingutf-8) as csvfile:fieldnames [名称, 地点,价格,总价,联系电话]writer csv.DictWriter(csvfile, fieldnamesfieldnames)writer.writeheader…
阅读更多...
计算机丢失msvcp140.dll是什么意思,电脑自带dll修复安装下载

计算机丢失msvcp140.dll是什么意思,电脑自带dll修复安装下载

在使用电脑的过程中那个大家是不是有遇到过电脑丢失某个文件&#xff0c;导致电脑的程序不能继续运行&#xff0c;那么出现这样的问题有什么办法可以解决呢&#xff1f;其实解决办法还是有很多的&#xff01;今天这篇文章就教大家如果电脑丢失的msvcp140.dll文件那么该怎么办&a…
阅读更多...
基于PHP的餐厅管理系统APP设计与实现

基于PHP的餐厅管理系统APP设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 MVC 3 1.2 ThinkPHP 3 1.3 MySQL数据库 3 1.4 uni-app 4 1.5 本章小结 4 2 系统分析 5 2.1 功能需求 5 2.2 用例分析 7 2.3 非功能需求 8 2.4 本章小结 8 3 系统设计 9 3.1 系统总体设计 9 3.2 系统详细设计 10 3.3 本章小…
阅读更多...
qt如何配置ros环境

qt如何配置ros环境

在Qt5.7的版本可以使用bash -i -c来启动qt&#xff0c;让Qt自己识别系统环境&#xff0c;不知道为什么Qt在之后的版本&#xff0c;这样使用都失效了。因为它会默认把CMAKE_PREFIX_PATH修改掉。 网上还有安装ros插件版本的qt creator&#xff0c;感觉失去了一些灵活性。 自己测试…
阅读更多...
学c还行，学Python很累，还有其他语言适合我吗？

学c还行，学Python很累，还有其他语言适合我吗？

学c还行&#xff0c;学Python很累&#xff0c;还有其他语言适合我吗&#xff1f; 在开始前我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些 电气工程师学习方法和资料&a…
阅读更多...
基于SSM的网络教学系统设计与实现

基于SSM的网络教学系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 B/S架构技术 3 1.2 Ajax技术 3 1.3 JavaScript 4 1.4 jQuery 4 1.5 SSM框架 4 1.5.1 Spring 5 1.5.2 Spring MVC 5 1.5.3 MyBatis 5 1.6 本章小结 6 2 系统分析 7 2.1 需求分析 7 2.2 系统用例分析 8 2.3 非功能需求分析 …
阅读更多...
最全软件测试面试问题和回答，适合全文背诵

最全软件测试面试问题和回答，适合全文背诵

求职&#xff0c;类似于打仗&#xff0c;是一场挑战自己的战斗&#xff0c;也是一场跟用人单位的博弈&#xff0c;更是一场千人过独木桥的厮杀、混战。《孙子谋攻篇》中早就说了&#xff1a;"知己知彼&#xff0c;百战不殆&#xff1b;不知彼而知己&#xff0c;一胜一负&a…
阅读更多...
安全知识分享域渗透

安全知识分享域渗透

内网渗透思维导图 密码相关域渗透攻击思路DACL的应用NTLM 中继攻击滥用 ACE 内网渗透思维导图 专注于web漏洞挖掘、内网渗透、免杀和代码审计&#xff0c;感谢各位师傅的关注&#xff01;网安之路漫长&#xff0c;与君共勉&#xff01; 密码相关 域渗透攻击思路 常见攻击手法&a…
阅读更多...
Paimon新版本核心特性和生产实践解读

Paimon新版本核心特性和生产实践解读

最近Apche Paimon发布了最新版本0.7.0&#xff0c;在这个版本中&#xff0c;Paimon对一些新特性进行了增强。 Paimon在数据湖领域发展迅速&#xff0c;未来会在整个数据开发领域占有很重要的地位&#xff0c;今天我们来盘点一下当前能力的特点以及在生产环境中的使用情况。 Loo…
阅读更多...
大数据赋能，能源企业的智慧转型之路

大数据赋能，能源企业的智慧转型之路

在数字洪流中&#xff0c;大数据已经成为推动产业升级的新引擎。特别是在能源行业&#xff0c;大数据的应用正引领着一场深刻的智慧转型。今天&#xff0c;我们就来探讨大数据如何在能源企业中发挥其独特的魅力&#xff0c;助力企业提效降本&#xff0c;实现绿色发展。 动态监控…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023