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

JavaScript笔记APIs篇01——DOM获取与属性操作

 黑马程序员视频地址:黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=78https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=78 

目录

变量声明的选择 

基本数据类型 

引用数据类型

DOM获取与属性操作

Web API 基本认识

作用和分类

什么是DOM

DOM树

DOM对象

获取DOM对象

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

选择匹配的多个元素

其他获取DOM元素方法

操作元素内容

元素.innerText 属性

元素.innerHTML 属性

操作元素属性

1.常用属性(标签内置属性 src等)

2.样式属性(CSS修饰属性)

通过style属性操作CSS

通过类名(className)操作CSS

通过classList操作CSS

3.表单元素属性

4.自定义属性

定时器(间歇函数)

开启定时器

关闭定时器


变量声明的选择 


基本数据类型 

 


引用数据类型


DOM获取与属性操作

Web API 基本认识

作用和分类


什么是DOM


DOM树


DOM对象


获取DOM对象

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

 参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector


选择匹配的多个元素


其他获取DOM元素方法


操作元素内容

元素.innerText 属性


元素.innerHTML 属性


操作元素属性

1.常用属性(标签内置属性 src等)


2.样式属性(CSS修饰属性)

通过style属性操作CSS


通过类名(className)操作CSS


通过classList操作CSS


3.表单元素属性

 


4.自定义属性


定时器(间歇函数)

开启定时器


关闭定时器

相关文章:

JavaScript笔记APIs篇01——DOM获取与属性操作

黑马程序员视频地址:黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes&p78https://www.bilibili.com/video/BV1Y84y1L7Nn?…...

SQL表间关联查询详解

简介 本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(left join)、右连接(right join)、全连接(full join)、内连接(inner join)、交叉连接&…...

select函数

系统调用 select()可用于执行 I/O 多路复用操作&#xff0c;调用 select()会一直阻塞&#xff0c;直到某一个或多个文件描述符成为就绪态&#xff08;可以读或写&#xff09;。其函数原型如下所示&#xff1a; #include <sys/select.h> int select(int nfds, fd_set *re…...

建造者模式(或者称为生成器(构建器)模式)

一、什么是建造者模式&#xff1f; 将复杂对象的构建与表示进行分离&#xff0c;使得统一的构建过程&#xff0c;可以创建出不同的对象表现模式 就是将复杂对象里面的成员变量&#xff0c;设置不同的值&#xff0c;使得生成出来的对象拥有不同的属性值&#xff1b; 二、特点…...

【深度学习】Huber Loss详解

文章目录 1. Huber Loss 原理详解2. Pytorch 代码详解3.与 MSELoss、MAELoss 区别及各自优缺点3.1 MSELoss 均方误差损失3.2 MAELoss 平均绝对误差损失3.3 Huber Loss 4. 总结4.1 优化平滑4.2 梯度较好4.3 为什么说 MSE 是平滑的 1. Huber Loss 原理详解 Huber Loss 是一种结合…...

A5.Springboot-LLama3.2服务自动化构建(二)——Jenkins流水线构建配置初始化设置

下面我们接着上一篇文章《A4.Springboot-LLama3.2服务自动化构建(一)——构建docker镜像配置》继续往下分析,在自动化流水线构建过程当中的相关初始化设置和脚本编写。 一、首先需要先安装Jenkins 主部分请参考我前面写的一篇文章《Jenkins持续集成与交付安装配置》 二、…...

李宏毅机器学习HW1: COVID-19 Cases Prediction

Kaggle数据集和提交链接 特征选择&#xff08;主要修改地方&#xff09; 在sample code的基础上主要修改了Select_feat选择特征函数。 首先&#xff0c;因为数据集中的第一列是id&#xff0c;先在raw_x_train&#xff0c;raw_x_valid&#xff0c;raw_x_test中都去掉这一列。其…...

MySQL下载安装DataGrip可视化工具

目录 WinMySQL下载安装步骤MySQL配置添加环境变量 Mac下载安装配置环境变量 DataGrip可视化工具以Win为例了。Mac忘记截图了。步骤都一样 Win MySQL下载 官网&#xff1a; https://www.mysql.com/ 直接进下载界面&#xff1a; https://downloads.mysql.com/archives/installe…...

多平台下Informatica在医疗数据抽取中的应用

一、引言 1.医疗数据抽取与 Informatica 概述 1.1 医疗数据的特点与来源 1.1.1 数据特点 医疗数据具有显著的多样性特点。从数据类型来看&#xff0c;涵盖了结构化数据&#xff0c;如患者的基本信息、检验检查结果等&#xff0c;这些数据通常以表格形式存储&#xff0c;便于…...

