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

JavaScript学习教程，从入门到精通，DOM 操作语法知识点及案例代码（20）

news 来源：原创 2025/8/10 12:53:37

DOM 操作语法知识点及案例代码

一、DOM 介绍

1. 什么是 DOM

DOM (Document Object Model，文档对象模型) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表示，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。

2. HTML 节点树

DOM 将 HTML 文档表达为树结构，称为 DOM 树或节点树：

文档 (document)
└── HTML (html)├── 头部 (head)│   ├── 标题 (title)│   └── 元数据 (meta)└── 主体 (body)├── 标题 (h1)├── 段落 (p)└── 无序列表 (ul)├── 列表项 (li)├── 列表项 (li)└── 列表项 (li)

节点类型包括：

文档节点 (Document)：整个文档
元素节点 (Element)：HTML 标签
文本节点 (Text)：标签中的文本
属性节点 (Attribute)：标签的属性
注释节点 (Comment)：HTML 注释

二、HTML 元素操作

1. 获取元素

常用方法：

// 通过ID获取元素（返回单个元素）
document.getElementById('idName');// 通过类名获取元素（返回HTMLCollection）
document.getElementsByClassName('className');// 通过标签名获取元素（返回HTMLCollection）
document.getElementsByTagName('tagName');// 通过CSS选择器获取元素（返回第一个匹配元素）
document.querySelector('cssSelector');// 通过CSS选择器获取所有匹配元素（返回NodeList）
document.querySelectorAll('cssSelector');

示例代码：

<!DOCTYPE html>
<html>
<head><title>获取元素示例</title>
</head>
<body><div id="main"><p class="content">第一段内容</p><p class="content">第二段内容</p><ul><li>项目1</li><li>项目2</li></ul></div><script>// 通过ID获取元素const mainDiv = document.getElementById('main');console.log(mainDiv); // 输出整个div元素// 通过类名获取元素集合const contents = document.getElementsByClassName('content');console.log(contents); // HTMLCollection(2) [p.content, p.content]// 通过标签名获取元素集合const paragraphs = document.getElementsByTagName('p');console.log(paragraphs); // HTMLCollection(2) [p.content, p.content]// 通过CSS选择器获取第一个匹配元素const firstP = document.querySelector('p.content');console.log(firstP); // 第一个p.content元素// 通过CSS选择器获取所有匹配元素const allPs = document.querySelectorAll('p.content');console.log(allPs); // NodeList(2) [p.content, p.content]</script>
</body>
</html>

2. 元素内容

常用属性和方法：

// 获取/设置元素的HTML内容（包含标签）
element.innerHTML;// 获取/设置元素的文本内容（不包含标签）
element.textContent;// 获取/设置表单元素的值
inputElement.value;

示例代码：

<!DOCTYPE html>
<html>
<head><title>元素内容示例</title>
</head>
<body><div id="container"><p>原始文本</p></div><input type="text" id="nameInput" value="默认值"><button id="changeBtn">更改内容</button><script>const container = document.getElementById('container');const nameInput = document.getElementById('nameInput');const changeBtn = document.getElementById('changeBtn');// 获取元素内容console.log(container.innerHTML); // "<p>原始文本</p>"console.log(container.textContent); // "原始文本"console.log(nameInput.value); // "默认值"// 更改按钮点击事件changeBtn.addEventListener('click', function() {// 修改HTML内容container.innerHTML = '<h2>新标题</h2><p>新添加的段落</p>';// 修改文本内容// container.textContent = '纯文本内容'; // 会覆盖所有子元素// 修改输入框的值nameInput.value = '用户输入';});</script>
</body>
</html>

3. 元素样式

常用方法：

// 通过style属性修改内联样式（只能获取内联样式）
element.style.property = 'value';// 获取元素最终计算样式（包括内联、嵌入和外部样式表）
window.getComputedStyle(element).property;// 添加/移除/切换CSS类
element.classList.add('className');
element.classList.remove('className');
element.classList.toggle('className');
element.classList.contains('className'); // 检查是否包含类

示例代码：

