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

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

news 来源：原创 2025/7/28 18:36:00

1 -> WebAPI背景知识

1.1 -> 什么是WebAPI

1.2 -> 什么是API

1.3 -> 什么是DOM

1.3.1 -> DOM树

2 -> 获取元素

2.1 -> querySelector

2.2 -> querySelectorAll

3 -> 事件初识

3.1 -> 基本概念

3.2 -> 事件三要素

4 -> 操作元素

4.1 -> 获取/修改元素内容

4.2 -> 获取/修改元素属性

4.3 -> 获取/修改表单元素属性

4.4 -> 获取/修改样式属性

4.4.1 -> 行内样式操作

4.4.2 -> 类名样式操作

5 -> 操作节点

5.1 -> 新增节点

5.2 -> 删除节点

1 -> WebAPI背景知识

1.1 -> 什么是WebAPI

JS分成三个大的部分：

ECMAScript：基础语法部分。
DOM API：操作页面结构。
BOM API：操作浏览器。

WebAPI就包含了DOM + BOM。

这个是W3C组织规定的(和制定ECMAScript标准的大佬们不是一伙人)。

1.2 -> 什么是API

API是一个更广义的概念。而WebAPI是一个更具体的概念，特指DOM + BOM。

所谓的API本质上就是一些现成的函数/对象，让程序猿拿来就用，方便开发。

相当于一个工具箱。只不过程序猿用的工具箱数目繁多，功能复杂。

API参考文档

可以在搜索引擎中按照"MDN + API关键字"的方式搜索，也能快速找到需要的API文档。

1.3 -> 什么是DOM

DOM全称为Document Object Model。

W3C标准给我们提供了一系列的函数，让我们可以操作：

网页内容。
网页结构。
网页样式。

1.3.1 -> DOM树

一个页面的结构是一个树形结构，称为DOM树。

页面结构形如：

DOM树结构形如：

重要概念：

文档：一个页面就是一个文档，使用document表示。
元素：页面中所有的标签都称为元素。使用element表示。
节点：网页中所有的内容都可以称为节点(标签节点、注释节点、文本节点、属性节点等)。使用node表示。

这些文档等概念在JS代码中就对应一个个的对象。

所以才叫"文档对象模型"。

2 -> 获取元素

这部分工作类似于CSS选择器的功能。

2.1 -> querySelector

这个是HTML5新增的,IE9及以上版本才能使用.

前面的几种方式获取元素的时候都比较麻烦.而使用querySelector能够完全复用前面学过的CSS选择器知识，达到更快捷更精准的方式获取到元素对象

var element = document.querySelector(selectors)；

selectors包含一个或多个要匹配的选择器的DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。
表示文档中与指定的一组CSS选择器匹配的第一个元素的html元素Element对象。
如果需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll()。
可以在任何元素上调用，不仅仅是document。调用这个方法的元素将作为本次查找的根元素。

正因为参数是选择器，所以一定要通过特殊符号指定是哪种选择器。

例如.box是类选择器，#star是id选择器等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box">abc</div><div id="id">def</div><h3><span><input type="text"></span></h3><script>var elem1 = document.querySelector('.box');console.log(elem1);var elem2 = document.querySelector('#id');console.log(elem2);var elem3 = document.querySelector('h3 span input');console.log(elem3);</script></body>
</html>

2.2 -> querySelectorAll

使用方法与上面类似。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box">abc</div><div id="id">def</div><script>var elems = document.querySelectorAll('div');console.log(elems);</script></body>
</html>

3 -> 事件初识

3.1 -> 基本概念

JS要构建动态页面，就需要感知到用户的行为。

用户对于页面的一些操作(点击，选择，修改等)操作都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作。

浏览器就是一个哨兵，在侦查敌情(用户行为)。一旦用户有反应(触发具体动作)，哨兵就会点燃烽火台的狼烟(事件)，后方就可以根据狼烟来决定下一步的对敌策略。

3.2 -> 事件三要素

事件源：哪个元素触发的。
事件类型：是点击，选中，还是修改。
事件处理程序：进一步如何处理。往往是一个回调函数。

简单示例

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">One Piece</button><script>var btn = document.getElementById('btn');btn.onclick = function () {alert("王路飞");}</script></body>
</html>

展示结果：

btn按钮就是事件源。
点击就是事件类型。
function这个匿名函数就是事件处理程序。
其中btn.onclick = function()这个操作称为注册事件/绑定事件。