用公网服务器实现内网穿透

首先需要一个公网服务器 下载frp 搜索github下载到frp&#xff0c;服务端frps/客户端frpc。。下载的时候要注意自己本地内网机的cpu版本和服务端cpu架构 我的电脑是mac M1PRO版本 下载的是&#xff1a;darwinarm64 比如 服务端一般是Linux&#xff08;Intel 64位CPU&#xf…...

为什么mysql更改表结构时,varchar超过255会锁表

在 MySQL 中&#xff0c;当修改表结构并将 VARCHAR 字段的长度设置为超过 255 时&#xff0c;可能会出现锁表的情况。这与 MySQL 的存储引擎&#xff08;主要是 InnoDB&#xff09;以及表的底层存储方式相关。 原因分析 行格式变化 InnoDB 存储引擎支持多种行格式&#xff08;…...

ASP.NET Core中 JWT 实现无感刷新Token

在 Web 应用开发中&#xff0c;用户登录状态的管理至关重要。为了避免用户频繁遇到登录过期的问题&#xff0c;我们可以通过实现 JWT&#xff08;JSON Web Token&#xff09;刷新机制来提升用户体验 推荐: 使用 Refresh Token&#xff08;双 Token 机制&#xff09; 1. 生成和…...

函数(函数的概念、库函数、自定义函数、形参和实参、return语句、数组做函数参数、嵌套调用和链式访问、函数的声明和定义、static和extern)

一、函数的概念 •C语⾔中的函数&#xff1a;⼀个完成某项特定的任务的⼀⼩段代码 •函数又被翻译为子函数&#xff08;更准确&#xff09; •在C语⾔中我们⼀般会⻅到两类函数&#xff1a;库函数 ⾃定义函数 二、库函数 1 .标准库和头文件 •C语⾔的国际标准ANSIC规定了⼀…...

物联网在烟草行业的应用

物联网技术在烟草行业的应用 物联网技术在烟草行业的应用主要体现在以下几个方面&#xff1a; 智能制造 &#xff1a;物联网技术可以实现对生产过程中的关键参数进行实时监测&#xff0c;确保产品的质量稳定可靠。同时&#xff0c;通过对设备的远程维护和故障诊断&#xff0c;…...

第6章:Python TDD实例变量私有化探索

写在前面 这本书是我们老板推荐过的&#xff0c;我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后&#xff0c;我突然思考&#xff0c;对于测试开发工程师来说&#xff0c;什么才更有价值呢&#xff1f;如何让 AI 工具更好地辅助自己写代码&#xff0c;或许…...

Java操作Excel导入导出——POI、Hutool、EasyExcel

目录 一、POI导入导出 1.数据库导出为Excel文件 2.将Excel文件导入到数据库中 二、Hutool导入导出 1.数据库导出为Excel文件——属性名是列名 2.数据库导出为Excel文件——列名起别名 3.从Excel文件导入数据到数据库——属性名是列名 4.从Excel文件导入数据到数据库…...

BUUCTF_Web([GYCTF2020]Ezsqli)

1.输入1 &#xff0c;正常回显。 2.输入1 &#xff0c;报错false&#xff0c;为字符型注入&#xff0c;单引号闭合。 原因&#xff1a; https://mp.csdn.net/mp_blog/creation/editor/145170456 3.尝试查询字段&#xff0c;回显位置&#xff0c;数据库&#xff0c;都是这个。…...

微软宣布Win11 24H2进入新阶段!设备将自动下载更新

快科技1月19日消息&#xff0c;微软于1月16日更新了支持文档&#xff0c;宣布Windows 11 24H2进入新阶段。 24H2更新于2024年10月1日发布&#xff0c;此前为可选升级&#xff0c;如今微软开始在兼容的Windows 11设备上自动下载并安装24H2版本。 微软表示&#xff1a;“运行Wi…...

SpringBoot:解决前后端请求跨域问题(详细教程)

文章目录 一、前言二、解决方式 2.1 使用 CrossOrigin 注解&#xff08;简单方便&#xff0c;适用于单个或少量接口&#xff09;2.2 全局配置跨域&#xff08;适用于整个项目中大量接口都需要跨域的情况&#xff09;2.3 使用过滤器来处理跨域&#xff08;更底层的实现方式&…...

Android-V lmkd 中的那些属性值

源码基于&#xff1a;Android V 相关博文&#xff1a; Android lmkd 机制详解&#xff08;一&#xff09; Android lmkd 机制详解&#xff08;二&#xff09; Android lmkd 机制从R到T 1. 汇总 属性名说明默认值 ro.lmk.debug 启动 lmkd 的debug 模式&#xff0c;会打印一…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...