webAPI -DOM 相关知识点总结（非常细）

title: WebAPI语法
date: 2025-01-28 12:00:00
tags:- 前端
categories:- 前端

WEB API

了解DOM的结构并掌握其基本的操作，体验 DOM 在开发中的作用

API简介

就是使用js来操作html和浏览器

image-20250118230748212

什么是DOM?

就是一个文档对象模型，是用来呈现预计于任意html交互的API.

一句话：是浏览器提供的一套专门来操作网页内容的功能。

  • DOM :开发网页内容特效和实现用户交互。

  • image-20250118230824335

DOM树

将html文档以树状结构直观的呈现出来，我们称之为文档树,DOm树

描述网页内容关系的名词。

作用：文档树直观的体现了标签与标签的关系

image-20250118230838046

DOM对象（重要）

  • 对象：浏览器根据html标签生成的Js对象

  • 所有的标签属性都可以在这个对象上面找到

  • 修改这个对象的属性会自动映射到标签身上。

核心思想：把网页内容当作对象来处理。

Document :是DOM里面提供的一个对象

  • 所以他提供的属性和方法都是用来访问和操作网页内容的

  • 网页内容都在document里面

    获取一个DOM 元素我们使用谁？能直接操作修改吗？

    一般我们用的谁querySelector() 可以直接操作修改

    获取多个DOM 元素我们使用querySelctorAll(),不可以直接进行修改，只能通过遍历的方式一次给里面的元素做修改。

根据CSS选择器来获取DOM元素（重点）

document.querySelctorAll('css选择器')

得到的是一个伪数组

  • 有长度有索引号的数组

  • 但是没有pop(),push()等数组的方法

    想要得到里面的每一个对象，则需要遍历(for)来实现。

那么我应该怎么做呢？

//获取元素
const lis = document,querySelectorAll('.nav li')
//console.log(lis)
for(let i = 0;i<lis.length;i++)
{console.log(lis[i]); //每一个小li对象
}

小括号里面的参数必须是字符串，也就是必须加引号。

其他获取DOM元素的方法

document.getElementById('nav')
//根据id获取一个元素

操作元素内容

目标：能够修改元素的文本更换内容

DOM对象就是根据标签生成的，所以操作标签，本质上就是操作DOM对象

就是操作对象使用的点语法

如果想要修改标签元素的里面的内容，那么可以使用如下的几种方式

  • 对象.innerText属性

    那么具体上是怎么要的呢

    <div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容。对象.innerText 属性
console.log(box.innerText)  //获取文字内容
box.innerText = '我是一个盒子'
</script>

    innerText 属性 显示纯文本，不解析标签

    可以将文本内容添加/更新到任意标签位置

  • 对象.innerHTML属性

<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容。对象.innerText 属性
console.log(box.innerText)  //获取文字内容
box.innerHTML = '<strong>我要更换</strong>'
</script>

一个具体例子

<script>
//线声明一下数组
const personArr = ['周杰伦'，'sw','qd','wdw']
//随机数数组下标
const random = Math.floor(Math.random() * personArr.length)
//获取one 元素
const one = doucument.querySelctor('#one')
</script>

image-20250124231229553

操作元素属性

对象.属性 = 值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./images/1.webp" alt=""><script>// 1. 获取图片元素const img = document.querySelector('img');// 2. 修改图片对象的属性img.src = './images/2.webp';img.title = 'pink老师的艺术照';</script>
</body>
</html>

然后再写一个生成随机照片的程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机图片</title>
</head>
<body><img src="./images/1.webp" alt=""><script>// 获取 N ~ M 的随机整数function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N;}
​// 1. 获取图片对象const img = document.querySelector('img');
​// 2. 随机得到序号const random = getRandom(1, 6);
​// 3. 更换路径img.src = `./images/${random}.webp`;</script>
</body>
</html>

这个得记住，当模版来记忆

操作对象的样式属性

img.src = ./images/${random}.webp; 这里是重点，也是精髓所在

小驼峰命名法（Camel Case）是一种命名约定，通常用于编程中变量、函数、对象等的命名。

特点：

1. 首字母小写：小驼峰命名法的第一个单词以小写字母开头。

2. 后续单词首字母大写：从第二个单词开始，每个单词的首字母大写，其余字母小写。

