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.mzph.cn/news/687330.shtml

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

相关文章

精品springboot基于大数据的电脑主机硬件选购助手-可视化大屏

《[含文档PPT源码等]精品基于springboot基于大数据的电脑主机硬件选购助手[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功! 软件开发环境及开发工具: Java——涉及技术: 前端使用技术&a…

Cron表达式选择器

Cron表达式选择器 功能描述 Cron表达式选择器是用于定时任务调度的一种常见工具,通常用于指定任务的执行时间。Cron表达式由一系列时间单位和对应的时间值组成,用于指定任务的执行时间。下面是一个Cron表达式的示例 0 0 12 * * ?这个表达式的含义是每…

电阻器的脉冲浪涌能力?

由于现有需求,许多现代电子电路和设备都会经历瞬态脉冲和浪涌。这反过来又导致需要“设计”瞬态浪涌保护,尤其是在电机控制器等电路中。当电机启动时,此时消耗的电流过大,可能导致电阻器故障。同样,如果电容器用于电机…

【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱13(附带项目源码)

效果演示 文章目录 效果演示前言每次丢弃一个物品源码完结前言 欢迎来到【制作100个Unity游戏】系列!本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第25篇中,我们将探索如何用unity制作一个3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机…

MySQL性能分析1

1、查看执行频次 查看当前数据库的INSERT,UPDATE,DELETE,SELECT的访问频次,得到当前数据库是以插入,更新和删除为主还是以查询为主,如果是以插入,更新和删除为主的话,那么优化比重可以轻一点儿。 语法: …

Qt实用技巧:QCustomPlot做北斗GPS显示绝对位置运动轨迹和相对位置运动轨迹图的时,使图按照输入点顺序连曲线

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/136131310 红胖子网络科技博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

适用于 Windows 的 12 个最佳 PDF 编辑器

PDF文档的普遍存在按理说,PDF文档的可读性和可移植性受到专业文档的青睐。 然而,PDF格式的可食用性是一大缺陷。幸运的是,各种 PDF 编辑工具和软件使 PDF 的编辑变得更加容易,这篇文章旨在帮助我们的读者找到其中最好的工具和软件…

CSS的注释:以“ /* ”开头,以“ */ ”结尾

CSS的注释:以“ /* ”开头,以“*/”结尾 CSS的注释: 以“ /* ”开头,以“ */ ”结尾 在CSS中,注释是一种非常重要的工具,它们可以帮助开发者记录代码的功能、用法或其他重要信息。这些信息对于理解代码、维护代码以及与他人合作都…

JS进阶——垃圾回收机制以及算法

版权声明 本文章来源于B站上的某马课程,由本人整理,仅供学习交流使用。如涉及侵权问题,请立即与本人联系,本人将积极配合删除相关内容。感谢理解和支持,本人致力于维护原创作品的权益,共同营造一个尊重知识…

IDM6.42.3下载器(Internet Download Manager)俄罗斯大神版,

IDM下载器(Internet Download Manager)俄罗斯大神版,目前最新版是 6.42.3。 Internet Download Manager(简称:IDM)是一款来自国外的非常优秀网络资源高速下载及管理工具,该软件同时是一款收费共…

计算机毕业设计SSM基于的高校学习资源共享系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: vue mybatis Maven mysql5.7或8.0等等组成,B…

电子元器件基础6---三极管

了解了二极管后,接下来就是三极管了。二极管是一个PN结,而三极管是两个PN结构成。 一、三极管概念 三极管,全称应为半导体三极管,也称双极型晶体管、晶体三极管,是一种控制电流的半导体器件。其作用是把微弱信号放大成幅度值较大的电信号,也用作无触点开关。 三极管是半…

php数据类型以及运算符、判断条件

php数据类型以及运算符 1. php数据类型2. 使用举例3. 运算符4. 判断条件if else elseif 1. php数据类型 包括 String(字符串)、Integer(整型)、Float(浮点型)、Boolean(布尔型)、Array(数组)、Object(对象)、NULL(空值) 2. 使用举例 1.字符串 2.整型 3.浮点型 4.布尔型 5.数组…

出境游确实在恢复

新加坡开放中国大陆游客免签,我坦白承认,这是我之前未曾预料的。 那么春节期间,朋友圈里见证了市中心的蜂拥盛景,很多在坡多年的朋友说,在新加坡多年,从未见过如此拥挤的人群,甚至非常担心会出现…

代码随想录刷题笔记 DAY 28 | 复原 IP 地址 No.93 | 子集 No.78 | 子集 II No.90

文章目录 Day 2801. 复原 IP 地址(No. 93)1.1 题目1.2 笔记1.3 代码 02. 子集(No. 78)2.1 题目2.2 笔记2.3 代码 03. 子集 II(No. 90)3.1 题目3.2 笔记3.3 代码 Day 28 01. 复原 IP 地址(No. 9…

django中事务和锁

目录 一:事务(Transactions) 二:锁 在Django中,事务和锁是数据库操作中的两个重要概念,它们用于确保数据的完整性和一致性。下面我将分别解释这两个概念在Django中的应用。 一:事务&#xff…

EasyRecovery软件免费版与付费版有哪些功能区别?

免费版的EasyRecovery软件在功能和恢复能力上确实存在一些限制。 首先,在数据恢复方面,免费版通常只能恢复最多1GB的数据。这意味着,如果你需要恢复的数据量超过1GB,你将需要升级到付费版才能完全恢复。 其次,免费版…

车载软件架构 —— Adaptive AUTOSAR软件架构中通信管理、诊断管理策略

车载软件架构 —— Adaptive AUTOSAR软件架构中通信管理、诊断管理策略 第四篇 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意…

【大厂AI课学习笔记】【2.1 人工智能项目开发规划与目标】(6)特征工程初步

特征工程是一个非常重要的概念,从特征工程可以领会到机器学习的真谛。 特征工程就是从原始数据转换为特征向量的过程。 特征工程的特点: 特征工程是机器学习中很重要的起始步骤,直接影响效果,需要大量的时间。 数据和特征决定了…

【Chrono Engine学习总结】5-sensor-5.2-导出lidar数据的方法与原理探究

由于Chrono的官方教程在一些细节方面解释的并不清楚,自己做了一些尝试,做学习总结。 1、Sensor数据生成流程回顾 Chrono里面,sensor的数据生成、可视化、以及保存,都需要单独进行设置才能实现。sensor数据的采集流程如下https:/…