注意：

这个匿名函数相当于一个回调函数，这个函数不需要程序猿主动来调用，而是交给浏览器，由浏览器自动在合适的时机(触发点击操作时)进行调用。

4 -> 操作元素

4.1 -> 获取/修改元素内容

1. innerText

Element.innerText属性表示一个节点及其后代的“渲染”文本内容。

// 读操作

var renderedText = HTMLElement.innerText;

// 写操作

HTMLElement.innerText = string;

不识别html标签。是非标准的(IE发起的)。读取结果不保留html源码中的换行和空格。

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><span>One Piece</span><span>One Piece</span></div><script>var div = document.querySelector('div');// 读取 div 内部内容console.log(div.innerText);// 修改 div 内部内容, 界面上就会同步修改div.innerText = 'hello Luffy <span>hello Luffy</span>';</script></body>
</html>

展示结果：

可以看到，通过innerText无法获取到div内部的html结构，只能得到文本内容。

修改页面的时候也会把span标签当成文本进行设置。

2. innerHTML

Element.innerHTML属性设置或获取HTML语法表示的元素的后代。

// 读操作

var content = element.innerHTML;

// 写操作

element.innerHTML = htmlString;

先获取到事件源的元素。
注册事件

识别html标签。W3C标准的。读取结果保留html源码中的换行和空格。

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><span>One Piece</span><span>One Piece</span></div><script>var div = document.querySelector('div');// 读取页面内容console.log(div.innerHTML);// 修改页面内容div.innerHTML = '<span>hello Luffy</span>'</script></body>
</html>

展示结果：

可以看到innerHTML不光能获取到页面的html结构，同时也能修改结构。并且获取到的内容保留的空格和换行。

innerHTML用的场景比innerText更多。

4.2 -> 获取/修改元素属性

可以通过Element对象的属性来直接修改，就能影响到页面显示效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="img/云云.jpg" alt="这是我家云" title="云宝"><script>var img = document.querySelector('img');console.dir(img);</script></body>
</html>

此时可以看到img这个Element对象中有很多属性。

我们可以在代码中直接通过这些属性来获取属性的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="img/云云.jpg" alt="这是我家云" title="云宝"><script>var img = document.querySelector('img');// console.dir(img);console.log(img.src);console.log(img.title);console.log(img.alt);</script></body>
</html>

还可以直接修改属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="img/云云.jpg" alt="这是我家云" title="云宝"><script>var img = document.querySelector('img');img.onclick = function () {if (img.src.lastIndexOf('云云.jpg') !== -1) {img.src = 'img/前端技术.png';} else {img.src = './云云.jpg';}}</script></body>
</html>

此时点击图片就可以切换图片显示状态(需要提前把两个图片准备好)。

4.3 -> 获取/修改表单元素属性

表单(主要是指input标签)的以下属性都可以通过DOM来修改。

value：input的值。
disabled：禁用。
checked：复选框会使用。
selected：下拉框会使用。
type：input的类型(文本、密码、按钮、文件等)。

代码示例：切换按钮的文本。

假设这是个播放按钮，在"播放" - "暂停"之间切换。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="播放"><script>var btn = document.querySelector('input');btn.onclick = function () {if (btn.value === '播放') {btn.value = '暂停';} else {btn.value = '播放';}}</script></body>
</html>

代码示例：点击计数。

使用一个输入框输入初始值(整数)。每次点击按钮，值+1。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="text" value="0"><input type="button" id="btn" value='点我+1'><script>var text = document.querySelector('#text');var btn = document.querySelector('#btn');btn.onclick = function () {var num = +text.value;console.log(num);num++;text.value = num;}</script></body>
</html>

input具有一个重要的属性value，这个value决定了表单元素的内容。
如果是输入框，value表示输入框的内容，修改这个值会影响到界面显式；在界面上修改这个值也会影响到代码中的属性。
如果是按钮，value表示按钮的内容。可以通过这个来实现按钮中文本的替换。

代码示例：全选/取消全选按钮。

