【零基础】学JS之APIS(基于黑马)

喝下这碗鸡汤

披盔戴甲,一路勇往直前!

1. 什么是事件


事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮


2. 什么是事件监听?


就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 注册事件语法:
 

元素.addEventListener('事件',要执行的函数)

3. 事件监听三要素:


事件源: 那个dom元素被事件触发了,要获取dom元素

事件:用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等

事件调用的函数:要做什么事

4. 随机点名案例

业务分析:
点击开始按钮随机抽取数组的一个数据,放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候,两个按钮同时禁用核心:利用定时器快速展示,停止定时器结束展示

<body><h2>随机点名</h2><div class="box"><span>名字是:</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}//1 获取元素let start = document.querySelector('.start')let end = document.querySelector('.end')let qs = document.querySelector('.qs')let timer = 0let random = 0//2 给开始按钮注册事件timer = start.addEventListener('click', function () {setInterval(function () {let random = getRandom(0, arr.length - 1)qs.innerHTML = arr[random]}, 30)//如果到了最后一个就禁用按钮if (arr.length === 1) {start.disabled = end.disabled = true}})//3 给结束按钮注册事件 本质是停止定时器end.addEventListener('click', function () {clearInterval(timer)//删除数组元素arr.splice(random, 1)})</script>
</body>

5. 小米搜索框

<body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>// 1. 获取元素   input let search = document.querySelector('input')let list = document.querySelector('.result-list')// 2. 事件监听 获得光标事件  focussearch.addEventListener('focus', function () {// 显示下拉菜单list.style.display = 'block'// 文本框变色this.classList.add('search')})// 3. 事件监听 失去光标事件  blursearch.addEventListener('blur', function () {// 隐藏下拉菜单list.style.display = 'none'// 文本框去色this.classList.remove('search')})</script>
</body>

6. 发布微博案例

<body><div class="w"><div class="controls"><img src="images/tip.png" alt=""><br><textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea><div><span class="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><div class="contentList"><ul></ul></div></div><script>// 1. 获取元素 文本域  countlet area = document.querySelector('#area')let useCount = document.querySelector('.useCount')// 2. 绑定事件  用户输入事件 inputarea.addEventListener('input', function () {// console.log('测试中')// 不断得到文本域里面的字符长度// area.value 可以得到的值// console.log(area.value)// area.value.length 得到输入字符的长度// console.log(area.value.length)useCount.innerHTML = area.value.length})</script>
</body>

总结

恭喜大家跟着小郑学完【零基础】学JS之APIS的第二篇,这篇笔记学习了什么是DOM,以及DOM的相关知识点,例如获取DOM元素,修改DOM元素的内容等等,最后小郑用两个案例来巩固今天的知识点,大家学废了吗?

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

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

相关文章

详解Java垃圾回收(GC)机制

一、为什么需要垃圾回收 如果不进行垃圾回收&#xff0c;内存迟早都会被消耗空&#xff0c;因为我们在不断的分配内存空间而不进行回收。除非内存无限大&#xff0c;我们可以任性的分配而不回收&#xff0c;但是事实并非如此。所以&#xff0c;垃圾回收是必须的。 二、哪些内…

【Selenium配置】WebDriver安装浏览器驱动(ChromeEdge)

【Selenium配置】WebDriver安装浏览器驱动&#xff08;Chrome&Edge&#xff09; 文章目录 【Selenium配置】WebDriver安装浏览器驱动&#xff08;Chrome&Edge&#xff09;Chrome确认Chrome版本下载对应driver把解压后的chromedriver文件放在chrome安装目录下&#xff0…

深入讲解C++基础知识(三)

目录 一、命名空间1. 创建命名空间2. 访问命名空间2.1 using 编译指令2.2 using 声明2.3 直接使用全名 3. 嵌套命名空间4. 匿名命名空间5. 命名空间的注意事项5.1 头文件中不应该包含 using 声明和 using 编译指令。5.2 最好使用 using 声明而不是 using 编译指令 二、标准库类…

极客天成RDMA分布式存储加速自动驾驶仿真建模

01 自动驾驶汽车行业发展现状 随着全球5G技术的应用与发展&#xff0c;人工智能产业的逐步推进&#xff0c;无人驾驶汽车行业市场规模显著增长。中商产业研究院发布的《2024-2029全球与中国无人驾驶列车系统市场现状及未来发展趋势》显示&#xff0c;2023年全球无人驾驶汽车行…

Redis 7.x 系列【16】持久化机制之 AOF

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 执行原理2.1 Redis 6.x2.1.1 直接写2.1.2 重写 2.2 Redis 7.x2.2.1 直接写2…

JAVA基础-----128陷阱

一、何为128陷阱 Java中Integer类型在使用比较时的特殊行为------128陷阱&#xff0c;解释了当数值在-128到127范围内&#xff0c;由于valueOf方法的缓存机制导致地址相同&#xff0c;比较为真&#xff1b;超出这个范围则新分配内存&#xff0c;地址不同&#xff0c;比较为假。…

抖音矩阵云剪系统saas源码 短视频矩阵获客管理系统

