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

JavaScript—DOM（文档对象模型）

news 2025/7/13 23:14:59

目录

DOM是什么？

DOM有什么作用？

一、事件

理解事件

事件怎么写（要做什么就写什么）？

实战演练

1、页面加载完毕以后，打印一句话

2、如果有一个a标签，并给其添加一个点击事件

3、事件默认处理程序

二、对节点进行增删改查

节点是有类型（文件节点，元素节点，属性节点）

为节点添加事件的方法

如何获得节点？

1、获取元素的方法：

2、获取节点的属性与子节点

属性（如果是元素节点，那么它可以有子节点）

①、创建属性节点

②、修改节点

响应式编程

③、添加节点

第一步、创建节点

第二步、追加节点

④、删除节点

实战

由json对象创建一个table表格

无刷新评论

内嵌样式与生成的dom节点

理解DOM

<html><head><title></title></head><body><p>今天天气<span style="color:red;font-size:30px">很好</span>，昨天很冷……</p></body>
</html>

只要换行了，就是空文本节点

DOM是什么？

文档对象模型

DOM有什么作用？

每个元素是一个对象，对象就是一个节点

通过DOM可以访问JavaScript HTML文档的所有元素，为这些对象动态的添加事件

一、事件

理解事件

节点就是对象

onload事件(Form1_Load)

页面的DOM结构加载完毕后会触发这个事件

事件怎么写（要做什么就写什么）？

  • C#事件就是一个委托变量（事件的编程概念）
  • JavaScript就是方法（给某个标签添加事件就自动触发相应的方法，比方说页面完成加载、input字段改变时、按钮被点击，事件被触发都可以执行一些代码）

描述性概念

浏览器的底层也会有很多出发函数的机制

If(onload != null){ onload();
}如果鼠标点击一个div
if(div.onclick !=null) {div.onclick();
}

实战演练

1、页面加载完毕以后，打印一句话

<html><head><title></title><style type="text/css">			</style><script type="text/javascript">onload = function(){alert("Hello World,页面终于加载完毕了……");};var foo = function(){alert("我是一个函数");};</script></head><body>邓礼梅<input type="button" value="点击" onclick="foo()"/></body>
</html>

2、如果有一个a标签，并给其添加一个点击事件

你的事件没有返回值或返回true那么a标签会直接跳转

否则就会停止执行默认操作

在发现点击a标签的时候，浏览器内部会执行