点击全选按钮，则选中所有选项。
只要某个选项取消，则自动取消全选按钮的勾选状态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="checkbox" id="all">One Piece<br><input type="checkbox" class="girl">路飞太郎<br><input type="checkbox" class="girl">索隆十郎<br><input type="checkbox" class="girl">山五郎<br><input type="checkbox" class="girl">海侠甚平<br><script>// 1. 获取到元素var all = document.querySelector('#all');var girls = document.querySelectorAll('.girl');// 2. 给 all 注册点击事件, 选中/取消所有选项all.onclick = function () {for (var i = 0; i < girls.length; i++) {girls[i].checked = all.checked;}}// 3. 给 girl 注册点击事件for (var i = 0; i < girls.length; i++) {girls[i].onclick = function () {// 检测当前是不是所有的 girl 都被选中了. all.checked = checkGirls(girls);}}// 4. 实现 checkGirlsfunction checkGirls(girls) {for (var i = 0; i < girls.length; i++) {if (!girls[i].checked) {// 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)return false;}}// 所有 girl 中都没找到反例, 结果就是全选中return true;}</script></body>
</html>

展示结果：

4.4 -> 获取/修改样式属性

CSS中指定给元素的属性，都可以通过JS来修改。

4.4.1 -> 行内样式操作

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];

"行内样式"，通过style直接在标签上指定的样式。优先级很高。

适用于改的样式少的情况。

代码示例：点击文字则放大字体。

style中的属性都是使用驼峰命名的方式和CSS属性对应的。

例如：font-size => fontSize，background-color => backgroundColor 等。

这种方式修改只影响到特定样式，其他内联样式的值不变。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="font-size: 20px; font-weight: 700;">One Piece</div><script>var div = document.querySelector('div');div.onclick = function () {var curFontSize = parseInt(this.style.fontSize);curFontSize += 10;this.style.fontSize = curFontSize + "px";}</script></body>
</html>

展示结果：

4.4.2 -> 类名样式操作

element.className = [CSS 类名]；

修改元素的CSS类名。适用于要修改的样式很多的情况。

由于class是JS的保留字，所以名字叫做className。

代码示例：开启夜间模式。

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><div class="container light">One Piece <br>One Piece <br>One Piece <br>One Piece <br></div><script src="javascript.js"></script></body>
</html>

style.css

* {margin: 0;padding: 0;
}
html,
body {width: 100%;height: 100%;
}
.container {width: 100%;height: 100%;
}
.light {background-color: #f3f3f3;color: #333;
}
.dark {background-color: #333;color: #f3f3f3;
}

javascript.js

var div = document.querySelector('div');
div.onclick = function () {console.log(div.className);if (div.className.indexOf('light') != -1) {div.className = 'container dark';} else {div.className = 'container light';}
}

展示结果：

点击页面切换到夜间模式(背景变成黑色)。

再次点击恢复日间模式(背景变成白色)。

5 -> 操作节点

5.1 -> 新增节点

分成两个步骤：

创建元素节点。
把元素节点插入到dom树中。

1. 创建元素节点

使用createElement方法来创建一个元素。

var element = document.createElement(tagName[, options]);

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"></div><script>var div = document.createElement('div');div.id = 'mydiv';div.className = 'box';div.innerHTML = 'hehe';console.log(div);</script></body>
</html>

此时发现，虽然创建出新的div了，但是div并没有显示在页面上。这是因为新创建的节点并没有加入到DOM树中。

上面介绍的只是创建元素节点，还可以使用：

createTextNode创建文本节点。
createComment创建注释节点。
createAttribute创建属性节点。

以createElement为主即可。

2. 插入节点到 dom 树中

1) 使用appendChild将节点插入到指定节点的最后一个孩子之后。

element.appendChild(aChild)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"></div><script>var div = document.createElement('div');div.id = 'mydiv';div.className = 'box';div.innerHTML = 'One Piece';var container = document.querySelector('.container');container.appendChild(div);</script></body>
</html>

展示结果：

2) 使用insertBefore将节点插入到指定节点之前。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode被插入节点(newNode)。
parentNode新插入节点的父节点。
newNode用于插入的节点。
referenceNode newNode将要插在这个节点之前。

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾。

注意：

referenceNode引用节点不是可选参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div>路飞太郎</div><div>索隆十郎</div><div>山五郎</div><div>海侠甚平</div></div><script>var newDiv = document.createElement('div');newDiv.innerHTML = '我是新的节点';var container = document.querySelector('.container');console.log(container.children);container.insertBefore(newDiv, container.children[0]);</script></body>
</html>

展示结果：

