WEB APIs(1)

变量声明const(修饰常量)

const优先,如react,基本const,

对于引用数据类型,可用const声明,因为储存的是地址

何为APIs

可以使用js操作HTML和浏览器

分类:DOM(文档对象模型)和BOM(浏览器对象模型)

DOM

是浏览器提供的一套用来操作网页内容的功能;

呈现以及与任意HTML文档交互的(开发网页内容特效和实现用户交互)

DOM树

将HTML文档以树状结构表现出来

体现标签与标签关系

DOM对象

根据HTML标签生成js对象

所有标签属性都能在这个对象上面找到,修改对象属性即可映射到标签身上

核心:把网页内容当对象处理

获取DOM对象

1.根据css选择器获取一个DOM元素

语法:(只选择匹配的第一个元素)

document.querySelector(‘css选择器’)

可以对DOM元素直接操作修改

参数:

一个或多个有效css选择器 字符串

返回值:

选择器匹配的第一个元素

2.如果选择多个选择器

document.querySelectorAll(‘css选择器’)

返回值:

css选择器匹配的NodeList 对象集合

不可以对DOM元素直接操作修改

因为得到的数组是伪数组,只有长度和索引号,没有相关函数

修改元素内容

操作标签的本质是操作DOM对象

对象.innerText 属性

获取文字内容,显示纯文本,不解析标签

对象.innerHTML 属性

不同于 对象.innerText 属性,可以识别标签

操作元素属性

1.操作元素常用属性

可以通过js设置/修改标签元素属性,如src更换图片

语法:

对象.属性=值

2.操作元素样式属性

语法

对象.style.属性='值'

特殊的,如background-color

用小驼峰命名法:

3.类名操作css

修改样式多会变繁琐,可以借助css类名

语法:

//active是类名

元素.className='active'

className会覆盖之前的类名,想保留原来类名,把原来类名添加到className

4.通过classList操作类控制css

为解决className易覆盖类名问题,可通过classList方法追加和删除类名

语法:

.remove变为

div.classList.toggle('box') //有就删掉,没有就加上

3.操作表单元素属性

获取:DOM对象.属性

设置:DOM对象.属性=新值

获取表单元素

const input = document.querySelector('input')

获取表单里的值用 表单.value

innerHTML得不到表单内容

表单属性中添加有效果,移除则效果消失,一律用布尔值

如:disabled、checked、selected

input.checked=true 即可勾选上

button。disabled=true 使按钮禁用

自定义属性

data-自定义属性

标签一律以data-开头

在DOM对象上一律以dataset(数据集合)对象方式获取

定时器-间歇函数

开启定时器

setInterval(函数,间隔时间)

间隔一段时间调用一次函数(毫秒)

应用了匿名函数:

如果不是匿名函数不要加小括号,会导致直接被调用一次,之后不会再被周期性调用了

关闭定时器

注意:定时器会返回一个独一无二的id号

语法:

clearinterval(变量名)  即可关闭

一般都会满足某些条件

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

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

相关文章

利用Pygame处理键盘事件

在游戏开发中,处理用户输入是至关重要的一部分。玩家的键盘操作可以控制游戏中的角色移动、交互和其他行为,因此游戏如何响应键盘事件将直接影响玩家的游戏体验。在Pygame中,处理键盘事件是一个基础且重要的技能,本文将介绍Pygame…

如何生成狗血短剧

如何生成狗血短剧 狗血短剧剧本将上述剧本转成对话 狗血短剧剧本 标题:《爱的轮回》 类型:现代都市爱情短剧 角色: 1. 林晓雪 - 女,25岁,职场小白,善良单纯 2. 陆子轩 - 男,28岁,公…

Qt QWidget以及各种控件、布局 核心属性(适合入门使用时查询)

目录 1. QWidget核心属性 2. 按钮类控件 2.1 PushButton 核心属性 2.2 RadioButton 核心属性 2.3 CheckBox 和 Tool Button 核心属性 3. 显示类控件 3.1 Label 核心属性 3.2 LCDNumber 核心属性 3.3 ProgressBar 核心属性 3.4 Calendar Widget 核心属性 4. 输入类控…

Java基于 SpringBoot 的高校校园点餐系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

猫头虎分享已解决Bug || ModuleNotFoundError: No module named ‘tensorflow‘

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

Nacos 的配置管理和配置热更新

一、配置管理的必要性 1. 存在问题 微服务重复配置过多维护成本高:将各个微服务的配置都写到配置管理服务中,单个微服务不去编写配置,而是到配置管理服务中读取配置,实现配置共享,便于修改和维护 业务配置经常变动&a…

【通讯录案例-偏好设置 Objective-C语言】

一、刚才,我们plist存储,讲完了,这个plist,我直接,右键,打开 打开 不用xcode,我就用文本文档打开,打开方式:其他 选择:文本编辑 打开 好,这个里边儿啊,就是我们刚才存的一个Key:Value 它本质上,是一个xml 这是一种文件的格式, 等你们讲到网络的时候,实际上,…

