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

web五、元素尺寸和位置、节点操作(DOM,查找节点,增加节点,删除节点)、阶段案例

一、元素尺寸与位置

注意:offset家族返回不带单位的数字,而且都是只读

1,元素尺寸(大小)

大小: offsetWidthoffsetHeight

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

返回的是数字不带单位,并且是只读属性

1,元素位置

offsetLeft offsetTop

获取元素距离自已定位父级元素的左、上距离,跟绝对定位类似

如果父级都没有定位则以浏览器文档为准

返回的是数字不带单位,并且是只读属性

<!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>* {margin: 0;padding: 0;}.father {position: relative;width: 300px;height: 300px;padding: 5px;border: 10px solid red;margin: 100px;background-color: pink;}.son {width: 100px;background-color: purple;}</style>
</head><body><div class="father"><div class="son">里面包含一些文字 里面包含一些文字 里面包含一些文字</div></div><div class="box">ji的另一个盒子</div><script>/*** offsetWidth和offsetHeight 获取元素的自身宽高、*包含元素自身设置的 宽高、padding、border返回的是数字不带单位,并且是只读属性*//***  offsetLeft 和 offsetTop 获取元素距离自己定位父级元素的左、上距离,跟绝对定位类似*如果父级都没有定位则以浏览器文档为准,返回的是数字不带单位,并且是只读属性*/const father = document.querySelector('.father')console.log(father.offsetWidth, father.offsetHeight) //329 329//获取father的宽度和高度设置给box的width和height属性const box = document.querySelector('.box')box.style.width = father.offsetWidth + 'px'box.style.height = `${father.offsetHeight}px`console.log(box.style.width, box.style.height) //329px  329px//不生效:offsetWidth和offsetHeight都是只读属性//father.offsetwidth ='5oopx// /获取距离定位父级左上角的距离//如果父级都没有定位,获取到的距离是距离浏览器左上角的const son = document.querySelector('.son')console.log(son.offsetLeft, son.offsetTop) //5 5</script>
</body></html>

节点操作

二、DOM节点

DOM树: DOM 将 HTML 文档以 树状结构 直观的表现出来,我们称之为 DOM 树 或者 节点树
节点(Node) DOM树里每一个点都称之为节点

节点分类:

元素节点 比如 div标签,body、
属性节点: 所有的属性 比如href,class属性
文本节点 :所有的文本,比如标签里面的文字

三、查找节点

利用节点关系查找节点,返回的都是对象

1,父节点查找

子元素.parentNode。 返回最近一级的 父节点 对象,找不到返回为 null
<!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>.pop {display: block;visibility: visible;position: fixed;z-index: 9999;left: 50%;top: 50%;width: 530px;height: 254px;margin-top: -127px;margin-left: -265px;background: url(./images/login.webp) no-repeat;}.close {position: absolute;right: 0;top: 0;width: 40px;height: 40px;}@keyframes slideUp {to {height: 0;}}@keyframes hidden {to {display: none;}}.hide {animation: slideUp .3s linear forwards, hidden .3s .3s forwards;}</style>
</head><body><div class="pop"><a href="javascript:;" class="close"></a></div><script>// 子元素.parentNode。返回最近一级的父节点对象,找不到返回为 nullconst colose = document.querySelector('.close')// 查找父节点colose.addEventListener('click', function() {//找到x的父节点,增加类名隐藏,从而关闭页面colose.parentNode.classList.add('hide')})</script>
</body></html>

2,子节点查找

节点对象(父).children(重点)。得所有子元素节点,返回的是一个伪数组。

3,兄弟关系查找

下一个兄弟

节点对象.nextElementSibling。该属性获取节点的下一个兄弟节点

上一个兄弟

点对象.previousElementSibling。该属性获取节点的上一个兄弟节点

<body><ul><li>第1个li</li><li>第2个li</li><li>第3个li</li><li>第4个li</li><li>第5个li</li></ul><script>// 节点对象.children(重点)。得所有子元素节点,返回的是一个伪数组。const ul = document.querySelector('ul')//通过父级查找所有的子级返回一个伪数组console.log(`通过父级查找所有的子级`, ul.children)// 通过父级查找所有的子级中的某一个console.log(ul.children[2])// console.log(ul.children)//如果数据为空,父级里没有子级,返回空的数组[ ]// 节点对象.nextElementSibling。该属性获取节点的下一个兄弟节点//nextElementSibling下一个兄弟元素console.log(`下一个兄弟元素`, ul.children[2].nextElementSibling) //相当于返回索引是3的兄弟元素// 节点对象.previousElementSibling。该属性获取节点的上一个兄弟节点// previousElementSibling 上一个兄弟元素console.log(`上一个兄弟元素`, ul.children[2].previousElementSibling)</script>
</body>