注意1：如果针对一个节点插入两次，则只有最后一次生效(相当于把元素移动了)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div>路飞太郎</div><div>索隆十郎</div><div>山五郎</div><div>海侠甚平</div></div><script>var newDiv = document.createElement('div');newDiv.innerHTML = '我是新的节点';var container = document.querySelector('.container');console.log(container.children);// 此处的 children 里有 4 个元素container.insertBefore(newDiv, container.children[0]);// 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点, // 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前. container.insertBefore(newDiv, container.children[2]);</script></body>
</html>

展示结果：

注意2：一旦一个节点插入完毕，再针对刚刚的节点对象进行修改，能够同步影响到DOM树中的内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div>路飞太郎</div><div>索隆十郎</div><div>山五郎</div><div>海侠甚平</div></div><script>var newDiv = document.createElement('div');newDiv.innerHTML = '我是新的节点';var container = document.querySelector('.container');console.log(container.children);container.insertBefore(newDiv, container.children[0]);// 插入完毕后再次修改 newDiv 的内容newDiv.innerHTML = '我是新节点2';</script></body>
</html>

展示结果：

5.2 -> 删除节点

使用removeChild删除子节点。

oldChild = element.removeChild(child);

child为待删除节点。
element为child的父节点。
返回值为该被删除节点。
被删除节点只是从dom树被删除了，但是仍然在内存中，可以随时加入到dom树的其他位置。
如果上例中的child节点不是element 节点的子节点，则该方法会抛出异常。

代码示例：猜数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字：<input type="text" id="number"><button type="button" id="button">猜</button><br>已经猜的次数：<span id="count">0</span><br>结果：<span id="result"></span><script>var inputE = document.querySelector("#number");var countE = document.querySelector("#count");var resultE = document.querySelector("#result");var btn = document.querySelector("#button");var resetBtn = document.querySelector("#reset");// 随机生成一个 1-100 的数字var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数var count = 0;// on: 当// click: 点击// 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数btn.onclick = function() {count++;countE.innerText = count;var userGuess = parseInt(inputE.value);if (userGuess == guessNumber) {resultE.innerText = "猜对了";resultE.style = "color: gray;";} else if (userGuess < guessNumber) {resultE.innerText = "猜小了";resultE.style = "color: blue;";} else {resultE.innerText = "猜大了";resultE.style = "color: red;";}};resetBtn.onclick = function() {guessNumber = Math.floor(Math.random() * 100) + 1count = 0;countE.innerText = count;resultE.innerText = "";inputE.value = "";}</script></body>
</html>

展示结果：

感谢各位大佬支持！！！

互三啦！！！

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

目录 1 -> WebAPI背景知识 1.1 -> 什么是WebAPI 1.2 -> 什么是API 1.3 -> 什么是DOM 1.3.1 -> DOM树 2 -> 获取元素 2.1 -> querySelector 2.2 -> querySelectorAll 3 -> 事件初识 3.1 -> 基本概念 3.2 -> 事件三要素 4 -> 操…...

编程日记 2025/7/28 18:36:00

计算机创造的奇迹——C语言

一.简介 C语言是一种较早的程序设计语言，诞生于1972年的贝尔实验室。1972 年，Dennis Ritchie 设计了C语言，它继承了B语言的许多思想，并加入了数据类型的概念及其他特性。尽管C 语言是与 UNIX 操作系统一起被开发出来的&#xff…...

编程日记 2025/7/16 19:24:15

TypeScript - 利用GPT辅助学习

TypeScript 一、基础1. 安装 TypeScript2. 创建你的第一个 TypeScript 文件3. 编译 TypeScript 代码4. 变量声明与类型注解5. 函数与类型注解6. 总结二、进阶常用类型1. 类型别名2. 对象类型3. 类型断言4.typeof 操作符高级类型1. 类2. 交叉类型3. 泛型与 keyof4. 索引签名类…...

编程日记 2025/7/16 19:53:04

Node.js 与 JavaScript 是什么关系

JavaScript 是一种编程语言，而 Node.js 是 JavaScript 的一个运行环境，它们在不同的环境中使用，具有一些共同的语言基础，但也有各自独特的 API 和模块，共同推动着 JavaScript 在前后端开发中的广泛应用。一、基础语言…...

编程日记 2025/7/25 13:44:26

目录引言 1. 返回静态页面 1.1 Spring 默认扫描路径 1.2 RestController 1.2.1 Controller > 返回页面 1.2.2 ResponseBody 2. 返回 HTML 2.1 RequestMapping 2.1.1 produces(修改响应的 Content-Type) 2.1.2 其他属性 3. 返回 JSON 4. 设置状态码 4.1 HttpSer…...