<!DOCTYPE html>
<html>
<head><title>元素样式示例</title><style>.highlight {background-color: yellow;font-weight: bold;}.box {width: 100px;height: 100px;background-color: lightblue;margin: 10px;transition: all 0.3s;}.big {width: 200px;height: 200px;}</style>
</head>
<body><p id="text">这是一段可以高亮的文本</p><button id="highlightBtn">高亮文本</button><div class="box" id="box"></div><button id="resizeBtn">改变大小</button><script>const text = document.getElementById('text');const highlightBtn = document.getElementById('highlightBtn');const box = document.getElementById('box');const resizeBtn = document.getElementById('resizeBtn');// 通过style属性修改样式text.style.color = 'blue';// 高亮按钮点击事件highlightBtn.addEventListener('click', function() {// 切换highlight类text.classList.toggle('highlight');// 获取计算后的样式const computedStyle = window.getComputedStyle(text);console.log('当前背景色:', computedStyle.backgroundColor);});// 改变大小按钮点击事件resizeBtn.addEventListener('click', function() {// 方法1：直接修改style// if (box.style.width === '200px') {//     box.style.width = '100px';//     box.style.height = '100px';// } else {//     box.style.width = '200px';//     box.style.height = '200px';// }// 方法2：通过classList切换类（更推荐）box.classList.toggle('big');});</script>
</body>
</html>

4. 元素属性

常用方法：

// 获取/设置标准属性
element.getAttribute('attributeName');
element.setAttribute('attributeName', 'value');// 移除属性
element.removeAttribute('attributeName');// 检查是否有某属性
element.hasAttribute('attributeName');// 直接访问属性（对于标准属性）
element.id;
element.className;
element.href;
element.src;
// 等等...

示例代码：

<!DOCTYPE html>
<html>
<head><title>元素属性示例</title>
</head>
<body><img id="logo" src="default.png" alt="网站Logo" data-info="company-logo"><a id="link" href="https://example.com">示例网站</a><button id="changeBtn">更改属性</button><script>const logo = document.getElementById('logo');const link = document.getElementById('link');const changeBtn = document.getElementById('changeBtn');// 获取属性console.log(logo.getAttribute('src')); // "default.png"console.log(logo.alt); // "网站Logo"（标准属性可以直接访问）console.log(logo.dataset.info); // "company-logo"（自定义data-*属性）// 更改按钮点击事件changeBtn.addEventListener('click', function() {// 方法1：使用setAttributelogo.setAttribute('src', 'new-logo.png');// 方法2：直接设置属性（标准属性）link.href = 'https://new-example.com';// 设置自定义属性logo.setAttribute('data-version', '2.0');// 或使用dataset（推荐）logo.dataset.version = '2.0';// 移除属性if (logo.hasAttribute('alt')) {logo.removeAttribute('alt');}});</script>
</body>
</html>

三、【示例】实现模态对话框

下面是一个完整的模态对话框实现示例：

<!DOCTYPE html>
<html>
<head><title>模态对话框示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;}/* 模态对话框背景 */.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: none;justify-content: center;align-items: center;z-index: 1000;}/* 模态对话框内容 */.modal-content {background-color: white;padding: 20px;border-radius: 5px;width: 80%;max-width: 500px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);position: relative;}/* 关闭按钮 */.close-btn {position: absolute;top: 10px;right: 10px;font-size: 20px;cursor: pointer;background: none;border: none;}/* 显示模态框 */.show {display: flex;animation: fadeIn 0.3s;}@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}</style>
</head>
<body><h1>模态对话框示例</h1><button id="openModalBtn">打开对话框</button><!-- 模态对话框结构 --><div id="modal" class="modal-overlay"><div class="modal-content"><button class="close-btn">&times;</button><h2>这是一个模态对话框</h2><p>这是对话框的内容。点击关闭按钮或对话框外部可以关闭它。</p><div><button id="confirmBtn">确认</button><button id="cancelBtn">取消</button></div></div></div><script>// 获取DOM元素const openModalBtn = document.getElementById('openModalBtn');const modal = document.getElementById('modal');const closeBtn = document.querySelector('.close-btn');const confirmBtn = document.getElementById('confirmBtn');const cancelBtn = document.getElementById('cancelBtn');// 打开模态对话框openModalBtn.addEventListener('click', function() {modal.classList.add('show');});// 关闭模态对话框的函数function closeModal() {modal.classList.remove('show');}// 点击关闭按钮关闭对话框closeBtn.addEventListener('click', closeModal);// 点击确认按钮confirmBtn.addEventListener('click', function() {alert('您点击了确认按钮！');closeModal();});// 点击取消按钮cancelBtn.addEventListener('click', function() {alert('操作已取消。');closeModal();});// 点击模态框外部关闭对话框modal.addEventListener('click', function(e) {if (e.target === modal) {closeModal();}});// 按ESC键关闭对话框document.addEventListener('keydown', function(e) {if (e.key === 'Escape' && modal.classList.contains('show')) {closeModal();}});</script>
</body>
</html>