四、增加节点

1.创建节点

创造一个新的元素节点:document.createElement('标签名')

2.追加节点

要想在界面看到,还得插入到某个父元素中

父元素最后一个子节点之后,插入节点元素:element.append ( )

父元素第一个子元素的之前,插入节点元素:element.prepend( )

<body><ul><li>我是默认的li</li></ul><script>//在ul的子级前面或子级后面添加一个新的iconst ul = document.querySelector('ul')//先创建一个节点(需要添加的节点),写入页面 document.createElementconst newli = document.createElement('li') //空的标签// 在子级的最后添加节点ul.append(newli)// -----------------如果创建新添加的节点就一个,但前后都添加上了,最后一个生效-----------------------------//子级的前面添加节点ul.prepend(newli)</script>
</body>

五、删除节点

element.remove ( )。把对象从它所属的DOM树中删除
 

删除节点和隐藏节点有区别的:

隐藏节点还是存在的,但是删除,则从DOM树中删除

隐藏:(display.none)透明度opacity    隐藏visibility


<body><div class="remove">这是要删除的 div</div><div class="none">这是要隐藏的 div</div><script>const removeEL = document.querySelector('.remove')//删除节点removeEL.remove()// 隐藏节点const noneL = document.querySelector('.none')noneL.style.opacity = 0// 细节: 一个标签一会显示一会隐藏--来回切换的, // 用dispalay:none或透明度opacity或者visibility --性能好</script>
</body>

相关文章:

web五、元素尺寸和位置、节点操作(DOM,查找节点,增加节点,删除节点)、阶段案例

一、元素尺寸与位置 注意&#xff1a;offset家族返回不带单位的数字&#xff0c;而且都是只读的 1&#xff0c;元素尺寸&#xff08;大小&#xff09; 大小&#xff1a; offsetWidth和offsetHeight 获取元素的自身宽高、包含元素自身设置的宽高、padding、border 返回的是…...

Vue前端开发-路由树配置

一个配置路由的文件由导入路由模块、创建路由对象和导出路由对象三个部分组成&#xff0c;在创建路由对象时&#xff0c;需要构建路由数组&#xff0c;路由数组中包括一级、二级和多级路由结构&#xff0c;因此&#xff0c;这种结构的路由配置&#xff0c;又称为路由树配置。 …...

记录一次网关异常

记一次网关异常 网关时不时就会出现下面的异常。关键是不知道什么时候就会报错&#xff0c;并且有时候就算什么都不操作&#xff0c;也会导致这个异常。 ERROR org.springframework.scheduling.support.TaskUtils$LoggingErrorHandler - Unexpected error occurred in schedul…...

级联树结构TreeSelect和上级反查

接口返回结构 前端展示格式 前端组件 <template><div ><el-scrollbar height"70vh"><el-tree :data"deptOptions" :props"{ label: label, children: children }" :expand-on-click-node"false":filter-node-me…...

家政小程序开发,打造便捷家政生活小程序

目前&#xff0c;随着社会人就老龄化和生活压力的加重&#xff0c;家政服务市场的需求正在不断上升&#xff0c;家政市场的规模也正在逐渐扩大&#xff0c;发展前景可观。 在市场快速发展的影响下&#xff0c;越来越多的企业开始进入到市场中&#xff0c;同时家政市场布局也发…...

Redis和MySQL之间如何进行数据同步

原因 为什么要进行Redis和MySQL的数据同步&#xff1f; 性能优化&#xff1a;MySQL是关系型数据库&#xff0c;数据读取和存储相对复杂&#xff1b;Redis是内存数据库&#xff0c;读写速度极快&#xff0c;将热点数据存在Redis&#xff0c;可以大大提高系统的访问速度。 数据…...

Kafka的学习路径规划

