当前位置： 首页 > news >正文

WEB APIs（1）

news 2026/5/18 17:43:02

变量声明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得不到表单内容（button可以）

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

如：disabled、checked、selected

input.checked=true 即可勾选上

button.disabled=true 使按钮禁用

自定义属性

data-自定义属性

标签一律以data-开头

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

定时器-间歇函数

开启定时器

setInterval(函数，间隔时间)

间隔一段时间调用一次函数（毫秒）

应用了匿名函数：

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

关闭定时器

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

语法：

clearinterval（变量名）  即可关闭

一般都会满足某些条件

应用-用户倒计时

<html><body><button class="btn" disabled>用户须知(5)</button><script>const btn = document.querySelector('.btn')let i = 5let n = setInterval(function () {i--btn.innerHTML = `用户须知(${i})`if (i === -1) {clearInterval(n)btn.disabled = falsebtn.innerHTML = `同意`}}, 1000);</script>
</body></html>

相关文章：

WEB APIs（1）

变量声明const&#xff08;修饰常量&#xff09; const优先&#xff0c;如react&#xff0c;基本const&#xff0c; 对于引用数据类型&#xff0c;可用const声明&#xff0c;因为储存的是地址 何为APIs 可以使用js操作HTML和浏览器 分类&#xff1a;DOM&#xff08;文档对象…...

编程日记 2024/2/17 5:01:18

C++重新入门-基本输入输出

C 的 I/O 发生在流中&#xff0c;流是字节序列。如果字节流是从设备&#xff08;如键盘、磁盘驱动器、网络连接等&#xff09;流向内存&#xff0c;这叫做输入操作。如果字节流是从内存流向设备&#xff08;如显示屏、打印机、磁盘驱动器、网络连接等&#xff09;&#xff0c;这…...

编程日记 2024/2/17 4:59:16

【C语言】解析刘谦春晚魔术《守岁共此时》

今年的春晚上刘谦表演了魔术《守岁共此时》&#xff0c;台上台下积极互动&#xff08;尤其是小尼&#xff09;&#xff0c;十分的有趣。刘谦老师的魔术不仅仅是他的高超手法&#xff0c;还有这背后的严谨逻辑&#xff0c;下面我们来用C语言来解析魔术吧。 源代码 #define _CRT…...

编程日记 2024/2/17 4:57:12

剑指offer——数值的整数次方

目录 1. 题目描述2. 一般思路2.1 有问题的思路2.2 全面但不高效的思路2.3 面试小提示 3. 全面又高效的思路 1. 题目描述 题目:实现函数 double Power(double base,int exponent)&#xff0c;求base 的exponent 次方。不得使用库函数&#xff0c;同时不需要考虑大数问题 2. 一般…...

编程日记 2024/2/17 4:51:06

Tied Block Convolution: 具有共享较薄滤波器的更简洁、更出色的CNN

摘要 https://arxiv.org/pdf/2009.12021.pdf 卷积是卷积神经网络&#xff08;CNN&#xff09;的主要构建块。我们观察到&#xff0c;随着通道数的增加&#xff0c;优化后的CNN通常具有高度相关的滤波器&#xff0c;这降低了特征表示的表达力。我们提出了Tied Block Convolutio…...

编程日记 2024/2/17 4:40:58

算法沉淀——BFS 解决 FloodFill 算法（leetcode真题剖析）

算法沉淀——BFS 解决 FloodFill 算法 01.图像渲染02.岛屿数量03.岛屿的最大面积04.被围绕的区域 BFS&#xff08;广度优先搜索&#xff09;解决 Flood Fill 算法的基本思想是通过从起始点开始&#xff0c;逐层向外扩展&#xff0c;访问所有与起始点相连且具有相同特性&#xf…...

编程日记 2024/2/17 4:39:57

wordpress外贸成品网站模板

首页大图slider轮播&#xff0c;橙色风格的wordpress外贸网站模板 https://www.zhanyes.com/waimao/6250.html 蓝色经典风格的wordpress外贸建站模板 https://www.zhanyes.com/waimao/6263.html...

编程日记 2024/2/17 4:38:56

如何使用六图一表七种武器

六图一表七种武器用于质量管理&#xff1a; 描述当遇到问题时应该用那张图来解决&#xff1a; 一、如果题目说出了质量问题需要找原因&#xff1f; 解&#xff1a;用因果图&#xff0c;因果图也称石川图或鱼骨图 二、如果要判断过程是否稳定受控&#xff1f; 解&#xff1a…...

编程日记 2024/2/17 4:36:54

阿里云游戏服务器租用费用价格组成，费用详单

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…...

编程日记 2024/2/17 4:32:50

【C++】C++11上

