js---webAPI

01 声明变量

js组成:

在这里插入图片描述
DOM:操作网页内容的,开发页面内容特效和实现用户交互
BOM:
DOM树:将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
文档树直观的体现了标签与标签之间的关系
在这里插入图片描述

CSS获取元素的方法
document.querySelector()   // 获取单个元素
document.querySelectorAll() // 获取多个元素,不能直接修改,需要通过遍历的方式给里面的元素做修改
根据CSS选择器来获取DOM元素 (重点)
document.querySelectorAll('css选择器')
得到的是一个伪数组,
有长度有索引号的数组
但是没有 pop() push() 等数组方法
操作元素内容

对象.innerText 属性——将文本内容添加/更新到任意标签位置,显示纯文本,不解析标签
对象.innerHTML 属性 -----能识别文本,能够解析标签,能识别文本,能够解析标签

操作元素属性

常见的属性:href title src
语法:对象.属性=值
元素样式属性:通过类名:className操作 通过classList操作类控制css
元素.calssName=‘active’
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
在这里插入图片描述

表单元素属性

定时器函数有什么作用?

可以根据时间自动重复执行某些代码

定时器函数如何开启?

setInterval(函数名, 时间)

定时器函数如何关闭?
let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)
var let const 【优先推荐使用const】
  • const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
  • 但是对于引用数据类型,const声明的变量,里面存的不是 值,不是值,不是值,是 地址。

在这里插入图片描述

  1. 什么是事件监听?
  • 就是让程序检测是否有事件产生,一旦有事件触发,
  • 就立即调用一个函数做出响应,也称为 注册事件
  1. 事件监听三要素是什么?
  • 事件源 (谁被触发了)
  • 事件类型 (用什么方式触发,点击还是鼠标经过等)
  • 事件处理程序 (要做什么事情)
元素对象.addEventListener('事件类型',要执行的函数)

在这里插入图片描述

什么是事件对象

事件对象也是个对象,这个对象里有时间触发时的相关信息
eg:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
语法:如何获取

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event、ev、e
    元素.addEvenetListener(‘click’,function(e){})
    事件对象在哪里?
  • 在事件绑定的回调函数的第一个参数就是事件对象
环境对象

环境对象:指的是函数内部特殊的变量this,它代表当前函数运行时所处的环境
作用:弄清楚this的指向,可以让我们代码更简洁

  • 函数的调用方式不同,this 指代的对象也不同
  • 【谁调用, this 就是谁】是判断 this 指向的粗略规则
  • 直接调用函数,其实相当于是 window.函数,所以 this 指代 window
什么是回调函数

如果将函数 A 做为参数传递给函数 B 时,我们称函数 A 为回调函数
简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数

function fn(){
console.log('我是回调函数')
}
// fn 传递给了setInterval,fn 就是回调函数
setInterval(fn,1000)
// 这里的第二个参数是一个函数,这种将函数作为参数传递给其他函数并在特定事件或条件发生时执行的方式,被称为回调函数
box.addEventListener('click',function(){
console.log('我也是回调函数')
})
// 回调函数的本质还是一个函数,只不过把它当成参数使用

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营第三十四天|860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球

860.柠檬水找零 链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 细节: 1. 首先根据题意就是只有5.的成本,然后就开始找钱,找钱也是10.和5. 2. 直接根据10 和 5 进行变量定义,然后去循环…

每日OJ题_算法_递归④力扣24. 两两交换链表中的节点

目录 ④力扣24. 两两交换链表中的节点 解析代码 ④力扣24. 两两交换链表中的节点 24. 两两交换链表中的节点 难度 中等 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即…

【Py/Java/C++三种语言详解】LeetCode每日一题240217【二叉树BFS】LeetCode429、N叉树的层序遍历

有LeetCode交流群/华为OD考试扣扣交流群可加 948025485 可上全网独家的 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1336了解算法冲刺训练 文章目录 题目链接题目链接题目描述解题思路DFS和BFS异同用队列维护的BFS 代码PythonJavaC时空复杂度 相关习题华为OD算法/大厂面…

物理层计网

文章目录 前言一、物理层的基本概念1.物理层所要解决的问题2.物理层协议的主要任务 二、物理层下面的传输媒体1.导引型传输媒体2.非导引型传输媒体 三、传输方式1.串行传输和并行传输2.同步传输和异步传输3.单工、半双工、全双工传输 四、编码与调制1.数据通信中的常用术语2.编…

RM电控工程讲义

HAL_CAN_RxFifo0MsgPendingCallback(CAN_HandleTypeDef *hcan) 是一个回调函数,通常在STM32的HAL库中用于处理CAN(Controller Area Network)接收FIFO 0中的消息。当CAN接口在FIFO 0中有待处理的消息时,这个函数会被调用。 HAL库C…

算法刷题:长度最小的子数组

长度最小的子数组 .题目链接题目详情算法原理滑动窗口定义指针进窗口判断出窗口 我的答案 . 题目链接 长度最小的子数组 题目详情 算法原理 滑动窗口 这道题,我们采用滑动窗口的思想来解决,具体步骤如图所示 定义指针 如图所示,两个指针都需要从左往右进行遍历,因此初始值…