目录标题 1. 记&#xff08;记忆力&#xff09;Kafka核心概念Kafka关键配置 2. 懂&#xff08;理解力&#xff09;Kafka工作原理Kafka核心功能Kafka架构设计 3. 网&#xff08;知识网络&#xff09;技术栈整合用例和场景 4. 拓&#xff08;全面拓展&#xff09;学习材料多样化内…...

SpringBoot 框架下基于 MVC 的高校办公室行政事务管理系统:设计开发全解析

2系统开发环境 2.1vue技术 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第…...

【JavaEE】Spring Boot 项目创建

目录 一、idea创建Spring Boot项目1.1 创建过程1.2 依赖下载问题 二、网页创建Spring Boot项目三、目录介绍四、运⾏项⽬&#xff0c;看是否创建成功4.1 请求响应流程分析 五、常见报错5.1 Whitelabel Error Page4.1.1 注解写错&#xff1a;5.1.2 500 ⽆法访问此⽹站 六、状态码…...

java垃圾回收机制介绍

Java垃圾回收机制&#xff08;Garbage Collection, GC&#xff09;是Java编程语言中的一项重要特性&#xff0c;它自动管理内存&#xff0c;释放不再使用的对象 1. 堆&#xff08;Heap&#xff09;&#xff1a; • Java虚拟机&#xff08;JVM&#xff09;中用于存储对象实例的内…...

计算机视觉硬件知识点整理六:工业相机选型

文章目录 前言一、工业数字相机的分类二、相机的主要参数三、工业数字摄像机主要接口类型四、选择工业相机的考量因素六、实例分析 前言 随着科技的不断进步&#xff0c;工业自动化领域正经历着前所未有的变革。作为工业自动化的重要组成部分&#xff0c;工业相机在工业检测、…...

一种多功能调试工具设计方案开源

一种多功能调试工具设计方案开源 设计初衷设计方案具体实现HUB芯片采用沁恒微CH339W。TF卡功能网口功能SPI功能IIC功能JTAG功能下行USB接口 安路FPGA烧录器功能Xilinx FPGA烧录器功能Jlink OB功能串口功能RS232串口RS485和RS422串口自适应接口 CAN功能烧录器功能 目前进度后续计…...

鸿蒙NEXT开发笔记(十九)仿抖音快手App的相对布局

上一节我们利用photoAccessHelper实现了从相册挑选视频的功能&#xff0c;但在短视频APP界面&#xff0c;视频画面上还叠加了若干交互图标&#xff0c;包括但不限于&#xff1a;点赞、收藏、评论、分享等等。那么在某个组件上叠加显示其他组件&#xff0c;就用到了相对布局这个…...

微信小程序px和rpx单位互转方法

