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

HTML--JavaScript操作DOM对象

news 文章来源：https://blog.csdn.net/ONE__PIECE__/article/details/140738655 2024/9/9 3:57:39

本章目标

一.DOM对象概念

编辑

二.节点访问方法

常用方法：

层次关系访问节点

三.节点信息

四.节点的操作方法

操作节点的属性

创建节点

删除替换节点

五.节点操作样式

style属性

class-name属性

六.获取元素位置

总结

本章目标

了解DOM的分类和节点间的关系
熟练使用JavaScript操作DOM节点

访问DOM节点能够熟练的进行节点的创建、添加、删除、替换等
能够熟练的设置元素的样式
能够灵活运用JavaScript获取元素位置的属性来完成网页效果

一.DOM对象概念

在JavaScript中，DOM是JavaScript操作网页内容和结构的接口。DOM对象是HTML文档中的各个元素和节点的表示。通过DOM对象，我们可以访问和操作网页中的元素、属性和事件。

DOM对象层次结构类似于一颗树，根节点是document对象，代表整个HTML文档。各个节点通过父子关系连接起来，每个节点都有自身的属性和方法。

二.节点访问方法

常用方法：

层次关系访问节点

访问步骤方法1：

通过document对象获取根元素节点。
使用根元素节点的方法和属性来访问其直接子节点。
遍历子节点列表，获取需要的节点。
使用节点的方法和属性来进一步访问其子节点或父节点。
重复步骤3和4，直到达到所需的节点。

访问步骤方法2：可以使用以下方法和属性来访问节点的层次关系：

注：通过层次关系访问节点的前提是代码必须在一行，演示案例为方便演示未放一行。

基础演示案例

<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>访问节点</title><style type="text/css">#father{width: 300px;height: 175px;border:2px solid grey;margin: 0 auto;}ul{list-style: none; line-height: 2;}a{text-decoration:none}#first{display: inline;}#first a{position: relative; left: 190px;}li{position: relative; left: -35px;font-style: oblique;}</style></head><body><section id="news"><div id="father"><header>京东快报<div id="first"><a href="#">更多></a></div></header><hr><ul><li><a href="#">京东无锡馆正式启动</a></li><li><a href="#">99元抢平板！品牌配件199-100</a></li><li><a href="#">节能领跑京东先行</a></li><li><a href="#">高洁丝领券五折！</a></li></ul></div>	</section>	</body>

层次关系演示案例

<script type="text/javascript">var newsdoc = document.getElementById("father");//innerHTML右边未赋值代表取出该标签中的元素并赋值给左边变量var message = newsdoc.lastElementChild.firstElementChild.innerHTML;window.alert(message);
</script>

三.节点信息

基础演示案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="nodeList"><li>nodeName：节点名称</li><li>nodeValue：节点值</li><li>nodeType：节点类型</li></ul><p></p></body><script type="text/javascript">var nodes = document.getElementById("nodeList");var type1 = nodes.firstChild.nodeType;var type2 = nodes.firstChild.firstChild.nodeType;var name1 = nodes.firstChild.firstChild.nodeName;var value1 = nodes.firstChild.firstChild.nodeValue;document.write("节点&lt;li&gt;nodeName：节点名称&lt;/li&gt;的类型为："+type1+"</br>");document.write("节点（nodeName：节点名称）的类型为："+type2+"</br>");document.write("节点（nodeName：节点名称）的名称为："+name1+"</br>");document.write("节点（nodeName：节点名称）的数值为："+value1);</script>
</html>

四.节点的操作方法

操作节点的属性

index.setAttribute("属性名","属性值")：在节点index中添加一个属性并给添加的属性赋值index.getAttribute("属性名")：获取index节点中的属性名所对应的值

通过操作节点的属性从而实现点击对应的按钮显示对应的图片

