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 * * ?这个表达式的含义是每…

有一台阿里云轻量应用服务器可以用来做什么?

阿里云轻量应用服务器可以用来做什么?轻量服务器可用于网站搭建、个人博客、图床、云端学习环境、电商建设、论坛社区、开发环境配置等。可以在阿里云CLUB中心查看 aliyun.club 当前最新的优惠券和活动信息。 轻量是不是性能差?不是,轻量应用…

电阻器的脉冲浪涌能力?

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

洛谷: P1480 A/B Problem

题目描述 输入两个整数 a , b a,b a,b,输出它们的商。 输入格式 两行,第一行是被除数,第二行是除数。 输出格式 一行,商的整数部分。 样例 #1 样例输入 #1 10 2样例输出 #1 5提示 0 ≤ a ≤ 1 0 5000 0\le a\le 10^{500…

【制作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、单片机、软硬…

c入门第十九篇: 易错的指针操作(代码的调试)

前面讲述到了链表的操作,链表具有动态伸缩的优点,但是链表是指针操作,必然面临着指针操作的诸多问题,比如典型的空指针操作问题,出现问题之后,除了printf,还有没有其他方法调试呢? …

leetcode热题100. 字母异位词分组

Problem: 49. 字母异位词分组 文章目录 题目思路复杂度Code 题目 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs [“eat”, “tea”, “tan”…

7、内网安全-横向移动PTH哈希PTT票据PTK密匙Kerberos密码喷射

用途:个人学习笔记,有所借鉴,欢迎指正 目录 一、域横向移动-PTH-Mimikatz&NTLM 1、Mimikatz 2、impacket-at&ps&wmi&smb 二、域横向移动-PTK-Mimikatz&AES256 三、域横向移动-PTT-漏洞&Kekeo&Ticket 1、漏…

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

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

已解决ModuleNotFoundError: No module named ‘paddle‘异常的正确解决方法,亲测有效!!!

已解决ModuleNotFoundError: No module named paddle异常的正确解决方法,亲测有效!!! 文章目录 问题分析 报错原因 解决思路 解决方法 总结 在人工智能和深度学习领域,PaddlePaddle是由百度发起的开源平台&#…

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

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

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

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

2024前端面试准备之CSS篇(二)

1. 什么是伪类和伪元素 伪类(Pseudo-class): 伪类是选择器的一种,用于选择特定状态或条件下的元素。它们以冒号(:)开头,用于向选择器添加额外的特定条件。例如,:hover伪类用于选择鼠标悬停在元素上的状态,:nth-child(n)伪类用于选择父元素下的第n个子元素等。 伪元素(…

java 中 mongodb的各种操作 模糊查询 精确查询 等

本意是想查查mongo数据库的int类型的like怎么查,但是好像没 解决这个问题。 精确查询;模糊查询;分页查询,每页多少:按某个字段排序(或升或降):查询数量:大于,小于,等于&…

机器学习代码问题总结

一、fit()、tansform()、fit_transform()区别 fit(): Method calculates the parameters μ and σ and saves them as internal objects.解释:简单来说,就是求得训练集X的均值,方差,最大值,最小值,这些训练集X固有的…

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

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