什么是编程?

如果你已经有了一定的编程经验,本篇文章可以跳过。这篇文章是面向编程初学者的。 编程是什么 编程,字面意思即编写程序,即通过既定的关键字,来描述你的想法,并让计算机的各个部件按照你的想法来做事。 这里计算机的…

AI猫咪视频火了,一个月涨粉千万,玩法全拆解!

不知道你最近刷视频号,有没有刷到这么一种视频,视频背景音乐是喵喵喵,然后视频画面就是由AI生成的各种猫咪图片组成的,当然猫咪都是拟人的,有着人类的各种喜怒哀乐 看下面这个账号 可以说非常的成功了,也造…

Gopro Fusion Studio在win10上无法导入Fusion的视频文件

在win10家庭版已经尝试1.0,1.3,1.4三个版本,都是无法渲染,我安装了Gopro VR Player的。 在虚拟机中重新装了win10 企业版,安装了1.4的Gopro Fusion Studio也不行,都是报这个错,目前没啥解决办法…

数据库被人破解,删除数据,勒索

事情是这样的,我买了一台服务器自己部署项目玩儿玩儿,我的数据库运行在3306端口,密码没改,就是默认的123456,诡异的事情发生了,用了一段时间之后,数据库突然连接不上了,我一通操作猛…

红队打靶练习:Alfa:1

下载连接点击此处即可! 目录 信息收集 1、arp 2、nmap 3、gobuster WEB web信息收集 FTP登录 smaba服务 crunch密码生成 提权 系统信息收集 权限提升 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, …

寒假 day13

1.请编程实现二维数组的杨慧三角 #include<stdio.h> #include<string.h> int main(int argc, const char *argv[]) { int n,i,j;printf("please enter n:");scanf("%d",&n);int arr[n][n];for(i0;i<n;i){for(j0;j<i;j){if(j0 || ij…

php基础学习之分支结构和循环结构(不细讲,来对比一下和两大常用高级编程语言(C++/Java)的细微区别以便记忆)

分支结构 常见分支结构 编程语言常见分支结构有&#xff1a; if语句if-else语句if-elseif-else语句switch语句 其中&#xff0c;除了if-elseif-else语句外&#xff0c;另外3中分支语句在php中和C/Java是一模一样的&#xff01; 而if-elseif-else的唯一不同点就在&#xff0c;【…

波奇学Linux:软硬链接

ln指令建立链接 软链接 硬链接 所属者的前的数字表示硬链接数&#xff0c;引用计数&#xff0c;file.txt和soft_link是软链接所以都为2 软链接有独立inode&#xff0c;硬链接没有&#xff0c;所以硬链接不是独立文件&#xff0c;软链接是独立文件&#xff0c;且硬链接的属性会…

Docker 镜像是什么?常用的镜像命令有哪些?

docker 镜像仓库相关的命令&#xff1a;Docker 镜像仓库是什么&#xff1f;有哪些镜像仓库命令&#xff1f;-CSDN博客 1. Docker 镜像 Docker 镜像是一个轻量级、独立、可执行的软件包&#xff0c;它包含了运行特定应用程序所需的所有内容&#xff1a;代码、运行时环境、系统工…

C语言——枚举类型

&#x1f4dd;前言&#xff1a; 在之前的文章中我们已经讲解了自定义类型中的结构体类型和联合体类型&#xff0c;现在我们再充分学习一下C语言中的枚举类型&#xff1a; 1&#xff0c;什么是枚举类型 2&#xff0c;枚举类型的定义和变量的声明 3&#xff0c;对变量进行赋值 &a…

掘根宝典之C++深复制与浅复制(复制构造函数,默认复制构造函数)

到目前为止我们已经学了构造函数&#xff0c;默认构造函数&#xff0c;析构函数&#xff1a;http://t.csdnimg.cn/EOQxx 转换函数&#xff0c;转换构造函数&#xff1a;http://t.csdnimg.cn/kiHo6 友元函数&#xff1a;http://t.csdnimg.cn/To8Tj 接下来我们来学习一个新函数…

【JS逆向六】(下)逆向解密某网站返回的密文的值 仅供学习

逆向日期&#xff1a;2024.02.07 使用工具&#xff1a;Node.js 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 可使用AES进行解密处理&#xff08;直接解密即可&#xff09;&#xff1a;在线AES加解密工具 1、打开某某网站(请使用文章开头的…

利用知识图谱构建医疗问答

1、准备数据集 数据集下载地址&#xff1a;https://github.com/wangle1218/QASystemOnMedicalKG/blob/master/data/medical.json 2、导入相关包 from py2neo import Graph,Node,Relationship # 在cmd中&#xff0c;输入neo4j.bat console并回车 import pandas as pd3、连接N…