js代码如下 Page({data: {width: 0,width2: 0},onLoad: function (options) {let px this.pxToRpx(380)let rpx this.rpxToPx(730.7692307692307) // 检查两个互转是否是相同即可,例如pxToRpx(380)转成730.7692307692307 则rpxToPx(730.7692307692307)如果是380则代表互转没…...

WPF+LibVLC开发播放器-LibVLC在C#中的使用

LibVLC在C#中的使用 安装包Nuget使用控件使用播放器初始化加载视频文件 视频教程&#xff1a; 使用WPFLibVLC快速开发一个播放器 安装包Nuget 安装下面两个包,必须安装两个 一个是相关框架对应的包&#xff0c;Winform就安装LibVLCSharp.Winform;WPF就安装LibVLCSharp.WPF&am…...

【Unity基础】Unity中Transform.forward的详解与应用

在Unity中&#xff0c;Transform.forward 是一个常用属性&#xff0c;它表示物体的“前方”方向&#xff0c;即物体本地坐标系中 Z 轴&#xff08;蓝色轴&#xff09;在世界坐标系中的方向。它动态反映物体的旋转情况&#xff0c;非常适合用于移动、检测、方向控制等场景。 什么…...

01-树莓派基本配置-基础配置配置

树莓派基本配置 文章目录 树莓派基本配置前言硬件准备树莓派刷机串口方式登录树莓派接入网络ssh方式登录树莓派更换国内源xrdp界面登录树莓派远程文件传输FileZilla 前言 树莓派是一款功能强大且价格实惠的小型计算机&#xff0c;非常适合作为学习编程、物联网项目、家庭自动化…...

Milvus×OPPO:如何构建更懂你的大模型助手

01. 背景 AI业务快速增长下传统关系型数据库无法满足需求。 2024年恰逢OPPO品牌20周年&#xff0c;OPPO也宣布正式进入AI手机的时代。超千万用户开始通过例如通话摘要、新小布助手、小布照相馆等搭载在OPPO手机上的应用体验AI能力。 与传统的应用不同的是&#xff0c;在AI驱动的…...

《Python基础》之Pandas库

目录 一、简介 二、Pandas的核心数据结构 1、Series 2、DataFrame 三、数据读取与写入 1、数据读取 2、数据写入 四、数据清洗与处理 1、处理缺失值 2、处理重复值 3、数据转换 五、数据分析与可视化 1、统计描述 2、分组聚合 3、数据可视化 六、高级技巧 1、时…...

LeetCode Hot100 31~40

链表 31. K个一组翻转链表 题目不难理解 主要是怎么写出清晰易懂的代码 可以先分成K组 再排序 class Solution { public:ListNode* reverseKGroup(ListNode* head, int k) {ListNode* dummyHead new ListNode();dummyHead->next head;// 首先查看需要翻转几次int count…...

C语言(分支练习)

1.输⼊你的⾝⾼和体重&#xff0c;测试你的健康状况。 计算bmi的值&#xff0c; bmi &#xff08;体重&#xff08;kg&#xff09;/⾝⾼&#xff08;m&#xff09;的平⽅) 如果bmi ⼩于18.5&#xff0c; 则显⽰“偏瘦&#xff0c;注意加强营 养” 如果bmi 在18.5和23.9之间&a…...

指针(上)

目录 内存和地址 指针变量和地址 取地址&#xff08;&&#xff09; 解引用&#xff08;*&#xff09; 大小 类型 意义 const修饰 修饰变量 修饰指针 指针运算 指针- 整数 指针-指针 指针的关系运算 野指针 概念 成因 避免 assert断言 指针的使用 strl…...

(笔记)vue3使用Element Plus全局引入icons

如果你想要在项目中直接使用 Element Plus 的图标 icons&#xff0c;而不需要在每次使用的时候都要引入&#xff0c;那么你可以参考本文。 1、图标下载 在使用 Element Plus 的图标前&#xff0c;需要先下载图标库。 npm $ npm install element-plus/icons-vue yarn $ ya…...

基于Matlab卡尔曼滤波的GPS/INS集成导航系统研究与实现

随着智能交通和无人驾驶技术的迅猛发展&#xff0c;精确可靠的导航系统已成为提升车辆定位精度与安全性的重要技术。全球定位系统&#xff08;GPS&#xff09;和惯性导航系统&#xff08;INS&#xff09;在导航应用中各具优势&#xff1a;GPS提供全球定位信息&#xff0c;而INS…...

大学阶段matlab期末考试所有一定会考的函数及其基本格式

1.矩阵操作相关函数 zeros函数 基本功能&#xff1a;创建全零矩阵。基本格式&#xff1a;A zeros(m,n)&#xff0c;其中m和n分别表示矩阵的行数和列数&#xff0c;例如创建一个3X4的全零矩阵A&#xff0c;可以写为A zeros(3,4)。 ones函数 基本功能&#xff1a;创建全 1 矩…...

【linux】(23)对象存储服务-MinIo

MinIO 是一个高性能的对象存储服务&#xff0c;兼容 Amazon S3 API。 Docker安装MinIo 前提条件 确保您的系统已经安装了 Docker。如果还没有安装 Docker&#xff0c;可以参考 Docker 官方文档进行安装。 1. 拉取 MinIO Docker 镜像 首先&#xff0c;从 Docker Hub 拉取 Mi…...

Nginx学习-安装以及基本的使用

一、背景 Nginx是一个很强大的高性能Web和反向代理服务&#xff0c;也是一种轻量级的Web服务器&#xff0c;可以作为独立的服务器部署网站&#xff0c;应用非常广泛&#xff0c;特别是现在前后端分离的情况下。而在开发过程中&#xff0c;我们常常需要在window系统下使用Nginx…...

前端:localstorage, session

学习帖子 —总结— 要快速掌握 localStorage 和 sessionStorage 的核心知识&#xff0c;以下是最重要的20%&#xff0c;这将帮助你理解和操作80%的功能&#xff1a; 基本概念&#xff1a; localStorage 和 sessionStorage 是 Web Storage API 的一部分&#xff0c;用于在客户端…...

剖析一下自己的简历第二条

剖析一下自己的简历第二条 背景前置说明可能会被问到的问题 背景 剖析一下自己简历, 增加对一些专业知识的掌握. 我的简历第二条是这样写的: “2. 熟悉JVM、JMM&#xff0c;包括内存模型&#xff0c;垃圾回收机制&#xff0c;了解其基本调优技巧并具备线上调优经验。”. 前置…...

利用Docker一键发布Nginx-Tomcat-MySQL应用集群

Docker简介&#xff0c;可以看上一篇文章&#xff1a; 为什么互联网公司离不开Docker容器化&#xff0c;它到底解决了什么问题&#xff1f;-CSDN博客 Docker体系结构 docker核心就是镜像和容器&#xff1a; 镜像就是应用程序的安装文件&#xff0c;包含了所有需要的资源&…...

九,[极客大挑战 2019]LoveSQL1

进入靶场 随便输输 试试字符 报错了 根据以上4张图知是单引号闭合 还以为这是flag呢&#xff0c;白激动一场&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c;自闭了 有个搞笑的点&#xff0c;其实可以用sqlmap 不过咱不用哈…...

17 go语言(golang) - 错误处理

错误处理 错误处理是编程中用于识别、响应和恢复程序运行时出现的错误和异常情况的过程。其目的是确保程序的鲁棒性&#xff08;一个系统、模型或函数在面对错误输入、工作压力、意外情况或故意攻击时仍能保持稳定性和可靠性的能力&#xff09;&#xff0c;即使在出现错误的情…...

前端跳转路由的时候,清掉缓存

清除路由缓存的方法 ‌使用 $router.push() 方法‌&#xff1a;在跳转路由时&#xff0c;可以通过传递一个包含 replace: true 属性的对象来实现清除路由缓存。例如&#xff1a; this.$router.push({ path: "/new-route", replace: true }); ‌使用 $router.replace…...

CentOS使用chrony服务进行时间同步源设置脚本

CentOS使用chrony服务进行时间同步源设置脚本 #!/bin/bash# Created: 2024-11-26 # Function: Check and Set OS time sync source to 10.0.11.100 # FileName: centos_set_time_source_to_ad.sh # Creator: Anster # Usage: # curl http://webserver-ip/scripts/centos_set…...

AI RPA 影刀基础教程:开启自动化之旅

RPA 是什么 RPA 就是机器人流程自动化&#xff0c;就是将重复的工作交给机器人来执行。只要是标准化的、重复的、有逻辑行的操作&#xff0c;都可以用 RPA 提效 准备 安装并注册影刀 影刀RPA - 影刀官网 安装 Chrome 浏览器 下载链接&#xff1a;Google Chrome 网络浏览器 …...

深入解析Java集合框架:List集合及其实现类的应用与原理

|| 持续分享系列教程&#xff0c;关注一下不迷路 || || B站视频教程&#xff1a;墨轩大楼 || || 知识星球&#xff1a;墨轩编程自习室 || Java集合框架是Java编程语言中一个非常重要的组成部分&#xff0c…...

MySQL需掌握到何种程度?才能胜任工作

大家好&#xff0c;我是袁庭新。星友问&#xff1a;MySQL需要学到什么程度&#xff1f;才能胜任日常的软件开发工作呢&#xff01;以下是一些建议的学习目标和程度&#xff0c;这些目标旨在帮助你在工作中高效地使用MySQL。 数据库的基本概念、MySQL的安装及配置、SQL的概念、S…...

如何使用brew安装phpredis扩展?

如何使用brew安装phpredis扩展&#xff1f; phpredis扩展是一个用于PHP语言的Redis客户端扩展&#xff0c;它提供了一组PHP函数&#xff0c;用于与Redis服务器进行交互。 1、cd到php某一版本的bin下 /usr/local/opt/php8.1/bin 2、下载 phpredis git clone https://githu…...

力扣hot100道【贪心算法后续解题方法心得】(三)

力扣hot100道【贪心算法后续解题方法心得】 十四、贪心算法关键解题思路1、买卖股票的最佳时机2、跳跃游戏3、跳跃游戏 | |4、划分字母区间 十五、动态规划什么是动态规划&#xff1f;关键解题思路和步骤1、打家劫舍2、01背包问题3、完全平方式4、零钱兑换5、单词拆分6、最长递…...

时间同步服务器--Linux中

时间同步服务器 1. 时间同步服务 时间同步:多主机协作工作时&#xff0c;各个主机的时间同步很重要&#xff0c;时间不一致会造成很多重要应用的故障&#xff0c;如:加密协议&#xff0c;日志&#xff0c;集群等&#xff0c;利用NTP(Network Time Protocol )协议使网络中的各…...

银河麒麟V10-SP1设置redis开机自启

前言&#xff1a; redis安装请看&#xff1a;银河麒麟V10-SP1离线安装redis5.0.1_银河麒麟v10 redis5.0-CSDN博客 一、编辑自启文件 vim /etc/systemd/system/redis.service [Unit] DescriptionRedis In-Memory Data Store Afternetwork.target [Service] Typeforking ExecS…...

JVM 之垃圾回收器

一、GC 的分类 1.1 串行 VS 并行 串行回收&#xff1a;指在同一时间段内只允许有一个 CPU 用于执行垃圾回收操作&#xff0c;此时工作线程被暂停&#xff0c;直至垃圾回收结束 在单 CPU 处理器或者较小的应用内存等硬件平台不是特别优越的场合&#xff0c;串行回收器的超过并…...

基于Java Springboot宠物咖微信小程序

一、作品包含 源码数据库全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信开发者工具 数…...

求助——AssertionError: Attribute pipeline is missing from configuration.json.

我在本地运行Sunsimiao大模型的时候遇到了“AssertionError: Attribute pipeline is missing from configuration.json.”的问题。在网上找了很多问题都没有解决&#xff0c;求助一下广大网友。有什么好的解决方法吗&#xff1f; 本地环境如上所示&#xff0c;不知是哪里出…...

LearnOpenGL学习(光照 -- 颜色,基础光照,材质,光照贴图)

光照 glm::vec3 lightColor(0.0f, 1.0f, 0.0f); glm::vec3 toyColor(1.0f, 0.5f, 0.31f); glm::vec3 result lightColor * toyColor; // (0.0f, 0.5f, 0.0f); 说明&#xff1a;当我们把光源的颜色与物体的颜色值相乘&#xff0c;所得到的就是这个物体所反射的颜色。 创建…...

vulnhub靶场【哈利波特】三部曲之Aragog

前言 使用virtual box虚拟机 靶机&#xff1a;Aragog : 192.168.1.101 攻击&#xff1a;kali : 192.168.1.16 主机发现 使用arp-scan -l扫描&#xff0c;在同一虚拟网卡下 信息收集 使用nmap扫描 发现22端口SSH服务&#xff0c;openssh 80端口HTTP服务&#xff0c;Apach…...

【开发语言】层次状态机(HSM)介绍

层次状态机&#xff08;Hierarchical State Machine, HSM&#xff09;&#xff0c;从基本原理、结构设计、实现方法以及如何结合 Qt 进行具体实现等方面进行分析。 1. 层次状态机的基本原理 层次状态机是一种用于管理复杂系统行为的状态机模型&#xff0c;它通过将状态组织成…...

Midjourney Imagine API 申请及使用

Midjourney Imagine API 申请及使用 Midjourney 是一款非常强大的 AI 绘图工具&#xff0c;只要输入关键字&#xff0c;就能在短短一两分钟生成十分精美的图像。Midjourney 以其出色的绘图能力在业界独树一帜&#xff0c;如今&#xff0c;Midjourney 早已在各个行业和领域广泛…...

Function Arguments and Function Parameters (函数的实参和函数的形参)

Function Arguments and Function Parameters {函数的实参和函数的形参} 1. Object-Oriented Programming Using C2. Function Arguments and Function ParametersReferences 1. Object-Oriented Programming Using C https://icarus.cs.weber.edu/~dab/cs1410/textbook/index…...

【C语言】递归的内存占用过程

递归 递归是函数调用自身的一种编程技术。在C语言中&#xff0c;递归的实现会占用内存栈&#xff08;Call Stack&#xff09;&#xff0c;每次递归调用都会在栈上分配一个新的 “栈帧&#xff08;Stack Frame&#xff09;”&#xff0c;用于存储本次调用的函数局部变量、返回地…...