代码说明：

HTML结构：
- 主页面包含一个触发按钮
- 模态对话框包含在modal-overlay div中，初始状态为隐藏
CSS样式：
- modal-overlay使用固定定位覆盖整个视口
- 使用flex布局使对话框居中
- 添加了简单的淡入动画
- 使用z-index确保对话框在最上层
JavaScript功能：
- 通过classList.add()和classList.remove()控制显示/隐藏
- 实现了多种关闭方式：
  - 点击关闭按钮
  - 点击确认/取消按钮
  - 点击对话框外部
  - 按ESC键
- 使用事件委托处理外部点击事件

JavaScript学习教程，从入门到精通，DOM 操作语法知识点及案例代码（20）

DOM 操作语法知识点及案例代码一、DOM 介绍 1. 什么是 DOM DOM (Document Object Model，文档对象模型) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表示，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结…...

编程日记 2025/8/10 12:53:37

Vue3 + TypeScript中defineEmits 类型定义解析

TypeScript 中 Vue 3 的 defineEmits 函数的类型定义，用于声明组件可以触发的事件。以下是分步解释： 1. 泛型定义 ts <"closeDialog" | "getApplySampleAndItemX"> 作用：定义允许的事件名称集合，即组…...

编程日记 2025/8/4 10:05:54

Git命令归纳

初始化git git config --global user.name xxx：设置全局用户名，信息记录在~/.gitconfig文件中git config --global user.email xxxxxx.com：设置全局邮箱地址，信息记录在~/.gitconfig文件中git init：先创建一个目录&am…...

编程日记 2025/8/7 7:56:53

Oracle Recovery Tools修复ORA-600 6101/kdxlin:psno out of range故障