if(a.onlick != null ) {Var res = a.onclick;If(res === false) {break;  //默认的正常跳转就不做了}
}
<html><head><title></title><style type="text/css">			</style><script type="text/javascript">var foo = function(){alert("准备跳转");return false;   //如果a标签写了return这里不写的话，程序不执行};</script></head><body><a href="https://www.baidu.com/" onclick="return foo();">点击</a>  //return 点击事件的返回值，链接不跳转</body>
</html>

如果事件处理函数，返回了false表示这个事件默认不跳转

3、事件默认处理程序

<html><head><title></title><style type="text/css">			</style><script type="text/javascript"></script></head><body><form><input type="text" value="123" /><br /><input type="text"  /><br /><input type="text"  /><br /><input type="text"  /><br /><input type="text"  /><br /><input type="text"  /><br /><input type="text"  /><br /><input type="text"  /><br /><input type="reset" onclick="return confirm('您确定要重新输入么');" /><br /></form></body>
</html>

confirm：弹出提示选择框

二、对节点进行增删改查

节点是有类型（文件节点，元素节点，属性节点）

标准DOM定义中有12种：元素节点 1 （标签节点，有子节点）

文本节点 3 （没有子节点）

属性节点 2 （没有子节点）

获得方式

<node>.nodeType

为节点添加事件的方法

<node>.onclick = function( ) { }；

有什么不同？

  • 原来：在标签中定义onclick事件
  • 现在：在script代码块中通过document对象的方法获取标签id，去执行相应的事件

如何获得节点？

1、获取元素的方法：

document.get……

  • 节点对象document.getElementById（“id的字符串”）：获得页面中指定id的节点对象
  • 节点集合document.getElementsByTagName（"标签名"）：获得页面中所有标签名符合要求的标签
  • 节点集合父节点.getElementsByTagName（"标签名"）：获得指定父节点下的所有名字符合要求的节点
<html><head><title></title><style type="text/css">			</style><script type="text/javascript">onload = function(){//页面加载完成后，才会有节点对象可以被访问到//document.getElementById:返回一个指定id属性值为btn的对象var btn = document.getElementById("btn");btn.onclick=function(){//事件本身alert("点击了");};};</script></head><body><input type="button" value="点击" id="btn"/></body>
</html>

点击事件批处理

<html><head><title></title><style type="text/css">			</style><script type="text/javascript">onload = function(){var dv = document.getElementById("dv");var links=dv.getElementsByTagName("a");for(var i = 0; i<links.length;i++){links[i].onclick = function(){return false;};};};</script></head><body><div id ="dv"><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /></div><hr /><div><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /></div></body>
</html>

2、获取节点的属性与子节点

属性（如果是元素节点，那么它可以有子节点）

  • <node>.childNodes 获得节点下的所有子节点
  • <node>.firstChild <node>.childNodes[0]
  • <node>.lastChild <node>.childNodes[<node>].childNodes.length-1]

Nodes[i].nodeName 获取第i个节点的名字

<html><head><title></title><style type="text/css">			</style><script type="text/javascript">onload = function(){//先要获得dv元素var dv = document.getElementById("dv");//获得下面的所有a标签//dv.childNodesvar nodes = dv.childNodes;var _ = 0;};</script></head><body><div id ="dv"><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /><a href="https://www.baidu.com/">传智播客</a><br /></div>		</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css"></style><script type="text/javascript">onload = function(){			var dv = document.getElementById("dv");var nodes = dv.childNodes;//获取下标为1的标签类型及标签名alert(nodes[1].nodeType +"," +nodes[1].nodeName);  };</script></head><body><div id="dv"><input type="button" value="点击" id="btn" /></div></body>
</html>

①、创建属性节点

document.createAttribute(name)

创建一个名叫align，值为center的属性节点
Var attr = document.createAttribute("align")
Attr.value= "center";

②、修改节点

所谓的修改节点就是修改节点的属性与包含的文本

获得节点

修改属性的标准方法（DOM-Core）

  • <node>.setAttribute("属性名"，"值")； //设置属性值
  • 文本<node>.getAttribute("属性名")； //读取属性值

DOM-html

<node>.属性名 = 值；

var v =<node>.属性名；

<节点>.style.成员=……

<html><head><title></title><style type="text/css">			</style><script type="text/javascript">onload = function(){				            //窗体加载var btn = document.getElementById("btn");   //获取按钮节点对象btn.onclick=function(){                     //给按钮添加点击事件var txtNode = document.getElementById("txt");   //获取文本域的节点对象var txt =txtNode.value;                         //获取节点对象的属性值var p = document.getElementById("p");           //获取p标签的节点对象p.setAttribute("style",txt);                    //给p节点对象设置属性值};};</script></head><body><p id = "p">这是一个测试文本</p>                                //文本标签，有一个名叫p的id<textarea id="txt" style="width:400px;height:300px;"></textarea> //文本域<br /><input type="button" value="点击" id="btn" />    //按钮</body>
</html>

Style="width:80%;" //跟随浏览器的大小变化大小

响应式编程

③、添加节点

第一步、创建节点

元素节点：var node = document.createElement("标签名");

文本节点：var textNode = document.createTextNode("文本");

<节点>.innerHTML="文本"; //这里可以使用html

<节点>.innerText="文本"; //非标准。少用innerHTML。专门针对复杂的标签结构

属性节点：<节点>.setAttribute(……,……);

标准方法，符合xml规范，可以添加任意的属性

<a href="……" jk="jk">测试</a>

aNode.jk ="jk"; //部分浏览器是可以的

第二步、追加节点

追加到尾部：父节点.appendChild（子节点）；

插入到中间（插入到某一个元素的前面）：父节点.insertBefore(新元素，旧元素);

插入元素节点
<html><head><title></title><style type="text/css">			</style><script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script><script type="text/javascript" scr>onload = function(){//获取两个元素var ul=J("ul");   var li=J("li");//创建li标签var newLi= document.createElement("li");//在li中添加文本newLi.innerHTML="添加的测试点";//插入ul.insertBefore(newLi,li)};</script></head><body><ul id="ul"><li>测试1</li><li id="li">测试2</li><li>测试3</li></ul></body>
</html>

实战：

元素节点：var node = document.createElement("标签名");

<html><head><title></title><style type="text/css">			</style><script type="text/javascript">var J = function(id){return document.getElementById(id);   //获取所有id节点对象};onload =function(){            //窗体加载事件var btn =J("btn");         //获取元素btn.onclick =function(){  //按钮加载事件var dv=J("dv");//创建标签var img = document.createElement("img");//追加标签img.src="C:\Users\denglimei\Desktop\1.jpg";//追加标签dv.appendChild(img);//创建一个换行var br = document.createElement("br");//追加标签dv.appendChild(br);};};</script></head><body><input type="button" value="点击添加" id="btn" /><div id="dv"></div></body>
</html>

文本节点：var textNode = document.createTextNode("文本");

<节点>.innerHTML="文本"; //这里可以使用html

<节点>.innerText="文本"; //非标准。少用innerHTML。专门针对复杂的标签结构

	<html><head><title></title><style type="text/css">			</style><script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script><script type="text/javascript">onload = function(){var bd=J("bd");    //获取body节点对象<!-- //第一种方法 --><!-- //创建p标签 --><!-- var p = document.createElement("p"); --><!-- //在p中添加文本 --><!-- p.innerHTML='今天天气<span style="color:red">真好</span>呀'; --><!-- //追加节点 --><!-- bd.appendChild(p); -->//第二种方法:利用创建节点的做法//创建标签pvar p = document.createElement("p");//创建第一个文本节点var txt1=document.createTextNode("今天天气");//创建第二个标签节点var span = document.createElement("span");//设置标签的样式span.style.color="red";//创建span里面的文本var txt2=document.createTextNode("很好");//将文本追加到span中span.appendChild(txt2);//创建最后一个文本标签var txt3=document.createTextNode(",我很热……");//追加到p中p.appendChild(txt1);p.appendChild(span);p.appendChild(txt3);bd.appendChild(p);};//应该选择哪种？//如果比较少选择上面//如果是大面积拼接选择下面的</script></head><body id="bd"></body></html>

属性节点：<节点>.setAttribute(……,……);

标准方法，符合xml规范，可以添加任意的属性

<a href="……" jk="jk">测试</a>

aNode.jk ="jk"; //部分浏览器是可以的

④、删除节点

父节点.removeChild(子节点);

<html><head><title></title><style type="text/css">			</style><script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script><script type="text/javascript" scr>onload = function(){var body=J("body");var p=J("p");//第一种方法body.removeChild(p);   //父节点.//第二种方法：现在大多这样使用p.style.display="none";};</script></head><body id="body"><p>1111111111</p><p id="p">22222222222</p><p>33333333333</p></body>
</html>

第二种方法不是把它删除掉了，而是把p标签隐藏起来了

onmouseover：鼠标触及动态js-

实战

由json对象创建一个table表格

json格式的对象应该是什么样子：{name:"",age:"",sex:""}

<!DOCTYPE html>
<html> <head><title></title><style type="text/css"></style><script type="text/javascript" src="J.js"></script><script type="text/javascript">// json格式的字符串var str = '[{name:"赵晓虎",sex:"男",age:19},{name:"牛亮亮",sex:"男",age:29},{name:"杨中科",sex:"男",age:39}]';onload = function() {// 生成一个table，然后追加到body中// 一开始就需要生成一个table// 里面遍历json对象生成里面的tr// 每一个json对象中的每一个成员(for-in)得到td标签// 1、生成tablevar table = document.createElement("table");table.border = "1";// 2、得到json格式的对象var jsons = new Function("return " + str)();// 3、循环这个数组for(var i = 0; i < jsons.length; i++) {// 4、生成每一个行// 创建tr标签var tr = document.createElement("tr");// 5、添加td，就需要遍历每一个对象中的成员for(var k in jsons[i]) {// 6、创建tdvar td = document.createElement("td");td.appendChild(document.createTextNode(jsons[i][k]));// 7、追加tdtr.appendChild(td);}// 循环结束，就得到一个行// 将行追加到tabletable.appendChild(tr);}// 将table加到body中document.getElementsByTagName("body")[0].appendChild(table);var _ = 0;};</script></head><body></body>
</html>

无刷新评论

<html><head><title></title><style type="text/css">			#txt{width:400px;height:100px;}#dv{border:1px solid pink;}</style><script type="text/javascript" src="J.js"></script><script type="text/javascript">onload = function(){var btn = J("btn");          //获取按钮对象btn.onclick=function(){var txt=J("txt").value;  //获取用户输入var p = document.createElement("p");   //创建p标签<!-- p.innerHTML=txt; -->p.appendChild(document.createTextNode(txt));   //创建文本节点并传值，并将文本追加到p中//追加或插入//方法一、var ps =J("dv").getElementsByTagName("p");   //获得dv对象中所有标签名符合要求的标签if(ps.length >0) {//插入J("dv").insertBefore(p,ps[0]);  //插入标签}else{//追加J("dv").appendChild(p);}//方法二、var ps =J("dv").getElementsByTagName("p");new Function("p","ps",'J("dv").' + (ps[0] ? "insertBefore(p,ps[0])" : "appendChild(p)"))(p,ps);};};</script></head><body><textarea id="txt"></textarea><br /><input type="button" value="评论" id="btn"/><br /><div id ="dv"></div></body>
</html>

内嵌样式与生成的dom节点

body里面没有div，script进行创建设置

<html><head><title></title><style type="text/css">			#dv{width:300px;height:100px;border:1px solid red;background-color:pink;}</style><script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script><script type="text/javascript" scr>onload = function(){//创建div标签var dv = document.createElement("div");   dv.id="dv";document.getElementsByTagName("body")[0].appendChild(dv);};</script></head><body>	</body>
</html>

相关文章：

JavaScript—DOM（文档对象模型）

目录 DOM是什么&#xff1f; DOM有什么作用&#xff1f; 一、事件 理解事件 事件怎么写&#xff08;要做什么就写什么&#xff09;&#xff1f; 实战演练 1、页面加载完毕以后&#xff0c;打印一句话 2、如果有一个a标签&#xff0c;并给其添加一个点击事件 3、事件默…...

编程日记 2023/9/1 0:37:11

mysql Index

创建索引 方法1 create table 表( col1 int, col2 int, … index | key index_name (列名) 方法2 alter table 表名 ADD index alter table student_table add index index_name(stu_id); 方法3 create index index_name on 表名(列) 删除索引 方式1 alter table xx drop prima…...

编程日记 2023/9/1 0:36:10

​八路参考文献：［八一新书］许少辉．乡村振兴战略下传统村落文化旅游设计［Ｍ］北京：中国建筑出版传媒，２０２２．

​八路参考文献&#xff1a;&#xff3b;八一新书&#xff3d;许少辉&#xff0e;乡村振兴战略下传统村落文化旅游设计&#xff3b;&#xff2d;&#xff3d;北京&#xff1a;中国建筑出版传媒&#xff0c;&#xff12;&#xff10;&#xff12;&#xff12;&#xff0e;...

编程日记 2023/9/1 0:35:10

Leetcode Top 100 Liked Questions（序号75~104）

75. Sort Colors 题意&#xff1a;红白蓝的颜色排序&#xff0c;使得相同的颜色放在一起&#xff0c;不要用排序 我的思路 哈希 代码 Runtime 4 ms Beats 28.23% Memory 8.3 MB Beats 9.95% class Solution { public:void sortColors(vector<int>& nums) {vector…...

编程日记 2023/9/1 0:34:08

Shell编程之流程控制

目录 if判断 case语句 for循环 while循环 if判断 语法&#xff1a; if [ 条件判断表达式 ] then 程序 elif [ 条件判断表达式 ] then 程序 else 程序 fi 注意&#xff1a; [ 条件判断表达式 ]&#xff0c;中括号和条件判断表达式之间必须有空格。if&#xff0c;elif…...

编程日记 2023/9/1 0:33:06

什么是Python爬虫分布式架构，可能遇到哪些问题，如何解决

目录 什么是Python爬虫分布式架构 1. 调度中心&#xff08;Scheduler&#xff09;&#xff1a; 2. 爬虫节点&#xff08;Crawler Node&#xff09;&#xff1a; 3. 数据存储&#xff08;Data Storage&#xff09;&#xff1a; 4. 反爬虫处理&#xff08;Anti-Scraping&…...

编程日记 2023/9/1 0:32:05

QT下使用ffmpeg+SDL实现音视频播放器，支持录像截图功能，提供源码分享与下载

前言&#xff1a; SDL是音视频播放和渲染的一个开源库&#xff0c;主要利用它进行视频渲染和音频播放。 SDL库下载路径&#xff1a;https://github.com/libsdl-org/SDL/releases/tag/release-2.26.3&#xff0c;我使用的是2.26.3版本&#xff0c;大家可以自行选择该版本或其他版…...

编程日记 2023/9/1 0:31:04

Microsoft Excel整合Python：数据分析的新纪元

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/9/1 0:30:03

【前端代码规范】

前端代码规范 vue3版本:【Vue&React】版本TS版本&#xff1a;【TS&JS】版本vite版本&#xff1a;【Webpack&Vite】版本Eslint版本:命名规则:【见名识意】项目命名&#xff1a;目录命名&#xff1a;JS/VUE文件CSS/SCSS文件命名&#xff1a;HTML文件命名&#xff1a;…...

编程日记 2023/9/1 0:28:59

postgresql-日期函数

postgresql-日期函数 日期时间函数计算时间间隔获取时间中的信息截断日期/时间创建日期/时间获取系统时间CURRENT_DATE当前事务开始时间 时区转换 日期时间函数 PostgreSQL 提供了以下日期和时间运算的算术运算符。 计算时间间隔 age(timestamp, timestamp)函数用于计算两…...

编程日记 2023/9/1 0:27:58

Android11去掉Setings里的投射菜单条目

Android11去掉【设置】--【已连接的设备】--【连接偏好设置】里的投射菜单条目&#xff0c;具体如下&#xff1a; commit 0c0583e6ddcdea21ec02db291d9a07d90f10aa59 Author: wzh <wzhincartech.com> Date: Wed Jul 21 16:37:13 2021 0800去掉投射菜单Change-Id: Id7f…...

编程日记 2023/9/1 0:26:55

fnm（Node.js 版本管理器）

fnm是什么&#xff1f; fnm是一款快速简单跨平台的 Node.js 版本管理器&#xff0c;使用 Rust 构建。 fnm怎么使用&#xff1f; 查看node 已安装列表 fnm list node 版本切换 fnm use 版本号 fnm use 16.0.0...

编程日记 2023/9/1 0:25:53

Apipost：为什么是开发者首选的API调试工具

文章目录 前言正文接口调试接口公共参数、环境全局参数的使用快速生成并导出接口文档研发协作接口压测和自动化测试结论 前言 Apipost是一款支持 RESTful API、SOAP API、GraphQL API等多种API类型&#xff0c;支持 HTTPS、WebSocket、gRPC多种通信协议的API调试工具。除此之外…...

编程日记 2023/9/1 0:24:52

Echarts图表坐标轴文字太长，省略显示，鼠标放上显示全部（vue）

注意&#xff1a;记得加上这个&#xff0c;触发事件&#xff0c; triggerEvent: true,重点&#xff1a;下面就是处理函数&#xff0c;在实例化图表的时候使用&#xff0c;传入参数是echarts的实例 // 渲染echartsfirstBarChart() {const that thislet columnar echarts.init…...

编程日记 2023/9/1 0:23:51

C语言控制语句——跳转关键字

循环和switch专属的跳转&#xff1a;break循环专属的跳转&#xff1a;continue无条件跳转&#xff1a;goto break 循环的break说明 某一条件满足时&#xff0c;不再执行循环体中后续重复的代码&#xff0c;并退出循环 需求&#xff1a;一共吃5碗饭, 吃到第3碗吃饱了, 结束吃饭…...

编程日记 2023/9/1 0:22:50

C#，《小白学程序》第五课：队列（Queue）

日常生活中常见的排队&#xff0c;软件怎么体现呢&#xff1f; 排队的基本原则是&#xff1a;先到先得&#xff0c;先到先吃&#xff0c;先进先出 1 文本格式 /// <summary> /// 《小白学程序》第五课&#xff1a;队列&#xff08;Queue&#xff09; /// 日常生活中常见…...

编程日记 2023/9/1 0:21:49

【【萌新的STM32学习25--- USART寄存器的介绍】】

萌新的STM32学习25- USART寄存器的介绍 STM32–USART寄存器介绍&#xff08;F1&#xff09; 控制寄存器1 &#xff08;CR1&#xff09; 位13&#xff1a; 使能USART UE 0&#xff1a; USART分频器和输出被禁止 1&#xff1a; USART模块使能 位12 &#xff1a; 配置8个数据位…...

编程日记 2023/9/1 0:20:48

SpringBootWeb案例 Part 5

4. 配置文件 员工管理的增删改查功能我们已开发完成&#xff0c;但在我们所开发的程序中还一些小问题&#xff0c;下面我们就来分析一下当前案例中存在的问题以及如何优化解决。 4.1 参数配置化 在我们之前编写的程序中进行文件上传时&#xff0c;需要调用AliOSSUtils工具类&…...

编程日记 2023/9/1 0:19:46

【ES6】Promise.race的用法

Promise.race()方法同样是将多个 Promise 实例&#xff0c;包装成一个新的 Promise 实例。 const p Promise.race([p1, p2, p3]);上面代码中&#xff0c;只要p1、p2、p3之中有一个实例率先改变状态&#xff0c;p的状态就跟着改变。那个率先改变的 Promise 实例的返回值&#…...

编程日记 2023/9/1 0:18:45

PMP - 敏捷 3355

三个核心 产品负责人 负责最大化投资回报&#xff08;ROI&#xff09;&#xff0c;通过确定产品特性&#xff0c;把他们翻译成一个有优先级的列表 为下一个 sprint 决定在这个列表中哪些应该优先级最高&#xff0c;并且不断调整优先级以及调整这个列表 职责是定义需求、定义…...

编程日记 2023/9/1 0:17:43

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/7/13 9:04:17

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/7/13 4:26:51

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/7/10 10:50:33

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/7/8 18:56:27

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/11 1:50:50

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/7/12 4:16:16

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/7/9 20:37:28

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/7/13 10:14:36

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01