编程日记 2025/7/13 7:44:00

c#实现当捕获异常时自动重启程序

首先，需要说明这并不是一个推荐的做法，只有在你确实有这样的需求时才考虑这么做。以下是AI的回答，为什么不推荐这么做，供参考。在C#中，如果你在catch语句中尝试重启程序自身，可能会遇到以下几个问题&…...

编程日记 2025/7/17 14:21:09

游戏引擎学习第84天

仓库:https://gitee.com/mrxiao_com/2d_game_2 我们正在试图弄清楚如何完成我们的世界构建上周做了一些偏离计划的工作，开发了一个小型的背景位图合成工具，这个工具做得还不错，虽然是临时拼凑的，但验证了背景构建的思路。这个过…...

编程日记 2025/7/27 15:57:10

Python----Python高级（文件操作open，os模块对于文件操作，shutil模块）

一、文件处理 1.1、文件操作的重要性和应用场景 1.1.1、重要性数据持久化： 文件是存储数据的一种非常基本且重要的方式。通过文件，我们可以将程序运行时产生的数据永久保存下来，以便将来使用。跨平台兼容性： 文件是一种通用…...

编程日记 2025/7/26 6:48:34

“AI 大模型内容安全审核软件系统：守护网络世界的卫士

在如今这个信息爆炸的互联网时代，网络上的内容那是五花八门、层出不穷。这时候，咱就得靠 AI 大模型内容安全审核软件系统来给咱把把关了。咱就说社交媒体平台吧，每天都有海量的用户在上面发布文字、图片、视频啥的。要是没有一个靠谱的审核系…...

编程日记 2025/7/6 6:18:05

快速入门Python的异步库：asyncio

目录异步 Python asyncio 1. async 关键字 2. await 关键字 3. asyncio.run() 4. asyncio.sleep() 5. 协程程序执行流程可以被等待的异步协程任务 Futures 任务 asyncio.create_task() await 和任务结果 Reference 异步我们首先先来谈谈异步，…...

编程日记 2025/7/28 1:29:08

大美祖国-使用Java盘点那些在地名中出现最多的汉字

目录前言一、地名数据准备 1、全国地名数据二、使用Java进行汉字统计 1、汉字数据统计 2、汉字分割统计三、浅谈地名汉字名次及其意义 1、山、城、江、河 2、安、平、宁 3、地名中的方位四、总结前言在中国这片古老而又年轻的土地上，地名不仅仅是地…...

编程日记 2025/7/6 14:27:20

华为OD机试E卷 --羊、狼、农夫过河--24年OD统一考试（Java JS Python C C++）

文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述羊、狼、农夫都在岸边，当羊的数量小于狼的数量时，狼会攻击羊，农夫则会损失羊。农夫有一艘容量固定的船，能够承载固定数量的动物。要求求出不损失羊情况…...

编程日记 2025/7/6 14:26:52

Java - WebSocket

一、WebSocket 1.1、WebSocket概念 WebSocket是一种协议，用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接，这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发，并于2…...

编程日记 2025/7/6 14:26:14

JavaWeb开发（十五）实战-生鲜后台管理系统（二）注册、登录、记住密码

1. 生鲜后台管理系统-注册功能 1.1. 注册功能 （1）创建注册RegisterServlet，接收form表单中的参数。 （2）service创建一个userService处理业务逻辑。 （3）RegisterServlet将参数传递给ser…...

编程日记 2025/7/22 22:51:29

【深度学习】利用Java DL4J 训练金融投资组合模型

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s…...

编程日记 2025/7/25 5:23:03

【MySQL篇】事务的认识以及四大特性

何为事务？ 事务（Transaction）是指一组操作的集合，这些操作要么全部执行成功，要么全部不执行。事务通常用于保证数据库的一致性、完整性和可靠性，确保数据的完整性与正确性。有效避免部分执行&#xff0…...

编程日记 2025/7/28 18:32:34

CSS 网络安全字体

