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.hqwc.cn/news/474514.html

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

相关文章

Windows 11 Build 26052 预览版见,微软确认将原生支持 Sudo 命令

根据微软目前已经删除的一份支持文档,微软计划在 Windows 11 Build 26052 预览版更新中,引入对 Sudo 命令的原生支持。 2 月 8 日消息,根据微软目前已经删除的一份支持文档,微软计划在 Windows 11 Build 26052 预览版更新中&#…

内存块与内存池

(1)在运行过程中,MemoryPool内存池可能会有多个用来满足内存申请请求的内存块,这些内存块是从进程堆中开辟的一个较大的连续内存区域,它由一个MemoryBlock结构体和多个可供分配的内存单元组成,所有内存块组…

阿里云服务器怎么选择配置?

阿里云服务器配置怎么选择?根据实际使用场景选择,个人搭建网站可选2核2G配置,访问量大的话可以选择2核4G配置,企业部署Java、Python等开发环境可以选择2核8G配置,企业数据库、Web应用或APP可以选择4核8G配置或4核16G配…

SNMPv1/v2c-原理浅谈+报文示例+简易配置

个人认为,理解报文就理解了协议。通过报文中的字段可以理解协议在交互过程中相关传递的信息,更加便于理解协议。 因此本文将在SNMP协议报文的基础上进行介绍。 SNMPv1版本相关RFC SNMPv2版本相关RFC 关于 Community-based SNMPv2 的基本原理&#xff…

C++ //练习 7.29 修改你的Screen类,令move、set和display函数返回Screen并检查程序的运行结果,在上一个练习中你的推测正确吗?

C Primer(第5版) 练习 7.29 练习 7.29 修改你的Screen类,令move、set和display函数返回Screen并检查程序的运行结果,在上一个练习中你的推测正确吗? 环境:Linux Ubuntu(云服务器) …

大路灯护眼灯哪个牌子好?学生开学必备台灯推荐

小的时候,家里人对眼睛的重视程度比较低,我本人也没有爱护眼睛的习惯,属于在学校做眼保健操都要偷懒的那种,在小学时候就早早当上了“四眼仔”,随着时间的推移,现在成了一名高度近视人士,摘下眼…

Zabbix6.x配置中文界面 解决乱码问题

Zabbix6.x配置中文界面 解决乱码问题 Zabbix6.x界面无法选择中文,通过安装语言包解决。后面也解决了zabbix6中文方块(乱码)问题。 配置中文语言包 系统中默认没有携带中文语言包,可以通过以下命令查看 localectl list-locales #…

自动化测试:电商管理系统元素定位练习​

本次专题我们来说一下 Python中Unittest 框架的使用及如何通过HTMLTestRunner实现自动化测试报告的自动生成。案例中的代码我们仍旧使用课堂学习中部署的“电商管理系统”来实现。本次练习包括以下几个操作: l 测试用例整体结构设计 l 测试用例的实现 l 测试套的…

MySQL数据库基础(七):DML数据表操作

文章目录 DML数据表操作 一、数据表的基本操作 1、数据表的创建 2、查询已创建数据表 3、修改数据表信息 ① 数据表字段添加 ② 修改字段名称或字段类型 ③ 删除某个字段 ④ 修改数据表名称 4、删除数据表 二、字段类型详解 1、整数类型 2、浮点类型 3、日期类型…

超声波清洗机洗眼镜好吗?超声波清洗机哪个品牌更值得推荐一些

随着科技的进步,很多朋友因为长时间沉迷于看电子产品,所以早早的就佩戴上眼镜了,从而离不开眼镜。眼镜长时间佩戴会导致上面积累着非常多的灰尘,堆积在镜片上就会导致视线变得模糊不清了,影响视线。然而很多人也很少去…

ArcGIS学习(八)基于GIS平台的控规编制办法

ArcGIS学习(八)基于GIS平台的控规编制办法 上一任务我们学习了”如何进行图片数据的矢量化?" 这一关我们来学习一个比较简单的案例一一”如何在ArcGIS中录入控规指标,绘制控规图纸?" 首先,先来看看这个案例的分析思路以及导入CAD格式的控规图纸。 接着,来看…

Python如何正确计算出“滑块验证码”的“缺失距离”(7)

前言 本文是该专栏的第63篇,后面会持续分享python爬虫干货知识,记得关注。 在本专栏之前,笔者有详细介绍过关于python如何解决“滑块缺失验证码”的方法,感兴趣的同学可以在本专栏往前翻阅并查看。 而本文,笔者将重点来介绍在处理爬虫项目的时候,遇到“滑块缺失的验证码…