C11上 1.C11简介2.统一的列表初始化2.1 {} 初始化2.2 initializer_list 3.变量类型推导3.1auto3.2decltype3.3nullptr 4.范围for循环5.final与override6.智能指针7. STL中一些变化8.右值引用和移动语义8.1左值引用和右值引用8.2左值引用与右值引用比较8.3右值引用使用场景和意义…...

编程日记 2024/2/17 4:31:50

【前端高频面试题--git篇】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;前端高频面试题 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 前端高频面试题--git篇 往期精彩内容常用命令git add 和 git stage 有什么区别怎么使用git连接…...

编程日记 2024/2/17 4:27:46

c++创建对象

c创建对象 1.声明一个对象&#xff0c;然后使用默认构造函数来创建对象&#xff1a; class MyClass { public:MyClass() {// 构造函数代码} };int main() {MyClass obj; // 声明并创建一个对象return 0; }2.使用new和指针动态创建对象&#xff1a;不会自动释放 使用 new 运算…...

编程日记 2024/2/17 4:23:42

软件实例分享，洗车店系统管理软件会员卡电子系统教程

软件实例分享&#xff0c;洗车店系统管理软件会员卡电子系统教程 一、前言 以下软件教程以 佳易王洗车店会员管理软件V16.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、会员卡号可以绑定车牌号或手机号 2、卡号也可以直接使用手机号&a…...

编程日记 2024/2/17 4:17:36

【Docker进阶】镜像制作-用Dockerfile制作镜像（一）

进阶一 docker镜像制作 文章目录 进阶一 docker镜像制作用dockerfile制作镜像dockerfile是什么dockerfile格式为什么需要dockerfileDockerfile指令集合FROMMAINTAINERLABELCOPYENVWORKDIR 用dockerfile制作镜像 用快照制作镜像的缺陷&#xff1a; 黑盒不可重复臃肿 docker…...

编程日记 2024/2/17 4:15:34

数据密集型应用系统设计

数据密集型应用系统设计 原文完整版PDF&#xff1a;https://pan.quark.cn/s/d5a34151fee9 这本书的作者是少有的从工业界干到学术界的牛人&#xff0c;知识面广得惊人&#xff0c;也善于举一反三&#xff0c;知识之间互相关联&#xff0c;比如有个地方把读路径比作programming …...

编程日记 2024/2/17 4:11:31

分布式文件系统 SpringBoot+FastDFS+Vue.js【一】

分布式文件系统 SpringBootFastDFSVue.js【一】 一、分布式文件系统1.1.文件系统1.2.什么是分布式文件系统1.3.分布式文件系统的出现1.3.主流的分布式文件系统1.4.分布式文件服务提供商1.4.1.阿里OSS1.4.2.七牛云存储1.4.3.百度云存储 二、fastDFS2.1.fastDSF介绍2.2.为什么要使…...

编程日记 2024/2/17 4:10:30

【PyQt】11-QTextEdit、QPushButton

文章目录 前言一、文本输入-QTextEdit1.1 代码1.2 运行结果 二、QPushButton2.1.1 按钮上添加文本2.1.2 按键的弹跳效果2.1.3 两个信号可以绑定一个槽。2.1.4 带图标的按键运行结果 2.1.5 按键不可用以及回车默认完整代码2.2 单选按键控件运行结果 2.3 复选框&#xff08;多选框…...

编程日记 2024/2/17 4:07:27

初识webpack（二）解析resolve、插件plugins、dev-server