演示案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}div{padding: 5px; text-align: center;}div span{display: block;}</style></head><body><p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来<input type="radio" name="book" onclick="book()">灰霾来了怎么办</p><div><img src="" alt="" id="image" onclick="img()"/><span></span></div><script type="text/javascript">function book(){var imagedoc = document.getElementById("image");//getElementsByName("book"):选中所有name="book"的节点并返回一个集合赋值给booksdocvar booksdoc = document.getElementsByName("book");//booksdoc[0].checked：如果选择booksdoc[0](booksdoc集合中第一个节点)if(booksdoc[0].checked){//将属性名：src 属性值：WebProect/dog.jpg 赋值给==>imagedocimagedoc.setAttribute("src","WebProect/dog.jpg");imagedoc.setAttribute("alt","我和狗狗一起活下来");imagedoc.nextSibling.innerHTML = "我和狗狗一起活下来";}else if(booksdoc[1].checked){imagedoc.setAttribute("src","WebProect (2)/mai.jpg");	imagedoc.setAttribute("alt","灰霾来了怎么办");imagedoc.nextSibling.innerHTML = "灰霾来了怎么办";														}}function img(){var messagealt = document.getElementById("image").getAttribute("alt");window.alert("该图片的alt属性值是==>"+messagealt);}</script></body>
</html>

创建节点

点击"我和狗狗一起活下来"会再次生成一个同样的图片

点击"灰霾来了怎么办"窗口会进行弹窗

 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}div{padding: 5px; text-align: center;}div span{display: block;}</style></head><body><p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来<input type="radio" name="book" onclick="book()">灰霾来了怎么办</p><div></div><script type="text/javascript">function img(){window.alert("灰霾来了怎么办");}function book(){var divdoc = document.getElementsByTagName("div")[0];var booksdoc = document.getElementsByName("book");if(booksdoc[0].checked){//document.createElement("img"):在当前文档中创建一个"img"标签					var imagedoc = document.createElement("img");	//等价于<img />//以下三行都使用setAttribute()来给变量imagedoc添加属性并给添加的属性赋值imagedoc.setAttribute("src","WebProect/dog.jpg");  //等价于<img src = "images/dog.jpg" />imagedoc.setAttribute("alt","我和狗狗一起活下来");//等价于<img src = "images/dog.jpg" alt="我和狗狗一起活下来" />imagedoc.setAttribute("onclick","copyNode()");//使用appendChild()在divdoc节点中追加一个子元素imagedocdivdoc.appendChild(imagedoc);}else if(booksdoc[1].checked){var imagedoc = document.createElement("img");	//<img />					imagedoc.setAttribute("src","WebProect (2)/mai.jpg");	imagedoc.setAttribute("alt","灰霾来了怎么办");imagedoc.setAttribute("onclick","img()");divdoc.appendChild(imagedoc);																			}}function copyNode(){//选中div并赋值给divdocvar divdoc = document.getElementsByTagName("div")[0];//选中divdoc中的最后一个节点并赋值该节点var clonedoc= divdoc.lastChild.cloneNode(false);//将clonedoc添加到divdoc中divdoc.appendChild(clonedoc);}</script></body>
</html>

删除替换节点

演示案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{padding: 0; margin: 0; font-size: 12px;}ul,li{list-style: none;}li{float: left; text-align: center; width: 140px;}</style></head><body><ul><li><img src="WebProect/f01.jpg" id="first"><p><input type="button" value="删除我吧" onclick="del()"></p></li><li><img src="WebProect/f02.jpg" id="second"><p><input type="button" value="换换我吧" onclick="rep()"></p></li></ul><script type="text/javascript">function del(){var delNode = document.getElementById("first");//删除一个节点需要通过该节点的父节点删除该节点//delNode.parentNode:代表返回delNode的父节点//delNode.parentNode.removeChild(delNode):代表delNode的父节点删除子节点delNodedelNode.parentNode.removeChild(delNode);}function rep(){var oldNode=document.getElementById("second");var newNode = document.createElement("img");newNode.setAttribute("src","WebProect/f03.jpg");oldNode.parentNode.replaceChild(newNode,oldNode);}			</script>	</body>
</html>

五.节点操作样式

JavaScript中的节点操作样式可以用于改变HTML元素的外观和布局。通过修改节点的样式属性，可以改变元素的大小、颜色、字体以及位置等

style属性

演示案例

当鼠标移动到“我的购物车”后显示购物车内容，鼠标离开后购物车内容消失


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>我的购物车</title><style type="text/css">*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}ul,li{list-style: none;}#shopping{margin: 20px auto 0 auto; width: 320px;}#cart{background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;border: solid 1px #dcdcdc;float: right;width: 100px;height: 28px;padding-left: 45px;line-height: 28px;position: relative;cursor: pointer;}#cart span{position: absolute;color: #fff;background: #dc1742;display: block;width: 15px;height: 15px;border-radius: 50%;top:-5px;right: 20px;font-size: 8px; line-height: 15px;text-align: center;}//使用display: none使div边框隐藏#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}#cartList li{float: left;}#cartList li:nth-of-type(1){width: 65px; text-align: center;}#cartList li:nth-of-type(2){width: 155px;}#cartList li:nth-of-type(3){text-align: center; width: 85px;}#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0  5px;}#cartList .footer span{padding: 0 12px;}#cartList .footer span:nth-of-type(2){color: #fff;background: #dc1742;display: block;height: 25px;border-radius: 6px; float: right;text-align: center;font-weight: bold;margin-top: 5px;}</style>
</head>
<body>
<section id="shopping"><!--onmouseover="over()":鼠标移动到对象后调用over()--><!--onmouseout="out()":鼠标离开对象后调用out()函数--><div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div><div id="cartList"><h2>最新加入的商品</h2><ul><li><img src="images/makeup.jpg"></li><li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li><li>¥558.00×1<br/>删除</li></ul><div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div></div>
</section>
<script type="text/javascript">function over(){document.getElementById("cart").style.backgroundColor = "#ffffff";//使用zIndex提高层级优先显示document.getElementById("cart").style.zIndex = "100";//style.borderBottom = "none":删除下边框document.getElementById("cart").style.borderBottom = "none";document.getElementById("cartList").style.display="block";document.getElementById("cartList").style.position="relative";document.getElementById("cartList").style.top="-1px";}//将out函数中执行的代码反向操作即可完成鼠标离开后div边框收回的操作function out(){//还原背景颜色document.getElementById("cart").style.backgroundColor = "#f9f9f9";//还原下边框document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";//使出现的div边框消失document.getElementById("cartList").style.display="none";}
</script>
</body>
</html>

class-name属性

上述购物车案例也可通过下述class-name属性实现

class-name属性的本质是直接调用CSS中的样式。

<script type="text/javascript">function over(){//className = "cartOver":等价于直接调用CSS中class="cartOver"的所有样式document.getElementById("cart").className = "cartOver";     document.getElementById("cartList").className = "cartListOver";}function out(){document.getElementById("cart").className = "cartOut";document.getElementById("cartList").className = "cartListOut";}
</script>

六.获取元素位置

总结

HTML--JavaScript操作DOM对象

目录本章目标一.DOM对象概念编辑二.节点访问方法常用方法： 层次关系访问节点三.节点信息四.节点的操作方法操作节点的属性创建节点删除替换节点五.节点操作样式 style属性 class-name属性六.获取元素位置总结本章目标了解DOM的分类和节…...

编程日记 2024/7/30 21:02:25

Redis 缓存

安装安装 Redis 下载： Releases tporadowski/redis (github.com) winr ----services.msc-----将redis 设置为手动(只是学习，如果经常用可以设置为自动) 安装 redis-py 库 pip install redis-py Redis 和 StrictRedis redis-py 提供 Redis 和 Str…...

编程日记 2024/7/30 20:59:22

Prozyme糖样本检测平台--GlykoPrep® Rapid N-Glycan Preparation with APTS

单克隆抗体已成为生物制药行业具有潜力的新兴蛋白候选药物。其药物研发流程包括一系列精细的控制和评估步骤，需要仔细、严格地监测目标化合物的治疗稳定性及有效性。因此，在商业化前的每个阶段对单克隆抗体进行全面表征是极其有益的。在大量研究成熟的蛋…...

编程日记 2024/7/30 20:58:21

力扣面试题（一）

1、给你两个字符串 word1 和 word2 。请你从 word1 开始，通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长，就将多出来的字母追加到合并后字符串的末尾。 char * mergeAlternately(char * word1, char * word2){int len1 strlen(word1);i…...

编程日记 2024/7/30 20:57:19

Python 输入输出

重点内容： 1、梳理掌握输入和输出函数的应用。 2、熟练使用int() float() str()等函数进行数据转换 3、常用转义字符在数据输入、输出中的应用 4、熟练使用ljust()、center()、rjust()等方法对字符位置进行控制。 5、灵活应用ASCII码、字母、数字及特殊字符解决…...

编程日记 2024/7/30 20:56:18

国服最强文字转音频？Fish Speech

官网文档与示例 Fish Speech V1.2 是一款领先的文本到语音 (TTS) 模型，使用 30 万小时的英语、中文和日语音频数据进行训练。我尝试用1066运行，但是质量不尽如人意，建议使用RTX系列的显卡进行推理。使用结果展示 text """20…...

编程日记 2024/7/30 20:52:10

数据结构(6):图

1 图的基本概念 1.1 基本概念 1.1.1 定义【多对多的关系】一个图不可能是空图！！！一个图的顶点集一定是非空集，但是边集可以为空集！ 1.1.2 应用 1.2 无向图和有向图弧头是有箭头的那一边，弧尾是没有箭头…...

编程日记 2024/7/30 20:50:08

kaggle使用api下载数据集

背景 kaggle通过api并配置代理下载数据集datasets 步骤获取api key 登录kaggle，点个人资料，获取到自己的api key 创建好的key会自动下载将key放至家目录下的kaggle.json文件中我这里是windows的administrator用户。装包我用了虚拟环境 pip …...

编程日记 2024/7/30 20:49:07

前缀表达式（波兰式）和后缀表达式（逆波兰式）的计算方式

缀是指操作符。 1. 前缀表达式（波兰式） （1）不需用括号； （2）不用考虑运算符的优先级； （3）操作符置于操作数的前面。（如 3 2 ） 1.1 中…...

编程日记 2024/7/30 20:48:06

智能井盖管理系统：城市窨井的井下“保镖”

随着城市化进程的加速，城市的生命线基础设施面临着越来越多的挑战。其中，旭华智能智能井盖传感器技术的发展为提升城市基础设施的安全性和管理效率提供了新的解决方案。它专门用于监控市政窨井、燃气井、供水井内的积水状况以及井盖状态，以增…...

编程日记 2024/7/30 20:47:05

vue3-环境变量-JavaScript-axio-基础使用-lzstring-字符串压缩-python

文章目录 1.Vue3环境变量1.1.简介1.2.全局变量的引用1.3.package.json文件 2.axio2.1.promise2.2.安装2.3.配置2.3.1.全局 axios 默认值2.3.2.响应信息格式 2.4.Axios的拦截器2.4.1.请求拦截器2.4.2.响应拦截器2.4.3.移除拦截器2.4.4.自定义实例添加拦截器 3.lz-string3.1.java…...

编程日记 2024/7/30 20:45:04

ubuntu下载docker依赖包

Ubuntu下载docker依赖包公司对外客户一直偏向对安全性要求较高，因此在外部署服务得时候，安装docker是一件极为重要得事情，之前得服务器得系统是centos7。在上一家公司的时候，已经把docker所需得rpm包已经集成打包好了。并且d…...

编程日记 2024/7/30 20:44:03

java面向对象进阶进阶篇--《JDK8，JDK9接口中新增的方法、接口的应用、适配器设计模式》

个人主页→VON 收录专栏→java从入门到起飞接口→接口和接口与抽象类综合案例一、JDK8接口中新增的方法在JDK 8中，接口新增了几个重要的特性和方法，其中最显著的是默认方法（Default Methods）和静态方法（Static Met…...

编程日记 2024/7/30 20:41:58

15.2 zookeeper java client 1. Zookeeper官方1.1 依赖1.2 Zookeeper客户端连接测试1.3***************************************************************************************1. Zookeeper官方 1.1 依赖 <dependenc…...

编程日记 2024/7/30 20:40:56

素材管理太繁琐？有这一个就够了！

引言： 在创意行业中，素材管理一直是设计师们的痛点。从灵感的捕捉到作品的完成，每一步都离不开素材的积累与整理。然而，传统的素材管理方式往往繁琐且效率低下，让人头疼不已。今天，我要介绍的这款智能素材管…...

编程日记 2024/7/30 20:39:55

KubeSphere 部署向量数据库 Milvus 实战指南

作者：运维有术星主 Milvus 是一个为通用人工智能（GenAI）应用而构建的开源向量数据库。它以卓越的性能和灵活性，提供了一个强大的平台，用于存储、搜索和管理大规模的向量数据。Milvus 能够执行高速搜索，并以…...

编程日记 2024/7/30 20:38:54

前端canvas——贝塞尔曲线

曲线之美，不在于曲线本身，而在于用的人。所以就有了这期贝塞尔曲线。新规矩，先上个GIT。效果图开局一张图，代码全靠编。代码画骨先想着怎么画一个心形吧，等你想好了，就知道怎么画了。首先就还…...

编程日记 2024/7/30 20:36:51

Elasticsearch模糊查询之Wildcard

{“wildcard” : { “LPR.keyword” : { “wildcard” : “${Keyword}”} }},你的示例中使用了 wildcard 查询，它适用于模糊搜索，允许使用通配符（* 和 ?）来匹配字段值。你使用了 keyword 子字段来确保精确匹配，这是一…...

编程日记 2024/7/30 20:35:50

【人工智能】穿越科技迷雾：解锁人工智能、机器学习与深度学习的奥秘之旅

文章目录前言一、人工智能1. 人工智能概述a.人工智能、机器学习和深度学习b.人工智能发展必备三要素c.小案例 2.人工智能发展历程a.人工智能的起源b.发展历程 3.人工智能的主要分支二、机器学习1.机器学习工作流程a.什么是机器学习b.机器学习工作流程c.特征工程 2.机器学习算…...

编程日记 2024/7/30 20:34:49

Nginx服务 rewrite、proxy_pass 用rewrite去除URL中的特定参数

Nginx 是一个高性能的开源反向代理服务器，可以用于处理跨域请求、负载均衡和缓存等功能。在本文中，我们将介绍如何使用 Nginx 配置文件来实现反向代理。我们可以实现跨域请求的处理，同时保护用户的隐私和安全。此外，Nginx 还…...

编程日记 2024/7/30 20:33:48

RocketMQ事务消息机制原理

RocketMQ工作流程在RocketMQ当中，当消息的生产者将消息生产完成之后，并不会直接将生产好的消息直接投递给消费者，而是先将消息投递个中间的服务，通过这个服务来协调RocketMQ中生产者与消费者之间的消费速度。那么生产者是如何…...

编程日记 2024/7/30 20:30:45

【C++】选择结构- 嵌套if语句

嵌套if语句的语法格式： if(条件1) { if(条件1满足后判断是否满足此条件) {条件2满足后执行的操作} else {条件2不满足执行的操作} } 下面是一个实例 #include<iostream> using namespace std;int main4() {/*提示用户输入一个高考分数，根据分…...

编程日记 2024/7/30 20:29:44

scrapy解决管道阻塞问题采用threadpool库线程池+twisted同步语法异步编程

实现方法：process_item和download任务函数像下面编写即可，其他管道像往常一样写法 import time import threadpool import random from twisted.internet import deferclass VideoPipeline:def __init__(self):self.pool threadpool.ThreadPool(10) # …...

编程日记 2024/7/30 20:28:43

Axure RP：打造动态交互的大屏可视化设计利器

Axure大屏可视化是指使用Axure RP这款原型设计工具来创建具有视觉冲击力和数据展示功能的大屏幕界面。Axure以其强大的交互设计和丰富的组件库，成为了实现大屏可视化的重要工具之一。以下是对Axure大屏可视化的详细阐述： 一、Axure在大屏可视化中的优势 …...

编程日记 2024/7/30 20:27:42

“八股文”在实际工作中是助力、阻力还是空谈

目录 1.概述 1.1.对实际工作的助力 1.2.存在的问题 2.“八股文”对招聘过程的影响 2.1.“八股文”在筛选候选人时的作用 2.2.面试中的比重及其合理性 2.3.如何平衡“八股文”与实际编程能力的考察 3.“八股文”在日常工作中的实用价值 3.1.在团队协作环境中进行有效沟…...

编程日记 2024/7/30 20:26:41

项目开发：@ControllerAdvice注解的基本应用

目录简介基本用法全局异常处理全局拦截器全局数据绑定注解参数1.value(): String[]2.basePackages(): String[]3.basePackageClasses(): Class<?>[]4.assignableTypes(): Class<?>[]5.annotations(): Class<? extends Annotation>[] 三.注解组成总结简…...

编程日记 2024/7/30 20:24:39

Jmeter三种方式获取数组中多个数据并将其当做下个接口参数入参【附带JSON提取器和CSV格式化】

目录一、传统方式-JOSN提取器获取接口返回值 1、接口调用获取返回值 2、添加JSON提取器 3、调试程序查看结果 4、添加循环控制器 5、设置count计数器 6、添加请求 7、执行请求二、CSV参数化 1、将结果写入后置处理程序 2、设置循环处理器 3、添加CSV文件 4、设置…...

编程日记 2024/7/30 20:23:38

C++入门基础：C++中的循环语句

循环语句是编程语言中用来重复执行一段代码直到满足特定条件的一种控制结构。它们对于处理需要重复任务的场景非常有用，比如遍历数组、累加数值、重复执行某项操作直到满足条件等。但是在使用循环语句的时候需要注意下哈，有时候一不小心会构成死循环或者…...

编程日记 2024/7/30 20:22:37

VUE 基础(二)

1 v-show:根据表达值的真假，切换元素的显示和隐藏 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&l…...

编程日记 2024/7/30 20:21:35

VMware Cloud Foundation ESXi 主机

一、准备嵌套 ESXi 主机环境# 1）物理 ESXi 主机信息本次准备用于部署 VCF 嵌套实验环境的物理宿主机的配置信息如下图所示。其实，部署 VCF 环境主要对内存的大小要求比较高，部署完整的管理域相关组件下来差不多就要占用 200 GB左右内存，而对 CPU 和存储的需求可以根据实…...

编程日记 2024/7/30 20:19:33

PyTorch深度学习快速入门（下）

PyTorch深度学习快速入门（下） 一、现有网络模型的使用及修改（一）背景知识（二）修改网络模型的三种方法二、网络模型的保存与加载（一）保存网络模型的两种方法（二&#xff…...

编程日记 2024/7/30 20:18:32

轻松入门Linux—CentOS,直接拿捏 —/— ＜1＞

一、什么是Linux Linux是一个开源的操作系统，目前是市面上占有率极高的服务器操作系统，目前其分支有很多。是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统 Linux能运行主要的UNIX工具软件、应用程序和网络协议 Linux支持 32…...

编程日记 2024/7/30 20:14:28

pandas安装以及导入CSV

安装pandas pip install pandas速度慢可以切换国内镜像源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas执行导入csv操作 import pandas as pd# 读取csv文件 data pd.read_csv(yourPath)输入data查看数据导入成功！...

编程日记 2024/7/30 20:10:24

新能源车浪潮来袭，同时存在高压低压系统，如何准确进行高低压布线间距EMC分析？

摘要随着车辆电气化水平的逐步提升，电气零部件布局和布线面临着前所未有的挑战，在不断的压缩电气零部件间间距后，EMC性能成为非常关键的性能指标。特别是对于新能源车型，同时存在高压和低压系统，高低压耦合若处理的不…...

编程日记 2024/7/30 20:09:22

QUIC 协议

详解 QUIC 协议：它为何比 TCP 更优越？...

编程日记 2024/7/30 20:08:21

【软件测试】--接口测试

1. 接口用例设计接口测试的测试点功能测试单接口功能： 手工测试中的单个业务模块，一般对应一个接口登陆业务 --> 登陆接口加入购物车业务 --> 加入购物车接口订单业务 --> 订单接口支付业务 --> 支付接口借助工具、代码。绕开前端界面…...

编程日记 2024/7/30 20:07:20

【前端】上传视频，截取第一帧图片

使用input上传视频，获得视频的第一帧参考：JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn) html： <inputbind:this{uploadRef}on:change{handleUpload}accept"video/*"type"file"/>视频类型校验&a…...

编程日记 2024/7/30 20:06:19

Redis-GEO数据结构的基本用法

GEO就是Geolocation的简写形式，代表地理坐标。Redis在3.2版本中加入了对GEO的支持，允许存储地理坐标信息，帮助我们根据经纬度来检索数据。常见的命令有： GEOADD：添加一个地理空间信息，包含：经度…...

编程日记 2024/7/30 20:03:16

【Linux C | 网络编程】进程池大文件传输的实现详解（三）

上一篇实现了进程池的小文件传输，使用自定义的协议，数据长度数据本身，类似小火车的形式，可以很好的解决TCP“粘包”的问题。【Linux C | 网络编程】进程池小文件传输的实现详解（二） 当文件的内容大小少于…...

编程日记 2024/7/30 20:01:13

Mac如何通过SSH连接Github

目录前言一、实现步骤 1.生成 SSH 密钥对 2.添加 SSH 密钥到 GitHub： 3.配置 SSH 连接 1.更新远程仓库 URL 2.测试 SSH 连接前言 GitHub 在 2021 年 8 月 13 日停止了对使用密码进行身份验证的支持。因此，你需要使用其他认证方式，如…...

编程日记 2024/7/30 20:00:12

成就巴西休闲游戏如何借助Google谷歌广告投放优势

在探讨巴西休闲游戏如何借助谷歌广告投放优势实现市场扩张的过程中，我们不得不深入分析巴西市场的独特属性、休闲游戏的兴起背景，以及谷歌广告平台在全球范围内的强大影响力。近年来，随着移动游戏市场的快速发展，特别是中轻度休闲…...

编程日记 2024/7/30 19:58:10

利用python检查磁盘空间使用情况

目录一.前言二.使用的库介绍三.代码实现以及解析 3.1导入模块 3.2邮件发送函数 send_email 3.3检查磁盘空间函数 check_and_clean_disk 3.4主程序逻辑四.致谢一.前言在信息技术飞速发展的今天，数据量的激增使得磁盘空间管理成为系统运维中的一项基…...

编程日记 2024/7/30 19:57:08

卷积神经网络（五）---图像增强的方法

前面的部分专注于卷积神经网络的层结构介绍，同时还介绍了到目前为止比较出名的卷积神经网络，接着使用比较复杂的卷积神经网络提高了 MNIST 数据集的准确率。下面将从另外的角度——图像增强的方面入手，提高模型的准确率和泛化能力。一直以来…...

编程日记 2024/7/30 19:56:07

矩阵常见分解算法及其在SLAM中的应用

文章目录常见特殊矩阵定义Cholesky分解（正定Hermittian矩阵，分解结果唯一）Cholesky分解应用 SVD分解（将singularvalues排序后分解唯一）SVD 分解的应用（任意矩阵） QR分解（任意矩阵&a…...

编程日记 2024/7/30 19:55:06

【排序】快速排序详解

✨✨欢迎大家来到Celia的博客✨✨ 🎉🎉创作不易，请点赞关注，多多支持哦🎉🎉 所属专栏：排序个人主页：Celias blog~ 一、快速排序的思想快速排序的核心思想是： 选定一个…...

编程日记 2024/7/30 19:51:02

贪心算法总结（2）

一、买卖股票的最佳时机 . - 力扣（LeetCode） class Solution { public:int maxProfit(vector<int>& prices) {int miniINT_MAX;int ret0;for(int&price:prices){//遍历的时候，我们随时去更新最小的值，然后让每一位…...

编程日记 2024/7/30 19:50:01