Python算法100例-1.6 打鱼还是晒网

1.问题描述2.问题分析3.算法设计4.确定程序框架5.求出指定日期距离1990年1月1日的天数6.完整的程序7.补充知识点 1.问题描述 中国有句俗语叫“三天打鱼两天晒网”。某人从1990年1月1日起便开始“三天打鱼两天晒网”,问这个人在以后的某一天中是“打鱼”…

Vue练习3:组件开发3(页面切换)

预览 ——————————————————————————————————————————— 组件文档 Pager组件 属性 属性名含义类型必填默认值current当前页码(总数据量/单页容量)Number否1total总数据量Number否0limit单页容量Number否10vis…

「算法」滑动窗口

前言 算法需要多刷题积累经验,所以我行文重心在于分析解题思路,理论知识部分会相对简略一些 正文 滑动窗口属于双指针,这两个指针是同向前行,它们所夹的区间就称为“窗口” 啥时候用滑动窗口? 题目涉及到“子序列…

AI大模型专题:工业大模型技术应用与发展报告1.0

今天分享的是AI大模型系列深度研究报告:《AI大模型专题:工业大模型技术应用与发展报告1.0》。 (报告出品方:中国信通院) 报告共计:25页 人工智能的几个相关概念 大模型:即基础模型&#xff…

爱上JVM——常见问题(一):JVM组成

1 JVM组成 1.1 JVM由那些部分组成,运行流程是什么? 难易程度:☆☆☆ 出现频率:☆☆☆☆ JVM是什么 Java Virtual Machine Java程序的运行环境(java二进制字节码的运行环境) 好处: 一次编写&…

批量美化图片:轻松打造统一风格的图片库!

在数字时代,图片已经成为我们生活中不可或缺的一部分。从朋友圈的分享到商业广告的展示,每一张图片都承载着我们的情感和创意。但是,你是否曾经因为大量的图片需要美化而感到头疼?是否因为繁琐的手动编辑而失去了创作的热情&#…

钡铼技术的LoRa网关实现智能电网监测与控制

钡铼技术的LoRa网关在智能电网监测与控制方面发挥着关键作用,为电力系统的安全运行和高效管理提供了重要支持。下面将详细介绍钡铼技术的LoRa网关如何实现智能电网监测与控制。 首先,钡铼技术的LoRa网关通过接入各类传感器和监测设备,实现对…

C++11---(1)

目录 一、C11简介 二、列表初始化 2.1、{ } 初始化 三、变量类型推导 3.1、auto 3.2、decltype 为什么需要decltype 四、final和override 4.1、final 4.2、override 五、默认成员函数控制 5.1、default修饰函数 5.2、delete修饰函数 六、nullptr 一、C11简介 C11是…

STM32F1 - 中断优先级

Interrupt Priority 1> STM32F103ZET6异常向量表2> 中断优先级寄存器NVIC_IPRx3> 中断优先级分组4> 例程:设置EXTI4中断优先级5> 例程:设置SysTick中断优先级6> 为什么不能用NVIC_Init()设置Systick优先级?7> 函数NVIC_…

【数据分享】2001~2020年青藏高原植被净初级生产力数据集

各位同学们好,今天和大伙儿分享的是2001~2020年青藏高原植被净初级生产力数据集。如果大家有下载处理数据等方面的问题,您可以私信或评论。 朱军涛. (2022). 青藏高原植被净初级生产力数据集(2001-2020). 国家青藏高原数据中心. …

最简单的基于 FFmpeg 的封装格式转换器(无编解码)

最简单的基于 FFmpeg 的封装格式转换器(无编解码) 最简单的基于 FFmpeg 的封装格式转换器(无编解码)正文结果工程文件下载 最简单的基于 FFmpeg 的封装格式转换器(无编解码) 参考雷霄骅博士的文章&#xf…

文件上传漏洞--Upload-labs--Pass03--特殊后缀与::$DATA绕过

方法一:特殊后缀绕过: 一、什么是特殊后缀绕过 源代码中的黑名单禁止一系列后缀名 之外的后缀,称之为‘特殊后缀名’,利用其来绕过黑名单,达到上传含有恶意代码的文件的目的。 二、代码审计 接下来对代码逐条拆解进行…

【精品】关于枚举的高级用法

枚举父接口 public interface BaseEnum {Integer getCode();String getLabel();/*** 根据值获取枚举** param code* param clazz* return*/static <E extends Enum<E> & BaseEnum> E getEnumByCode(Integer code, Class<E> clazz) {Objects.requireNonN…

【点云】生成有凹凸的平面

文章目录 前言高斯函数原理代码保存 测试测试1 &#xff1a;领域曲率代码测试2&#xff1a;高斯曲率代码 加上噪点测试1测试2 总结 前言 尝试用一些数据生成有凹凸面的点云。 我们姑且把z轴当成有凹凸的缺陷&#xff0c;x轴和y轴共同组成一个平面。 高斯函数 原理 高斯函数w…