2024抖音矩阵云混剪系统是一款专业的短视频营销管理工具。该系统支持多平台多账号的集中式管理&#xff0c;并实现一键式作品发布功能。它配备了智能标题生成和关键词优化工具&#xff0c;以及排名查询机制&#xff0c;帮助用户提升内容在平台上更好的矩阵管理. 智能剪辑 托管发…

Vue框架引入

vue简介 1.1.vue是什么?Vue官网 英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/ vue是一套构建用户界面的渐进式javascript框架 构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面前端工程师的职责:就是在合适的时候发出合适的请求,然后…

树莓派_Pytorch学习笔记20:初步认识深度学习框架

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: ​ Python 版本3.7.3&#xff1a; ​ 本文很水&#xff0c;就介绍一下我以后的学习使用P…

R包:ggsci期刊配色

介绍 不同期刊配色大多数时候不一样&#xff0c;为了更好符合期刊图片颜色的配色&#xff0c;有人开发了ggsci这个R包。它提供以下函数&#xff1a; scale_color_palname() scale_fill_palname() 对应不同期刊的color和fill函数。 导入数据R包 library("ggsci")…

vue + element ui 实现侧边栏导航栏折叠收起

首页布局如下 要求点击按钮,将侧边栏收缩, 通过 row 和 col 组件&#xff0c;并通过 col 组件的 span 属性我们就可以自由地组合布局。 折叠前 折叠后 <template><div class"app-layout" :class"{ collapse: app.isFold }"><div class&…

CANoe的capl调用Qt制作的dll

闲谈 因为Qt封装了很多个人感觉很好用的库&#xff0c;所以一直想通过CAPL去调用Qt实现一些功能&#xff0c;但是一直没机会&#xff08;网络上也没看到这方面的教程&#xff09;&#xff0c;这次自己用了两天&#xff0c;踩了很多坑&#xff0c;终于是做成了一个初步的调用方…

Zabbix分布式监控

目录 分布式监控架构 实现分布式监控的步骤 优点和应用场景 安装Zabbix_Proxy Server端Web页面配置 测试 Zabbix 的分布式监控架构允许在大规模和地理上分散的环境中进行高效的监控。通过分布式监控&#xff0c;Zabbix 可以扩展其监控能力&#xff0c;支持大量主机和设备…

汇川CodeSysPLC教程 Modbus变量编址

线圈&#xff1a;位变量&#xff0c;只有两种状态0和1。汇川PLC中包含Q区及SM区等变量。 寄存器&#xff1a;16位&#xff08;字&#xff09;变量&#xff0c;本PLC中包含M区及SD区等变量 说明&#xff1a; 汇川HMI的专用协议使用不同功能码&#xff1a;在访问SM时&#xff0c…

Linux搭建hive手册

一、将hive安装包上传到NameNode节点并解压 1、删除安装MySQL时的.rpm文件 cd /opt/install_packages/ rm -rf *.rpm 2、将安装包拖进/install_packages目录 3、解压安装包 tar -zxvf apache-hive-3.1.2-bin.tar.gz -C /opt/softs/ 4、修改包名 cd /opt/softs mv apache-…

如何在应用运行时定期监控内存使用情况

如何在应用运行时定期监控内存使用情况 在 iOS 应用开发中&#xff0c;实时监控内存使用情况对于优化性能和排查内存泄漏等问题非常重要。本文将介绍如何在应用运行时定期监控内存使用情况&#xff0c;使用 Swift 编写代码并结合必要的工具和库。 1. 创建桥接头文件 首先&…

PyCharm如何安装requirements.txt中的依赖包

问题&#xff1a;下载别人的源码&#xff0c;如何安装代码中requirement.txt中的依赖包。 解决方案&#xff1a; &#xff08;1&#xff09;打开PyCharm下面的Terminal&#xff0c;先为代码创建单独的虚拟环境并进入到虚拟环境中&#xff08;每个项目单独的环境&#xff0c;这…

LLM- 注意力机制

一&#xff1a;什么是注意力机制&#xff0c;以及产生背景&#xff1f; &#xff08;1&#xff09;&#xff1a;RNN模型[RNN模型]的缺点&#xff1a;下图是例如RNN模型解决机器翻译的例子&#xff0c;从这个例子可以看到Encoder最后一个向量&#xff08;eos&#xff09;送给了…

bdeaver mysql忘记localhost密码修改密码添加用户

描述 bdeaver可以连接当前的localhost数据库&#xff0c;但不知道数据库密码是什么。用这个再建一个用户&#xff0c;用来连接数据库 解决 1、在当前的数据库localhost右键&#xff0c;创建-用户 设置这个用户&#xff0c;密码 加权限 2、连接 用新的账号密码去连接&#x…

Keepalived+LVS实现负责均衡,高可用的集群

Keepalived的设计目标是构建高可用的LVS负载均衡群集&#xff0c;可以调用ipvsadm工具来创建虚拟服务器&#xff0c;管理服务器池&#xff0c;而不仅仅用作双机热备。使用Keepalived构建LVS群集更加简便易用&#xff0c;主要优势体现在&#xff1a;对LVS负责调度器实现热备切换…