目录 (一)webpack的解析(resolve) 1.resovle.alias 2.resolve.extensions 3.resolve.mainFiles (二) plugin插件 1.CleanWebpackPlugin 2.HtmlWebpackPlugin 3.DefinePlugin (三)webpack-dev-server 1.开启本地服务器 2.HMR模块热替换 3.devServer的更多配置项 (…...

编程日记 2024/2/17 4:06:26

什么是自编码器Auto-Encoder？

来源&#xff1a;https://www.bilibili.com/video/BV1Vx411j78H/?spm_id_from333.1007.0.0&vd_sourcef66cebc7ed6819c67fca9b4fa3785d39 为什么要压缩呢&#xff1f; 让神经网络直接从上千万个神经元中学习是一件很吃力的事情&#xff0c;因此通过压缩提取出原图片中最具代…...

编程日记 2024/2/17 4:01:19

openGauss学习笔记-219 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-网络

文章目录 openGauss学习笔记-219 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-网络219.1 查看网络状况 openGauss学习笔记-219 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-网络 获取openGauss节点的CPU、内存、I/O和网络资源使用情况&#xff0c;确认这些资源…...

编程日记 2024/2/17 3:56:14

告别繁琐：Windows平台I2C总线高效调试实战

1. Windows平台I2C调试痛点解析 第一次在Windows下调试I2C设备时&#xff0c;我对着示波器抓到的杂乱波形发呆了整整两小时。与Linux系统自带i2c-tools的便利性相比&#xff0c;Windows环境确实像个"二等公民"——直到我发现CH341A这个神器。这个售价不到20元的USB转…...

编程新知 2026/5/18 17:13:12

GCC __builtin函数避坑指南：让你的跨平台C代码在ARM和x86上都跑得稳

GCC __builtin函数跨平台避坑实战&#xff1a;ARM与x86兼容性深度解析 在嵌入式开发与高性能计算领域&#xff0c;GCC编译器的__builtin函数集一直是开发者提升性能的利器。但当代码需要同时运行在ARM架构的嵌入式设备和x86架构的服务器上时&#xff0c;这些看似美妙的"魔…...

编程新知 2026/5/18 17:08:53

Cream开发者进阶指南：深入理解架构搜索算法

Cream开发者进阶指南&#xff1a;深入理解架构搜索算法 【免费下载链接】Cream This is a collection of our NAS and Vision Transformer work. 项目地址: https://gitcode.com/gh_mirrors/cr/Cream 在深度学习模型设计领域&#xff0c;神经架构搜索&#xff08;NAS&am…...

编程新知 2026/5/18 16:22:59

汇顶科技入围GSA奖项：中国芯片设计公司的战略聚焦与成长路径分析

1. 项目概述&#xff1a;一次里程碑式的行业认可最近在半导体圈子里&#xff0c;一个消息引起了不小的波澜&#xff1a;汇顶科技成功入围了全球半导体联盟&#xff08;GSA&#xff09;2019年度的两大奖项提名。对于不熟悉这个领域的朋友来说&#xff0c;这或许只是一个普通的公…...

编程新知 2026/5/18 15:24:34

手把手教你用Vivado 2019.1和Tri Mode Ethernet MAC IP，在Artix-7上搞定千兆UDP通信（附RTL8211E/YT8531C/KSZ9031配置）

基于Artix-7的千兆以太网UDP通信实战指南 在嵌入式系统开发中&#xff0c;实现稳定可靠的网络通信一直是工程师面临的挑战之一。特别是当项目需要高速数据传输时&#xff0c;如何选择合适的硬件平台和协议栈就显得尤为重要。本文将聚焦Xilinx Artix-7 FPGA平台&#xff0c;详细…...

编程新知 2026/5/18 15:04:07

心理学实验小白必看：用E-Prime 3.0从零设计你的第一个Stroop任务（附完整流程）

心理学实验入门&#xff1a;用E-Prime 3.0构建专业级Stroop实验全指南 第一次打开E-Prime时&#xff0c;满屏的控件和属性面板可能让你感到无从下手——这几乎是每个心理学研究生的必经之路。作为认知心理学最经典的实验范式之一&#xff0c;Stroop任务不仅能验证注意与自动加…...

编程新知 2026/5/18 13:54:09

NotebookLM大纲自动生成失效真相（2024年最新API行为逆向分析报告）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM大纲自动生成失效现象全景速览 NotebookLM 的大纲自动生成功能在近期多个用户反馈中出现非预期中断&#xff0c;表现为输入结构化文本后无响应、输出空大纲或仅返回占位符标题。该问题并非全…...

编程新知 2026/5/18 11:52:02

Nexus Mods App 终极指南：告别模组冲突，打造完美游戏体验

Nexus Mods App 终极指南&#xff1a;告别模组冲突&#xff0c;打造完美游戏体验 【免费下载链接】NexusMods.App Home of the development of the Nexus Mods App 项目地址: https://gitcode.com/gh_mirrors/ne/NexusMods.App 还在为模组冲突导致游戏崩溃而烦恼吗&…...

编程新知 2026/5/18 11:32:59

基于NXP i.MX6的智能电子后视镜方案：硬件选型、软件架构与车规级实践

1. 项目概述与核心价值 在汽车智能化浪潮中&#xff0c;驾驶安全始终是首要课题。传统的光学后视镜存在固有的物理盲区&#xff0c;尤其是在车辆侧方和侧后方&#xff0c;这些盲区是变道、转弯时发生剐蹭甚至碰撞事故的主要诱因。作为一名在嵌入式车载系统领域摸爬滚打了十多年…...

编程新知 2026/5/18 11:30:37

如何一键下载推特上的所有媒体资源？X-Spider帮你轻松解决内容收集难题

如何一键下载推特上的所有媒体资源&#xff1f;X-Spider帮你轻松解决内容收集难题 【免费下载链接】x-spider A spider for X (Twitter) 项目地址: https://gitcode.com/gh_mirrors/xs/x-spider 你是否曾遇到过这种情况&#xff1a;在推特上看到了精美的图片、有趣的视频…...

编程新知 2026/5/18 11:00:52