数据库异常断电,然后启动异常,我接手该库,尝试recover恢复 SQL> recover database; ORA-10562: Error occurred while applying redo to data block (file# 2, block# 63710) ORA-10564: tablespace SYSAUX ORA-01110: ???????? 2: H:\TEMP\GDLISNET\SYSAUX01.DBF O…...

编程日记 2025/7/30 21:47:22

ISO26262-浅谈用例导出方法和测试方法

目录 1 摘要2 测试方法3 测试用例导出方法4 测试方法与用例导出方法的差异和联系5 结论 1 摘要 ISO26262定义了测试方法和用例导出方法，共同保证产品的开发质量。但在刚开始学习ISO26262的时候，又不是非常清晰地理解它俩的区别和联系。本文主要对它俩的…...

编程日记 2025/8/4 17:02:34

小测验——已经能利用数据集里面的相机外参调整后看到渲染图像

文章目录 .1 外try——牛的显示.2 try——衣服的显示.3 原生R，T但是部分显示.4 在.3的基础上加上可视化界面.5 调参后能看到东西的.6 能看一点东西+可视化（pytorch3d）.7 自己的代码可视化——需要调整.1 外try——牛的显示 import numpy as np import matplotlib.pyplot as …...

编程日记 2025/8/10 12:53:03

2024期刊综述论文 Knowledge Graphs and Semantic Web Tools in Cyber Threat Intelligence

发表在期刊Journal of Cybersecurity and Privacy上，专门讲知识图谱技术和语义Web工具在网络威胁情报领域的作用，还把本体和知识图谱放在相同的地位上讨论。此处可以明确一点：本体和知识图谱都可以用于网络威胁情报的应用，当然也…...

编程日记 2025/8/5 18:29:16

文件上传及验证绕过漏洞

目录一、文件上传常见点二、客户端--JS绕过--PASS-01 1、环境安装 2、禁用JS 3、后缀名绕过 4、修改前端代码三、服务端黑名单绕过 1、特殊可解析后缀--PASS-03 2、大小写绕过--PASS-06 3、点绕过--PASS-08 4、空格绕过--PASS-07 5、::$DATA绕过--PASS-09 6、配…...

编程日记 2025/8/6 16:59:53

stack和queue的使用和模拟实现

1：stack文档 stack文档 stack的使用 2：queue文档 queue文档 queue的使用 1：队列是一种容器适配器，专门用于在FIFO上下文(先进先出)中操作，其中从容器一端插入元素，另一端提取元素。 2：队列作…...

编程日记 2025/8/8 15:23:21

基于Ubuntu2504部署OpenStack E版

OpenStack 初始化环境安装数据库、memcahe、rabbitmq等服务安装keystone服务安装glance服务安装placement服务安装nova服务安装neutron服务安装horizon服务官网 OpenStack Epoxy 巩固了作为 VMware 替代方案的地位，增强了安全性，并改进了硬件支持第 3…...

编程日记 2025/8/10 12:53:35

Jsp技术入门指南【七】JSP动作讲解

Jsp技术入门指南【七】JSP动作讲解前言一、什么是JSP动作？二、核心JSP动作详解1. jsp:include：动态包含其他页面与<% include %>的区别 2. jsp:forward：请求转发到另一个页面3. jsp:param：为动作传递参数4. jsp:useBean&am…...

编程日记 2025/8/9 22:28:38

电脑访问 github提示找不到网页，处理方案

1、找到本机的 host文件例如 windows 的一般在 C:\Windows\System32\drivers\etc\hosts 用管理员身份打开 hosts 文件如果文件中没有 github的配置，需要自己手动添加上去； 如果有，则需要检查 github.com 与 github.global.ssl.fastly.…...

编程日记 2025/8/4 20:07:28

性能比拼: Elixir vs Go

本内容是对知名性能评测博主 Anton Putra Elixir vs Go (Golang) Performance (Latency - Throughput - Saturation - Availability) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准对比 Elixir 和 Go 简介许多人长期以来一直要求我对比 Elixir 和 Go。在本视频…...

编程日记 2025/8/4 22:16:01

动手实现文本生成模型：基于 Decoder-only Transformer (PyTorch)

1. 选择框架：PyTorch 我们选择 PyTorch 作为实现框架。PyTorch 提供了灵活的动态图，并且拥有功能强大的 nn.Transformer 模块，方便我们快速构建模型。其社区活跃，资源丰富，是进行深度学习研究和开发的优秀选择。确保你已经安装了 PyTorch 和其他必要的库： Bash pip i…...

编程日记 2025/8/2 17:18:21

WSL+Ubuntu+miniconda环境配置

安装到指定目录 bash Miniconda3-latest-Linux-x86_64.sh -b -p /usr/local/miniconda3添加环境变量 echo export PATH"/usr/local/miniconda3/bin:$PATH" >> /etc/profile echo export PATH"/usr/local/miniconda3/bin:$PATH" >> ~/.bashrc…...

编程日记 2025/8/8 18:48:22

linux学习 5 正则表达式及通配符

重心应该放在通配符的使用上正则表达式正则表达式是用于文本匹配和替换的强大工具介绍两个交互式的网站来学习正则表达式 regexlearn 支持中文 regexone 还有一个在线测试的网址 regex101 基本规则符号作用示例.匹配任何字符除了换行a.b -> axb/a,b[abc]匹配字符…...

编程日记 2025/8/9 19:25:28

【web服务_负载均衡Nginx】三、Nginx 实践应用与高级配置技巧

一、Nginx 在 Web 服务器场景中的深度应用 1.1 静态网站部署与优化在 CentOS 7 系统中，使用 Nginx 部署静态网站是最基础也最常见的应用场景。首先，准备网站文件，在/var/www/html目录下创建index.html文件： sudo mkdir -p…...

编程日记 2025/8/8 14:52:17

详解与HTTP服务器相关操作

HTTP 服务器是一种遵循超文本传输协议（HTTP）的服务器，用于在网络上传输和处理网页及其他相关资源。以下是关于它的详细介绍： 工作原理 HTTP 服务器监听指定端口（通常是 80 端口用于 HTTP，443 端口用于 HT…...

编程日记 2025/7/30 13:57:53

LeetCode 2563.统计公平数对的数目：排序 + 二分查找

【LetMeFly】2563.统计公平数对的数目：排序二分查找力扣题目链接：https://leetcode.cn/problems/count-the-number-of-fair-pairs/ 给你一个下标从 0 开始、长度为 n 的整数数组 nums ，和两个整数 lower 和 upper ，返回公平…...

编程日记 2025/8/6 19:16:18

Manus技术架构、实现内幕及分布式智能体项目实战

Manus技术架构、实现内幕及分布式智能体项目实战模块一： 剖析Manus分布式多智能体全生命周期、九大核心模块及MCP协议，构建低幻觉、高效且具备动态失败处理能力的Manus系统。模块二： 解析Manus大模型Agent操作电脑的原理与关键API&#xf…...

编程日记 2025/7/30 21:46:54

基于springboot的个人财务管理系统的设计与实现

博主介绍：java高级开发，从事互联网行业六年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了六年的毕业设计程序开发，开发过上千套毕业设计程序，没有什么华丽的语言&#xff0…...

编程日记 2025/8/4 7:47:06

新能源汽车动力电池热管理方案全解析：开启电车续航与安全的密码

热管理：新能源汽车的隐形守护者在新能源汽车飞速发展的今天，热管理系统作为保障车辆核心部件稳定运行的关键，正逐渐成为行业关注的焦点。据市场研究机构的数据显示，近年来新能源汽车的销量持续攀升，而与之相伴的是热…...

编程日记 2025/8/10 7:55:47

Ubuntu开启自启动PostgreSQL读取HDD失败处理思路

前置文章： windows通用网线连接ubuntu实现ssh登录、桌面控制、文件共享Ubuntu挂载HDD迁移存储PostgreSQL数据背景： 启动实体Ubuntu机器后后很大的概率PostgreSQL不会成功启动，查看日志： Ubuntu启动时间： rootPine…...

编程日记 2025/8/8 9:57:35

损失函数总结

目录回归问题L1损失平均绝对值误差（MAE）Smooth L1 LossL2损失均方误差损失MSE 分类问题交叉熵损失KL 散度损失 KLDivLoss负对数似然损失 NLLLoss 排序MarginRankingLoss 回归问题 L1损失平均绝对值误差（MAE） 指模型预测值f(x…...

编程日记 2025/7/30 21:46:50

LeetCode 热题 100：回溯

46. 全排列给定一个不含重复数字的数组 nums ，返回其所有可能的全排列。你可以按任意顺序返回答案。示例 1： 输入：nums [1,2,3] 输出：[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2： 输入&#xff…...

编程日记 2025/8/3 5:19:22

Jetson Orin NX 部署YOLOv12笔记

步骤一.创建虚拟环境 conda create -n yolov12 python3.8.20 注意：YOLOv12/YOLOv11/YOLOv10/YOLOv9/YOLOv8/YOLOv7a/YOLOv5 环境通用步骤二.激活虚拟环境 conda activate yolov12 #激活环境步骤三.查询Jetpack出厂版本 Jetson系列平台各型号支持的最高Jetp…...

编程日记 2025/8/4 21:22:19

『Linux_网络』第二章 UDP_Socket编程

学习了网络的概念了，接下来我们开始实践，本次我们会通过UDP来模拟实现UDP客户端和UDP服务器之间的通信，以及在此基础上扩展几个应用。下面，我们将使用socket，bind，htons等接口实现UDP网络通信。 v1 版本 …...

编程日记 2025/8/10 1:38:59

【leetcode刷题日记】lc.322-零钱兑换

目录 1.题目 2.代码 1.题目给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1 。你可以认…...

编程日记 2025/8/4 1:56:06

从GET到POST：HTTP请求的攻防实战与CTF挑战解析

初探HTTP请求：当浏览器遇见服务器基础协议差异可视化 # 典型GET请求 GET /login.php?username=admin&password=p@ssw0rd HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0# 典型POST请求 POST /login.php HTTP/1.1 Host: example.com Content-Type: application/x…...

编程日记 2025/8/6 22:19:43

实现Azure Data Factory安全地请求企业内部API返回数据

需要配置一个Web Activity组件在Azure云上的Azure Data Factory运行，它需要访问企业内部的API获取JSON格式的数据，企业有网关和防火墙，API有公司的okta身份认证，通过公司的域账号来授权访问，现在需要创建一个专用的域账…...

编程日记 2025/8/5 16:18:51

JDOM处理XML：Java程序员的“乐高积木2.0版“

各位代码建筑师们！今天我们要玩一款比原生DOM更"Java友好"的XML积木套装——JDOM！它像乐高得宝系列（Duplo）一样简单易用，却能让你的XML工程稳如霍格沃茨城堡！（温馨提示：别…...

编程日记 2025/8/5 7:17:20

Grouped Query Attention (GQA) PyTorch实现

个人在网上看到的实现好像都长得奇奇怪怪的，没有简洁的感觉，因此在这里给出一种易读的GQA实现方法： import torch import torch.nn as nn import torch.nn.functional as Fclass GroupedQueryAttention(nn.Module):def __init__(self, embed…...

编程日记 2025/8/8 19:27:38

《AI大模型应知应会100篇》第27篇：模型温度参数调节：控制创造性与确定性

第27篇：模型温度参数调节：控制创造性与确定性摘要在大语言模型的使用中，“温度”（Temperature）是一个关键参数，它决定了模型输出的创造性和确定性之间的平衡。通过调整温度参数，您可以根据任…...

编程日记 2025/7/31 0:23:38

演讲比赛流程管理项目c++

对于一个基本项目，先分析基本的东西有哪些 1.类演讲管理类:用于编写比赛流程用的功能演讲者类：包含姓名，分数创建比赛流程：创建选手12个人，分为两组，6人一组，每组进行两轮比赛&#xff0…...

编程日记 2025/8/6 19:27:04

在小米AX6000中通过米家控制tailscale

由于tailscale占用内存较大，AX6000中的可用内存非常有限，所以需要对AX6000的内存使用进行优化： 1.减小tmpfs内存占用的大小： #从150M -> 90M，由于tailscale下载安装包是27M作用， 解压后50M左右&#xf…...

编程日记 2025/8/5 14:52:09

REC: 引爆全球万亿级市场！Web3+消费革命重塑全球-东南亚-跨境商业未来

在全球数字经济浪潮下，东南亚已成为增长最快的互联网市场之一，其与全球之间蓬勃发展的跨境贸易更是蕴藏着巨大潜力。然而，传统模式下的效率瓶颈、信任壁垒和用户激励难题日益凸显。在此背景下，基于去中心化与消费相结合的 REC 颠覆…...

编程日记 2025/8/10 1:39:03

微服务与事件驱动架构（EDA）

微服务架构微服务架构核心特征服务自治：每个服务拥有独立的代码库、数据库和运维流程。轻量级通信：服务间通过API（REST/gRPC）或消息队列（如Kafka）交互。去中心化治理：允许技术栈多样化&…...

编程日记 2025/8/3 14:45:24

单片机如何通过串口与上位机进行数据交换

单片机通过串口与上位机进行数据交换是一种常见的方式，广泛应用于嵌入式系统中。以下是实现这一功能的具体步骤和注意事项： 1. 硬件连接在硬件层面，需要确保单片机和上位机之间的串口连接正确： 信号线连接：通常使用…...

编程日记 2025/8/6 8:45:24

AI速读 Seed-Thinking-v1.5：大模型推理的新飞跃

在大语言模型（LLM）蓬勃发展的今天，推理模型的性能提升成为了AI领域的关键议题。今天为大家解读的论文，带来了名为Seed-Thinking-v1.5的推理模型，它在多个任务上表现惊艳，还创新性地解决了不少难题&#xff…...

编程日记 2025/8/8 15:31:03

Mysql从入门到上手(二)-全面了解增删改查(CRUD).

一、检索数据 MySQL 中的检索数据操作是数据库操作中最常见的任务之一。使用 SQL 查询语言中的 SELECT 语句，可以从数据库中的一个或多个表中检索数据。以下是 MySQL 中与数据检索相关的各种技术和用法的详细讲解。 1.1、基本查询最基本的查询是使用 SELECT 语句来…...

编程日记 2025/8/3 21:55:49

220V转5V转12V电机驱动供电WT5105

220V转5V转12V电机驱动供电WT5105 WT5105 芯片概述 WT5105 是一款集成非隔离式电源控制器，内部集成了 650V 高雪崩能力功率 MOSFET 以及高压启动与自供电电路。该芯片具有多模式输出的特点，输出电压可通过 FB 电阻灵活调整，能够实现 3.3V 以…...

编程日记 2025/8/5 17:04:18

基于Python Django 的全国房价大数据可视化系统（附源码，部署）

博主介绍：✌程序员徐师兄，7年大厂开发经验。全网粉丝12w，CSDN博客专家，同时活跃在掘金、华为云、阿里云、InfoQ等平台，专注Java技术和毕业项目实战分享✌ 🍅文末获取源码联系🍅 👇&a…...

编程日记 2025/8/5 4:24:24

leetcode0113. 路径总和 II - medium

1 题目：路径总和 II 官方标定难度：中给你二叉树的根节点 root 和一个整数目标和 targetSum ，找出所有从根节点到叶子节点路径总和等于给定目标和的路径。叶子节点是指没有子节点的节点。示例 1： 输入：root …...

编程日记 2025/8/4 1:27:10

day46——两数之和-输入有序数组（LeetCode-167）

题目描述给你一个下标从 1 开始的整数数组 numbers ，该数组已按非递减顺序排列 ，请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] ，则 1 < index1 < index2 &l…...

编程日记 2025/8/10 3:49:23