3.  **不使用分隔符**：单词之间不使用下划线、连字符等，仅通过字母大小写区分单词边界。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改样式</title>
</head>
<body><div class="box"></div><script>// 1. 获取元素const box = document.querySelector('.box');
​// 2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位box.style.width = '300px';box.style.backgroundColor = 'hotpink';box.style.border = '2px solid blue';box.style.borderTop = '2px solid red';</script>
</body>
</html>

注意这个格式

小驼峰形式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通过类名修改样式</title><style>.box {width: 300px;height: 200px;background-color: hotpink;border: 1px solid #000;}</style>
</head>
<body><div></div><script>// 1. 获取元素const div = document.querySelector('div');// 2. 添加类名 class 是个关键字 我们用 classNamediv.className = 'box';</script>
</body>
</html>

如果你想更换的是nav 的话，可以在添加类名也就是第2步鞋

Div.className = 'nav box'

操作元素样式属性

  • 通过classList 操作类控制CSS

  • 为了解决className 容易覆盖以前的类名，我们可以通过classList 方式追加和删除类名

通过classList修改样式

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>classList.add 示例</title><style>.box {width: 100px;height: 100px;background-color: lightgray;}.active {background-color: lightblue;border: 2px solid blue;}</style>
</head>
<body><div class="box">文字</div><script>//获取元素const box = document.querySelector('.box')// 添加类名 activebox.classList.add('active')//删除一个类box.claaList.remove('active')//切换一个类box.classList.togglē('active')</script>
</body>
</html>

image-20250125141938325

轮播图

首先随机数

随机数（记住）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机内容更新</title><style>.slider-wrapper img {width: 300px;height: 200px;}.slider-footer {padding: 10px;text-align: center;}</style>
</head>
<body><div class="slider-wrapper"><img src="placeholder.jpg" alt="随机图片" /></div><div class="slider-footer"><p>占位文字</p></div>
​<script>const sliderData = [{ url: 'image1.jpg', title: '图片一标题', color: '#ffcccc' },{ url: 'image2.jpg', title: '图片二标题', color: '#ccffcc' },{ url: 'image3.jpg', title: '图片三标题', color: '#ccccff' }]
​const random = parseInt(Math.random() * sliderData.length)
​const img = document.querySelector('.slider-wrapper img')img.src = sliderData[random].url
​const p = document.querySelector('.slider-footer p')p.innerHTML = sliderData[random].title
​const footer = document.querySelector('.slider-footer')footer.style.backgroundColor = sliderData[random].color</script>
</body>
</html>

加小点

的具体实现

<div class="slider-wrapper"><img src="placeholder.jpg" alt="图片"><ul class="slider-indicator"><li></li><li></li><li></li></ul>
</div>
.slider-wrapper {position: relative;width: 300px;height: 200px;
}
​
.slider-wrapper img {width: 100%;height: 100%;
}
​
.slider-indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;list-style: none;padding: 0;
}
​
.slider-indicator li {width: 10px;height: 10px;background-color: lightgray;border-radius: 50%;margin: 0 5px;cursor: pointer;
}
​
.slider-indicator li.active {background-color: blue; /* 当前选中小圆点的颜色 */
}
const sliderData = [{ url: 'image1.jpg', title: '图片一标题', color: '#ffcccc' },{ url: 'image2.jpg', title: '图片二标题', color: '#ccffcc' },{ url: 'image3.jpg', title: '图片三标题', color: '#ccccff' }
];
​
// 随机选择一个图片和对应的小圆点
const random = parseInt(Math.random() * sliderData.length);
​
// 更新图片
const img = document.querySelector('.slider-wrapper img');
img.src = sliderData[random].url;
​
// 更新标题
const p = document.querySelector('.slider-footer p');
p.innerHTML = sliderData[random].title;
​
// 更新背景颜色
const footer = document.querySelector('.slider-footer');
footer.style.backgroundColor = sliderData[random].color;
​
// 选中小圆点并添加 active 类
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`);
li.classList.add('active');

image-20250125145247336

操作表单元素属性

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单值操作</title>
</head>
<body><input type="text" value="电脑" id="uname">
​<script>// 1. 获取元素const uname = document.querySelector('input');
​// 2. 获取值// 获取表单里当前的值，用 uname.valueconsole.log(uname.value); // 输出：电脑
​// innerHTML 无法获取表单值console.log(uname.innerHTML); // 输出：undefined 或空字符串
​// 3. 设置表单的值uname.value = '我要买电脑';console.log(uname.value); // 输出：我要买电脑
​// 4. 获取和设置表单类型console.log(uname.type); // 输出：textuname.type = 'password'; // 将表单类型改为密码输入框</script>
</body>
</html>

操作表属性（实现勾选）

自定义属性

image-20250125150806639

这样就会出现5个<div>

自定义属性。在html5中推出来了专门的data-自定义属性

在标签上一律是以data-开头

在DOM对象上一律是以dataset对象方式获取

<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
const one = document.querySelector('div');
console.log(one.dataset.id);  // 输出：1
console.log(one.dataset.spm); // 输出：不知道

image-20250125151431441

定时器

image-20250125151531531

间歇函数

<body><script>第一种方法setInterval(fuction(){console.log('1111')},1000)第二种方法setInterval(fn,3000)关闭定时器fuction fn(){console.log('1111')}let n = setInterval(fn,1000)console.log(n)clearInterval(n)</script>
</body>

image-20250125153036936

实现用户倒计时效果

let i = 1
setInterval(fuction (){
i++
document.write(i)
},200)

image-20250125154225375

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时启用按钮</title><style>.btn {padding: 10px 20px;font-size: 16px;cursor: not-allowed;}.btn:enabled {cursor: pointer;}</style>
</head>
<body><button class="btn" disabled>我已经阅读用户协议(5)</button>
​<script>// 1. 获取元素const btn = document.querySelector('.btn');// console.log(btn.innerHTML); // 按钮的初始内容
​// 2. 倒计时let i = 5; // 倒计时初始值// 2.1 开启定时器let n = setInterval(function () {i--; // 倒计时减少// 更新按钮文字btn.innerHTML = `我已经阅读用户协议(${i})`;// 判断倒计时是否结束if (i === 0) {clearInterval(n); // 关闭定时器// 定时器停止后，按钮可用，文字更新为“同意”btn.disabled = false;btn.innerHTML = '同意';}}, 1000); // 每秒执行一次</script>
</body>
</html>

轮播图定时器版本

论比

事件监听

程序检测是否有事件发生。

image-20250126094443829

关闭广告

image-20250126095013506

日期对象

const date = new

const date =  new Date()
console.log(data)
console.log(date.getFullYear());
const date1 = new Date('')
console.log(date1)
​

image-20250126100117535

image-20250126100343310

时间戳

在 JavaScript 中，时间戳（Timestamp） 是指从 1970 年 1 月 1 日 00:00:00 UTC 开始的毫秒数，用于表示一个具体的时间点。以下是关于时间戳的相关知识和常用方法。

image-20250126100629885

这是获得时间的三种方式

image-20250126100815491

查找DOM节点

在前端开发中，DOM（Document Object Model）节点是 HTML 文档的基础组成部分。DOM 是一种用于表示和操作 HTML 和 XML 文档的编程接口。

什么是 DOM 节点？

• 节点（Node） 是 DOM 树中的基本单元。

• 每个节点代表 HTML 文档中的一部分，比如标签、属性、文本等。

• 整个 HTML 文档被解析后，会被表示为一个由节点组成的树状结构，称为 DOM 树。元素节点 表示 HTML 标签，比如

image-20250126100952344

查找节点

通过 ID 查找

const node = document.getElementById("myID");

通过类名查找：

const nodes = document.getElementsByClassName("myClass");

通过标签名查找：

const nodes = document.getElementsByTagName("div");

使用 querySelector：

const node = document.querySelector(".myClass"); // 选择第一个符合条件的节点
const nodes = document.querySelectorAll(".myClass"); // 选择所有符合条件的节点

父子节点

image-20250126101849007

增加节点

创造节点

const newDiv = document.createElement("div");

添加子节点：

const parent = document.getElementById("parent");
const child = document.createElement("div");
parent.appendChild(child);

在指定位置插入节点

const parent = document.getElementById("parent");
const newNode = document.createElement("p");
const referenceNode = document.getElementById("child");
parent.insertBefore(newNode, referenceNode);

删除节点：

const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child);

修改节点内容

const node = document.getElementById("myID");
node.textContent = "New Content";

修改节点属性

const node = document.getElementById("myID");
node.setAttribute("class", "newClass");

DOM 节点关系

在 DOM 树中，节点之间存在层级关系：

• 父节点（Parent Node）： 使用 parentNode 属性访问。

const parent = childNode.parentNode;

• 子节点（Child Nodes）： 使用 childNodes 属性访问（包括文本节点）。

const children = parentNode.childNodes;

• 第一个子节点/最后一个子节点：

const firstChild = parentNode.firstChild;
const lastChild = parentNode.lastChild;

• 兄弟节点（Sibling Nodes）：

const nextSibling = currentNode.nextSibling; // 下一个节点
const previousSibling = currentNode.previousSibling; // 上一个节点

M端事件

image-20250126102719326

swipper插件

在swipper插件这里

BOM

image-20250126115026862

在前端开发中，BOM（Browser Object Model，浏览器对象模型）是一个用于操作浏览器窗口和浏览器相关功能的接口。BOM 提供了 JavaScript 与浏览器交互的能力，比如控制窗口、导航、获取浏览器信息等。

在前端开发中，BOM（Browser Object Model，浏览器对象模型）是一个用于操作浏览器窗口和浏览器相关功能的接口。BOM 提供了 JavaScript 与浏览器交互的能力，比如控制窗口、导航、获取浏览器信息等。

console.log(window.innerWidth);  // 浏览器窗口的宽度
console.log(window.innerHeight); // 浏览器窗口的高度
window.alert("这是一个弹窗!");  // 显示警告框
window.open("https://www.example.com"); // 打开新窗口

2. navigator 对象

• 提供浏览器和用户设备的信息，比如浏览器的名称、版本、操作系统等。

console.log(navigator.userAgent);      // 用户代理字符串，包含浏览器信息
console.log(navigator.platform);      // 操作系统类型
console.log(navigator.language);      // 当前使用的语言
console.log(navigator.onLine);        // 检测是否联网

3. location 对象

• 提供当前页面的 URL 信息，并可以通过它操作浏览器跳转。

console.log(location.href);           // 当前页面的完整 URL
console.log(location.hostname);       // 主机名
console.log(location.pathname);       // 路径部分
console.log(location.search);         // 查询字符串部分
location.assign("https://www.example.com"); // 跳转到指定 URL
location.reload();                    // 重新加载当前页面

4. history 对象

• 提供对浏览器历史记录的操作能力。

history.back();  // 返回上一页
history.forward(); // 前进到下一页
history.go(-2);   // 跳转到历史记录中的指定位置，负数表示后退

image-20250126121511133

5. screen 对象

• 提供与用户屏幕相关的信息，比如分辨率。

console.log(screen.width);    // 屏幕宽度
console.log(screen.height);   // 屏幕高度
console.log(screen.availWidth);  // 可用宽度（减去任务栏等）
console.log(screen.availHeight); // 可用高度

定时器

image-20250126115922452

JS执行机制

image-20250126120538319

本地存储

在前端开发中，本地存储（Local Storage） 是 HTML5 提供的一种持久化存储方式，用于在浏览器中以键值对的形式保存数据。这些数据保存在用户的浏览器中，即使刷新页面或关闭浏览器后数据仍然存在。

1. 本地存储的特点

• 容量大：一般为 5MB，比传统的 cookie 容量大。

• 持久性：数据会一直保存在浏览器中，直到手动清除。

• 键值对存储：以字符串形式存储键值对。

• 仅在同一域名下共享：同一域名下的页面可以访问相同的本地存储。

(1) 保存数据

使用 localStorage.setItem(key, value) 方法。

localStorage.setItem('username', 'Alice');

• 参数说明：

• key：键名（字符串）。

• value：键值（必须是字符串）。

(2) 读取数据

使用 localStorage.getItem(key) 方法。

const username = localStorage.getItem('username');
console.log(username); // 输出：Alice

(3) 删除某个键值对

使用 localStorage.removeItem(key) 方法。

localStorage.removeItem('username');

(4) 清除所有数据

使用 localStorage.clear() 方法。

localStorage.clear();

(5) 获取所有键

使用 localStorage.key(index) 方法获取指定索引的键名。

for (let i = 0; i < localStorage.length; i++) {console.log(localStorage.key(i)); // 遍历所有键名
}

image-20250126121927544

只能存储字符串

存储复杂数据类型

1. 存储对象

存储方法

将对象通过 JSON.stringify() 转换为字符串后存储：

const user = { name: 'Alice', age: 25, hobbies: ['reading', 'coding'] };
localStorage.setItem('user', JSON.stringify(user)); // 转为字符串存储

读取方法

从本地存储中获取字符串后，用 JSON.parse() 转换回对象：

const userStr = localStorage.getItem('user'); // 获取字符串
if (userStr) {const user = JSON.parse(userStr); // 转为对象console.log(user.name); // 输出：Aliceconsole.log(user.hobbies); // 输出：['reading', 'coding']
}

image-20250126150402187

Map

image-20250126150531766

map也称之为映射

join 把数组转换为字符串

image-20250126150752208

正则表达式

正则表达式（Regular Expression）是用来匹配字符串中字符模式的工具，广泛应用于文本处理，比如验证输入格式、查找替换字符串、数据提取等。

1. 正则表达式的基础

正则表达式由普通字符和元字符（特殊字符）组成，具有灵活且强大的匹配能力。

image-20250126151010922

正则表达式中的一些特殊字符需要通过反斜杠 \ 转义才能匹配本身：

• . 匹配 .，* 匹配 *。

• 如果要匹配反斜杠本身，写成 \。

常见正则表达式作用

  • 表单验证

  • 过滤敏感词

  • 字符串中提取我们想要的部分

    三组词语

    匹配，替换，提取

const regex = /abc/;
const regex = /hello/i;
console.log(regex.test("Hello")); // true

定义-检测是否匹配

image-20250126151652456

image-20250126151808120

元字符（Metacharacters） 是正则表达式中具有特殊含义的字符，用于定义匹配规则，而不是直接匹配它们的字面值。元字符赋予了正则表达式强大的功能，使其可以灵活处理字符串模式匹配。

const regex = /a.b/;
console.log(regex.test("acb")); // true
console.log(regex.test("a_b")); // true
console.log(regex.test("ab"));  // false
const regex1 = /^hello/; // 必须以 "hello" 开头
console.log(regex1.test("hello world")); // true
console.log(regex1.test("world hello")); // false
​
const regex2 = /world$/; // 必须以 "world" 结尾
console.log(regex2.test("hello world")); // true
console.log(regex2.test("world hello")); // false

边界符

const regex1 = /^hello/; // 必须以 "hello" 开头
console.log(regex1.test("hello world")); // true
console.log(regex1.test("world hello")); // false
​
const regex2 = /world$/; // 必须以 "world" 结尾
console.log(regex2.test("hello world")); // true
console.log(regex2.test("world hello")); // false

(4) {}（量词）

• {n}：匹配前面的字符恰好 n 次。

• {n,}：匹配前面的字符至少 n 次。

• {n,m}：匹配前面的字符 n 到 m 次。

const regex1 = /a{2}/; // 匹配两个连续的 "a"
console.log(regex1.test("aa")); // true
console.log(regex1.test("a"));  // false
​
const regex2 = /a{2,}/; // 匹配至少两个连续的 "a"
console.log(regex2.test("aaa")); // true
console.log(regex2.test("a"));   // false
​
const regex3 = /a{2,4}/; // 匹配 2 到 4 个连续的 "a"
console.log(regex3.test("aaa"));  // true
console.log(regex3.test("aaaaa"));// true（只匹配前 4 个 "a"）

image-20250126152358336

const regex1 = /a{2}/; // 匹配两个连续的 "a"
console.log(regex1.test("aa")); // true
console.log(regex1.test("a"));  // false
​
const regex2 = /a{2,}/; // 匹配至少两个连续的 "a"
console.log(regex2.test("aaa")); // true
console.log(regex2.test("a"));   // false
​
const regex3 = /a{2,4}/; // 匹配 2 到 4 个连续的 "a"
console.log(regex3.test("aaa"));  // true
console.log(regex3.test("aaaaa"));// true（只匹配前 4 个 "a"）

3. 特殊的字符类

正则表达式还提供了一些预定义的字符类，可以快速匹配特定类型的字符：

image-20250126152606091

image-20250126152750226

image-20250126152948549

image-20250126152959015

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/69591.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

图论——最小生成树的扩展应用

图论——最小生成树的扩展应用

最小生成树相关原理 acwing1146.新的开始 假设存在一个“超级发电站” 在每一个矿井修发电站相当于从这个“超级发电站”到各个矿井连一条长度为 v [ i ] v[i] v[i]的边。 这样一来这就是一个最短路的模板题。 #include <iostream> #include <cstring> using na…
阅读更多...
K8S中高级存储之PV和PVC

K8S中高级存储之PV和PVC

高级存储 PV和PVC 由于kubernetes支持的存储系统有很多&#xff0c;要求客户全都掌握&#xff0c;显然不现实。为了能够屏蔽底层存储实现的细节&#xff0c;方便用户使用&#xff0c; kubernetes引入PV和PVC两种资源对象。 PV&#xff08;Persistent Volume&#xff09; PV是…
阅读更多...
宝塔面板SSL加密访问设置教程

宝塔面板SSL加密访问设置教程

参考:https://www.bt.cn/bbs/thread-117246-1-1.html 如何快速使用证书加密访问面板 因早期默认未开启https访问所以没有相关的风险提醒&#xff0c;现面板默认已开启https加密访问、提升安全性 由于采用的是服务器内部本身签发证书&#xff0c;不被公网浏览器信任请参考以下步…
阅读更多...
深入探讨数据库索引类型：B-tree、Hash、GIN与GiST的对比与应用

深入探讨数据库索引类型：B-tree、Hash、GIN与GiST的对比与应用

title: 深入探讨数据库索引类型：B-tree、Hash、GIN与GiST的对比与应用 date: 2025/1/26 updated: 2025/1/26 author: cmdragon excerpt: 在现代数据库管理系统中，索引技术是提高查询性能的重要手段。当数据量不断增长时，如何快速、有效地访问这些数据成为了数据库设计的核…
阅读更多...
21.2-工程中添加FreeRTOS(掌握) 用STM32CubeMX添加FreeRTOS

21.2-工程中添加FreeRTOS(掌握) 用STM32CubeMX添加FreeRTOS

这个是全网最详细的STM32项目教学视频。 第一篇在这里: 视频在这里 STM32智能小车V3-STM32入门教程-openmv与STM32循迹小车-stm32f103c8t6-电赛 嵌入式学习 PID控制算法 编码器电机 跟随 **V3:HAL库开发、手把手教学下面功能&#xff1a;PID速度控制、PID循迹、PID跟随、遥控、…
阅读更多...
【越学学糊涂的Linux系统】Linux指令篇（二）

【越学学糊涂的Linux系统】Linux指令篇（二）

一、pwd指令&#xff1a; 00x0:打印该用户当前目录下所属的文件路径 看指令框可以看出我用的是一个叫sw的用户&#xff0c;我们的路径就是在一个home目录下的sw目录下的class113文件路径。 也可以说是指出当前所处的工作目录 补充&#xff1a;&#x1f386;​​​​​​​Wi…
阅读更多...
LangGraph系列-1：用LangGraph构建简单聊天机器人

LangGraph系列-1：用LangGraph构建简单聊天机器人

在快速发展的人工智能和大型语言模型&#xff08;llm&#xff09;世界中&#xff0c;开发人员不断寻求创建更灵活、更强大、更直观的人工智能代理的方法。 虽然LangChain已经改变了这个领域的游戏规则&#xff0c;允许创建复杂的链和代理&#xff0c;但对代理运行时的更复杂控制…
阅读更多...
进程池的制作（linux进程间通信，匿名管道... ...）

进程池的制作（linux进程间通信，匿名管道... ...）

目录 一、进程间通信的理解 1.为什么进程间要通信 2.如何进行通信 二、匿名管道 1.管道的理解 2.匿名管道的使用 3.管道的五种特性 4.管道的四种通信情况 5.管道缓冲区容量 三、进程池 1.进程池的理解 2.进程池的制作 四、源码 1.ProcessPool.hpp 2.Task.hpp 3…
阅读更多...
Linux学习笔记——用户管理

Linux学习笔记——用户管理

一、用户管理命令 useradd #用户增加命令 usermod #用户修改命令 passwd #密码修改命令 userdel #用户删除命令 su #用户提权命令 1、useradd命令&#xff08;加用户&#xff09;&#xff1a; 创建并设置用户信息&#xff0c;使用us…
阅读更多...
怎样在PPT中启用演讲者视图功能？

怎样在PPT中启用演讲者视图功能？

怎样在PPT中启用演讲者视图功能&#xff1f; 如果你曾经参加过重要的会议或者演讲&#xff0c;你就会知道&#xff0c;演讲者视图&#xff08;Presenter View&#xff09;对PPT展示至关重要。它不仅能帮助演讲者更好地掌控演讲节奏&#xff0c;还能提供额外的提示和支持&#…
阅读更多...
【Unity3D】实现2D小地图效果

【Unity3D】实现2D小地图效果

目录 一、玩家脚本Player 二、Canvas组件设置 三、小地图相关 四、GameLogicMap脚本修改 基于&#xff1a;【Unity3D】Tilemap俯视角像素游戏案例-CSDN博客 2D玩家添加Dotween移动DOPath效果&#xff0c;移动完成后进行刷新小地图&#xff08;小地图会顺便刷新大地图&…
阅读更多...
四.3 Redis 五大数据类型/结构的详细说明/详细使用（ hash 哈希表数据类型详解和使用）

四.3 Redis 五大数据类型/结构的详细说明/详细使用（ hash 哈希表数据类型详解和使用）

四.3 Redis 五大数据类型/结构的详细说明/详细使用&#xff08; hash 哈希表数据类型详解和使用&#xff09; 文章目录 四.3 Redis 五大数据类型/结构的详细说明/详细使用&#xff08; hash 哈希表数据类型详解和使用&#xff09;2.hash 哈希表常用指令(详细讲解说明)2.1 hset …
阅读更多...
C#通过3E帧SLMP/MC协议读写三菱FX5U/Q系列PLC数据案例

C#通过3E帧SLMP/MC协议读写三菱FX5U/Q系列PLC数据案例

C#通过3E帧SLMP/MC协议读写三菱FX5U/Q系列PLC数据案例&#xff0c;仅做数据读写报文测试。附带自己整理的SLMP/MC通讯协议表。 SLMP以太网读写PLC数据20191206/.vs/WindowsFormsApp7/v15/.suo , 73216 SLMP以太网读写PLC数据20191206/SLMP与MC协议3E帧通讯协议表.xlsx , 10382…
阅读更多...
【算法】经典博弈论问题——威佐夫博弈 python

【算法】经典博弈论问题——威佐夫博弈 python

目录 威佐夫博弈(Wythoff Game)【模板】 威佐夫博弈(Wythoff Game) 有两堆石子&#xff0c;数量任意&#xff0c;可以不同&#xff0c;游戏开始由两个人轮流取石子 游戏规定&#xff0c;每次有两种不同的取法 1)在任意的一堆中取走任意多的石子 2)可以在两堆中同时取走相同数量…
阅读更多...
具身智能研究报告

具身智能研究报告

参考&#xff1a; &#xff08;1&#xff09;GTC大会&Figure&#xff1a;“具身智能”奇点已至 &#xff08;2&#xff09;2024中国具身智能创投报告 &#xff08;3&#xff09;2024年具身智能产业发展研究报告 &#xff08;4&#xff09;具身智能行业深度&#xff1a;发展…
阅读更多...
把本地搭建的hexo博客部署到自己的服务器上

把本地搭建的hexo博客部署到自己的服务器上

配置远程服务器的git 安装git 安装依赖工具包 yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel安装编译工具 yum install -y gcc perl-ExtUtils-MakeMaker package下载git&#xff0c;也可以去官网下载了传到服务器上 wget https://www.ke…
阅读更多...
STM32 旋转编码器

STM32 旋转编码器

旋转编码器简介 旋转编码器&#xff1a;用来测量位置、速度或旋转方向的装置&#xff0c;当其旋转轴旋转时&#xff0c;其输出端可以输出与旋转速度和方向对应的方波信号&#xff0c;读取方波信号的频率和相位信息即可得知旋转轴的速度和方向 类型&#xff1a;机械触点式/霍尔传…
阅读更多...
后盾人JS--闭包明明白白

后盾人JS--闭包明明白白

延伸函数环境生命周期 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> <…
阅读更多...
Python爬虫之——Cookie存储器

Python爬虫之——Cookie存储器

目录 专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码总结 专栏导读 &#x1f338; 欢迎来到Python办公自动化专栏—Python处理办公问题&#xff0c;解放您的双手 &#x1f3f3;️‍&#x1f308; 博客主页&#xff1a;请点击——> 一晌小贪欢的博客主页求关注 &…
阅读更多...
MFC开发，给对话框添加垂直滚动条并解决鼠标滚动响应的问题

MFC开发，给对话框添加垂直滚动条并解决鼠标滚动响应的问题

无论在使用QT或者MFC进行界面开发时&#xff0c;都会出现在一个对话框里面存在好多的选项&#xff0c;导致对话框变得非常长或者非常大&#xff0c;就会显现的不美观&#xff0c;在这种情况下通常是添加一个页面的滚动条来解决这个问题&#xff0c;下面我们就来介绍给MFC的对话…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023