适用于 HTML 和 CSS 的最佳 Web 安全字体下面列出了适用于 HTM L和 CSS 的最佳 Web 安全字体： Arial (sans-serif)Verdana (sans-serif)Helvetica (sans-serif)Tahoma (sans-serif)Trebuchet MS (sans-serif)Times New Roman (serif)Georgia (serif)Garamond (se…...

编程日记 2025/7/9 13:46:41

实战演示：利用ChatGPT高效撰写论文

在当今学术界，撰写论文是一项必不可少的技能。然而，许多研究人员和学生在写作过程中常常感到困惑和压力。幸运的是，人工智能的快速发展为我们提供了新的工具，其中ChatGPT便是一个优秀的选择。本文将通过易创AI创作平台&#xff0c…...

编程日记 2025/7/28 18:34:27

显卡（Graphics Processing Unit，GPU）架构详细解读

显卡架构主要分为两大类：GPU 核心架构（也称为图形处理单元架构）和显卡的其他组件（如内存、控制器、输出接口等）。本篇文章将对显卡架构进行详细分析，重点介绍 GPU 核心架构、显卡计算单元、显存结构、显卡管…...

编程日记 2025/7/9 13:46:34

OpenCV相机标定与3D重建(63)校正图像的畸变函数undistort()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述转换图像以补偿镜头畸变。该函数通过变换图像来补偿径向和切向镜头畸变。此函数仅仅是 initUndistortRectifyMap（使用单位矩阵 R…...

编程日记 2025/7/24 2:34:11

人工智能-机器学习之多分类分析（项目实战二-鸢尾花的多分类分析）

Softmax回归听名字，依然好像是做回归任务的算法，但其实它是去做多分类任务的算法。篮球比赛胜负是二分类，足球比赛胜平负就是多分类识别手写数字0和1是二分类，识别手写数字0-9就是多分类 Softmax回归算法是一种用于多分类问题…...

编程日记 2025/7/9 13:46:27

【JDBC】数据库连接的艺术：深入解析数据库连接池、Apache-DBUtils与BasicDAO

文章目录前言🌍 一.连接池❄️1. 传统获取Conntion问题分析❄️2. 数据库连接池❄️3.连接池之C3P0技术🍁3.1关键特性🍁3.2配置选项🍁3.3使用示例 ❄️4. 连接池之Druid技术🍁 4.1主要特性🍁 4.2 配置选项…...

编程日记 2025/7/25 21:47:13

【Envi遥感图像处理】006：影像融合（高光谱+多光谱）的方法

文章目录一、图像融合概述二、加载数据三、图像融合操作四、结果比对五、高光谱与多光谱一、图像融合概述图像融合是指将不同类型传感器的影像进行融合，既能使图向具有较高的空间分辨率，又具有多光谱的特性。二、加载数据三、图像融合操作在ENvi中，图像融合使用的工具…...

编程日记 2025/7/25 0:49:40

C语言内存之旅：从静态到动态的跨越

大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！ 本文目录引言正文一动态内存管理的必要性二动态…...

编程日记 2025/7/14 9:53:14

Git本地搭建

Git本地搭建 （项目突然不给创建仓库了，为了方便管理项目只能自己本地搭建git服务） 为了在本地搭建Git环境并实现基本的Git操作，步骤如下： 安装Git软件 ‌Windows‌：从Git官方网站下载并安装适用于Windows…...

编程日记 2025/7/9 13:46:10

电商|基于java的农业电商系统(源码+数据库+文档)

农业电商系统目录基于java的农业电商系统一、前言二、系统设计三、系统功能设计系统功能实现前台： 后台： 四、数据库设计五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取： 博主介绍：✌️…...

编程日记 2025/7/26 8:36:27

c语言分支和循环

文章目录前言一、分支结构 if语句 switch语句三目运算符二、循环结构 while循环 do-while循环 for循环循环嵌套循环控制语句总结前言分支和循环是C语言中非常重要的控制结…...

编程日记 2025/7/14 10:22:45

大象机器人发布首款穿戴式数据采集器myController S570，助力具身智能数据收集！

myController S570 具有较高的数据采集速度和远程控制能力，大大简化了人形机器人的编程。 myController S570 是一款可移动的轻量级外骨骼，具有 14 个关节、2 个操纵杆和 2 个按钮，它提供高数据采集速度，出色的兼容性&#xff0c…...

编程日记 2025/7/19 21:53:36

【HarmonyOS NEXT】华为分享-碰一碰开发分享

关键词：鸿蒙、碰一碰、systemShare、harmonyShare、Share Kit 华为分享新推出碰一碰分享，支持用户通过手机碰一碰发起跨端分享，可实现传输图片、共享wifi等。我们只需调用系统 api 传入所需参数拉起对应分享卡片模板即可，无需对 U…...

编程日记 2025/7/28 18:28:39

基于python+Django+mysql鲜花水果销售商城网站系统设计与实现

博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育、辅导。所有项目都配有从入门到精通的基础知识视频课程&#xff…...

编程日记 2025/7/9 13:45:45

Linux C\C++方式下的文件I/O编程

【图书推荐】《Linux C与C一线开发实践（第2版）》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践（第2版）（Linux技术丛书）》(朱文伟，李建英)【摘要书评试读】- 京东图书 Lin…...

编程日记 2025/7/22 11:10:16

2025寒假备战蓝桥杯01---朴素二分查找的学习

文章目录 1.暴力方法的引入2.暴力解法的思考与改进3.朴素二分查找的引入4.朴素二分查找的流程5.朴素二分查找的细节6.朴素二分查找的题目 1.暴力方法的引入对于下面的这个有序的数据元素的组合，我们的暴力解法就是挨个进行遍历操作，一直找到和我们的这…...

编程日记 2025/7/9 13:45:35

AI时代：弯道超车的新思维与实践路径

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的…...

编程日记 2025/7/9 13:45:30

HunyuanDiT代码笔记

HunyuanDiT 是由腾讯发布的文生图模型，适配中英双语。在模型方面的改进，主要包括： transformer结构text encoderpositional encoding Improving Training Stability To stabilize training, we present three techniques: We add layer nor…...

编程日记 2025/7/9 13:45:27

C++: Dtrees:load(constg String filepath, const String nodeName)中nodeName参数含义

1. nodeName 的作用当你保存模型时，整个决策树会被序列化到一个 XML 或 YAML 文件中。nodeName 是加载时指定的一个逻辑路径，用于从文件中找到某个节点或子结构，而不是存储在文件中的字段。如果你不指定 nodeName，OpenCV 默认会…...

编程日记 2025/7/11 9:39:57

项目练习：若依后台管理系统-后端服务开发步骤（springboot单节点版本）

文章目录 1、用Maven搭建项目脚手架，父子工程依赖。2、引入SpringBoot Web容器依赖3、引入Mybatisdruid依赖4、实现接口查询数据5、整合logback日志功能 1、用Maven搭建项目脚手架，父子工程依赖。 root模块的pom添加plugin配置 <build><plugins…...

编程日记 2025/7/27 19:37:41

Ubuntu安装docker

snap install docker # version 27.2.0, or apt install podman-docker # version 3.4.4ds1-1ubuntu1.22.04.2 apt install docker.io # version 24.0.7-0ubuntu2~22.04.1 我应该安装哪一个，部署企业级应用? 在部署企业级应用时，选择合适的容器化…...

编程日记 2025/7/27 2:29:35

windows11下 podman-desktop 复制插件文件到 RabbitMQ 容器内，并启用

目的： 刚启用的 RabbitMQ 容器，发现没有rabbitmq_delayed_message_exchange 插件，开始手动安装官网 https://www.rabbitmq.com/community-plugins 或 https://github.com/rabbitmq/rabbitmq-delayed-message-exchange 下载rabbitmq_delay…...

编程日记 2025/7/9 13:45:06

Quickstart C++ with cmake, visualstudio | CPP

本文属于 C 系列文章，下一篇文章见 Quick get started with vcpkg, windows visual studio | CPP 目录 cmake-visualstudio-quickstartDepsConfigureBuild with CLILINKS cmake-visualstudio-quickstart https://github.com/hailiang-wang/cmake-visualstudio-quic…...

编程日记 2025/7/11 11:12:51

惊叹数据结构之美，品味排序算法之妙：对四大排序的详细介绍

大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！ 本文目录正文一、冒泡排序（Bubble Sor…...

编程日记 2025/7/9 13:44:55

机器学习——什么是代价函数？下

“上次课讲了机器学习的模型表示，讲了一个线性模型的例子，那怎样在可能的拟合直线里选择一条最合适的呢？有没有数学的方法让这个直线合适还是不合适变得可以量化呢？这就要说代价函数了。” 本次课前半段内容非常简单，带领我们一起复习初中平面几何的知识，后半段给出了代价…...

编程日记 2025/7/9 13:44:51

Ubuntu本地部署网站

目录 1.介绍 2.安装apache 3.网页升级 1.介绍网站其实就相当于一个文件夹，用域名访问一个网页，就相当于访问了一台电脑的某一个文件夹，在网页中看见的视频，视频和音乐其实就是文件夹里面的文件。为什么网页看起来不像电脑文件夹…...

编程日记 2025/7/20 2:09:05

hydra破解密码

hydra九头蛇是常用的密码破解工具 1、破解centos ssh密码 hydra -l root -P password.txt ssh://192.168.1.107:2222 hydra -l root -P password.txt -s 2222 192.168.1.107 ssh2、破解ftp hydra -l allen -P e:\aa.txt ftp://127.0.0.1 hydra -l allen -P e:\aa.txt ftp:…...

编程日记 2025/7/21 17:33:45

华为OD机试E卷 --字符串变换最小字符串 --24年OD统一考试（Java JS Python C C++）

文章目录题目描述输入描述输出描述用例题目解析JS算法源码java算法源码python算法源码c算法源码c算法源码题目描述给定一个字符串s，最多只能进行一次变换，返回变换后能得到的最小字符串（按照字典序进行比较）。变换规则&#…...

编程日记 2025/7/24 20:51:14

用户中心项目教程（二）---umi3的使用出现的错误

目录 1.情况的说明 2.遇到的问题 1）第一个问题-关于npx的使用 2）第二个问题--unsupport问题 3）第三个收获--nodejs安装问题 4）第四个收获---nvm下载问题 5）第五个问题--尚未解决的问题 3.个人总结 1.情况的说明…...

编程日记 2025/7/9 13:44:11

具身智能新突破！Physical Intelligence推出机器人动作tokenizer，训练提速5倍

具身智能，是人工智能（AI）行业的下一个浪潮。如何有效训练 Transformers 模型来控制具身机器人，是当前亟需要解决的难题，尤其是对于更复杂、需要精确和高频控制的精巧技能，现有的视觉-语言-动作（…...

编程日记 2025/7/24 7:33:07

Unity 学习指南与资料分享

Unity学习资料 Unity学习资料 Unity学习资料 Unity 作为一款强大的跨平台游戏开发引擎，在游戏开发及实时 3D 内容创作领域占据着重要地位。它功能丰富、易于上手，支持多平台发布，为开发者提供了广阔的创作空间。下面为你带来全面的 Unity 学…...

编程日记 2025/7/28 16:56:48

react什么时候用箭头函数，什么时候不需要

最近从vue项目转到react，太久没写了。遇到了一些卡住的问题，记录一下。在 JavaScript 和 React 开发中，箭头函数（Arrow Functions）的使用主要取决于上下文、代码简洁性和特定需求。以下是关于何时使用箭头函数以及何时…...

编程日记 2025/7/25 23:36:55

软考中级复习篇章：数据结构部分的复习

软考中级快速通过篇章：数据结构部分的复习一、引言在软考中级的备考过程中，数据结构是极为重要的一个部分。它不仅是计算机科学的基础，也是软考中考查的重点知识领域。扎实掌握数据结构相关内容，对于顺利通过软考中级考试起着…...

编程日记 2025/7/25 4:34:12

【Vim Masterclass 笔记22】S09L40 + L41：同步练习11：Vim 的配置与 vimrc 文件的相关操作（含点评课内容）

文章目录 S09L40 Exercise 11 - Vim Settings and the Vimrc File1 训练目标2 操作指令2.1. 打开 vimrc-sample 文件2.2. 尝试各种选项与设置2.3. 将更改内容保存到 vimrc-sample 文件2.4. 将文件 vimrc-sample 的内容复制到寄存器2.5. 创建专属 vimrc 文件2.6. 对于 Mac、Linu…...

编程日记 2025/7/26 1:28:49

1 -> WebAPI背景知识

1.1 -> 什么是WebAPI

1.2 -> 什么是API

1.3 -> 什么是DOM

1.3.1 -> DOM树

2 -> 获取元素

2.1 -> querySelector

2.2 -> querySelectorAll

3 -> 事件初识

3.1 -> 基本概念

3.2 -> 事件三要素

4 -> 操作元素

4.1 -> 获取/修改元素内容

4.2 -> 获取/修改元素属性

4.3 -> 获取/修改表单元素属性

4.4 -> 获取/修改样式属性

4.4.1 -> 行内样式操作

4.4.2 -> 类名样式操作

5 -> 操作节点

5.1 -> 新增节点

5.2 -> 删除节点

相关文章：