js---webAPI

news2025/1/24 11:30:28

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.coloradmin.cn/o/1454370.html

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

相关文章

stm32h750中文数据手册以及中文参考手册

stm32h750中文数据手册以及中文参考手册 🔧腾讯交互翻译:https://transmart.qq.com/zh-CN/file🔨PDF拆分合并工具集在线:https://www.ilovepdf.com/zh-cn ✨就目前来讲,stm32h750VB芯片价格,算是历史新低&a…

Mybatis-Plus常用技巧

一、官网网站: https://baomidou.com/pages/24112f/#%E7%89%B9%E6%80%A7 技巧和常用方法在官网使用 二、离线安装MybatisX插件-free 1、在idea官网下载插件的zip压缩包,上链接(https://plugins.jetbrains.com/) 2、在搜索框搜…

模型训练 —— AI算法初识

一、背景 AI算法中模型训练的主要目的是为了让机器学习算法从给定的标注数据中学习规律、特征和模式,并通过调整模型内部参数,使模型能够对未见过的数据进行准确预测或决策。具体来说: 1. **拟合数据**:模型通过训练来识别输入数…

Android下SF合成流程重学习之onMessageInvalidate

Android下SF合成流程重学习之onMessageInvalidate 引言 虽然看了很多关于Android Graphics图形栈的文章和博客,但是都没有形成自己的知识点。每次学习了,仅仅是学习了而已,没有形成自己的知识体系,这次趁着有时间,这次…

外汇天眼:8个平台被打击,有的因诈骗被处罚!

上周,澳大利亚证券和投资委员会(ASIC)取消了总部位于悉尼的Brava Capital的澳大利亚金融服务许可证(AFSL),意大利公司和交易委员会CONSOB则将6个非法投资平台网站列入黑名单。另外,Reiwa-Capita…

uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致 uView相关文档 https://www.uviewui.com/components/safeAr…

视频如何去除水印?这三个方法赶紧收藏

在数字化内容的海洋中,视频已成为我们日常生活中不可或缺的一部分。然而,很多时候,我们渴望观看的优质视频内容却被水印所困扰。因此我们就需要视频去水印工具来帮助我们解决这些困扰。 一、水印云 水印云的视频去水印功能采用了先进的 AI …

自己部署一个牛逼的开发备忘录系统

目录 效果 简介 安装 使用 效果 简介 为开发人员分享快速参考备忘清单【速查表】。这是英文版 Reference 的中文版本,目的是为了方便自己的技术栈查阅,如果您提供一个清单,我将抽空搬运,立即撸起来 :)。如果您发现此处的备忘单…

数字化转型导师坚鹏:BLM政府数字化转型战略

BLM政府数字化转型战略 ——以BLM模型为核心,实现知行果合一 课程背景: 很多政府存在以下问题: 不知道如何系统地制定政府数字化转型战略? 不清楚其它政府数字化转型战略是如何制定的? 不知道其它政府数字化转…

分享一下,程序员为什么不喜欢关电脑?(个人观点仅供娱乐哈哈哈)

你是否曾经疑惑,为何身边的程序员朋友总是让电脑保持开机状态,仿佛与它们有着不解之缘?别急着给他们贴上“电脑迷”的标签,背后其实隐藏着许多合理的原因。今天,就让我们一同走进程序员的世界,探究他们为何…

Windows Server系列的时钟同步

文章目录 前言一、设置时钟同步二、调整同步周期总结前言 在Windows Server系列操作系统上部署网站应用有时候需要考虑服务器之间的时钟同步问题。当存在不同服务器之间的通讯访问并且要求一定的安全限定时,时钟同步的需求尤其显得比较迫切。本文将以Windows2012server为例,…

WorkPlus构建安全高效的内网通信平台,助力企业内部协作

为何选择WorkPlus作为内网通信软件的首选?首先,WorkPlus提供全面的内网通信解决方案。不论是文字聊天、语音通话还是实时视频会议,WorkPlus都能提供稳定、高效的通信体验,确保团队成员能够及时分享信息、快速沟通和协作。通过Work…

Redis篇----第五篇

系列文章目录 文章目录 系列文章目录前言一、redis的过期策略以及内存淘汰机制二、Redis 常见性能问题和解决方案?三、为什么Redis的操作是原子性的,怎么保证原子性的?四、Redis事务前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家…

4核8G云服务器够用吗?支持多少人?

4核8G服务器支持多少人同时在线访问?阿腾云的4核8G服务器可以支持20个访客同时访问,关于4核8G服务器承载量并发数qps计算测评,云服务器上运行程序效率不同支持人数在线人数不同,公网带宽也是影响4核8G服务器并发数的一大因素&…

Google Gemini 1.5:引领跨模态AIGC信息分析理解与视频内容推理的新篇章,与 Open AI 决一高下!

Gemini 1.5具有100万token的上下文理解能力,是目前最强!具有跨模态理解和推理:能够对文本、代码、图像、音频和视频进行高度复杂的理解和推理。允许分析1小时视频、11小时音频、超过30,000行代码或超过700,000字的文本。不过谷歌这个Gemini 1…

java后端将非树型结构的机构数据转换为树形结构的机构数据示例

文章目录 前言一、非树型机构信息1.示例数据2.机构编码规则二、转换为树型机构1.转换逻辑2.具体实现2.1.将excel文件读取到程序中2.2.解析机构编码并获取所有的父级编码候选值2.3.设置所有节点的ParentCode2.4.查找机构的根节点2.5.通过ParentCode构建完整的树型结构2.6.将树形…

【算法】基础算法002之滑动窗口(一)

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 1.长度最小的子数组…

微服务学习 | Springboot整合Dubbo+Nacos实现RPC调用

🏷️个人主页:鼠鼠我捏,要死了捏的主页 🏷️系列专栏:Golang全栈-专栏 🏷️个人学习笔记,若有缺误,欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站,通俗易懂&…

vue打包优化,webpack的8大配置方案

vue-cli 生成的项目通常集成Webpack ,在打包的时候,需要webpack来做一些事情。这里我们希望它可以压缩代码体积,提高运行效率。 文章目录 (1)代码压缩:(2)图片压缩:&…

Doris ——SQL原理解析

目录 前言 一、Doris简介 二、SQL解析简介 2.1 词法分析 2.2 语法分析 2.3 逻辑计划 2.4 物理计划 三、Doris SQL解析的总体架构 四、Parse阶段 五、Analyze阶段 六、SinglePlan阶段(生成单机逻辑Plan阶段) 七、DistributedPlan计划&#xf…