JavaScript的BOM、DOM编程

参考笔记：JavaWeb 速通DOM_java dom-CSDN博客

目录

1.JS的组成部分

2.BOM编程 

2.1 基本介绍

2.2 BOM的构成

2.3 图解BOM编程 

2.4 windows对象的常见属性

2.5 windows对象的常见方法

2.6 BOM编程的简单示例

2.6.1 三种弹窗方式

​2.6.2 页面跳转

2.6.3 实现会话级存储和持久级数据存储（重要）

3.DOM编程

3.1 基本介绍

3.2 常见方法表

3.2.1 查找HTML元素

3.2.2 改变HTML元素

3.2.3 添加和删除元素

3.2.4 元素添加事件模板

3.3 案例演示

3.3.1 弹出窗口实例

3.3.2 多选框实例

3.3.3 图片切换案例

3.3.4 动态增加图片案例

3.4 DOM节点

3.4.1 常用属性和案例

3.5 DOM编程总结

1.JS的组成部分

2.BOM编程 

2.1 基本介绍

① BOM 是 Browser Object Model 的简写，即浏览器对象模型，把浏览器当作一个对象来看待

② BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性，BOM 的顶级对象是 window

2.2 BOM的构成

  • BOM编程的对象结构如下

    • window：顶级对象，代表整个浏览器窗口

      • location 对象：window对象的属性之一，代表浏览器的地址栏

      • history 对象：window对象的属性之一，代表浏览器的访问历史

      • screen 对象：window对象的属性之一，代表屏幕

      • navigator 对象：window对象的属性之一，代表浏览器软件本身

      • document 对象（这个是我们后面要讲的DOM编程）：window对象的属性之一，代表浏览器窗口目前解析的 html 文档

      • console 对象：window对象的属性之一，代表浏览器开发者工具的控制台

      • localStorage 对象：window对象的属性之一，代表浏览器的本地数据持久化存储

      • sessionStorage 对象：window对象的属性之一，代表浏览器的本地数据会话级存储

2.3 图解BOM编程 

2.4 windows对象的常见属性

windows 对象的属性非常多，需要用到哪个就去查相关的API即可，不需要记忆

属性描述
closed(点击可跳转至菜鸟编程)返回窗口是否已被关闭
defaultStatus设置或返回窗口状态栏中的默认文本
document对 Document 对象的只读引用。(请参阅对象)
frames返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架
history对 History 对象的只读引用。请参数 History 对象
innerHeight返回窗口的文档显示区的高度
innerWidth返回窗口的文档显示区的宽度
localStorage在浏览器中存储 key/value 对。没有过期时间
length设置或返回窗口中的框架数量
location用于窗口或框架的 Location 对象。请参阅 Location 对象。
name设置或返回窗口的名称
navigator对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener返回对创建此窗口的窗口的引用。
outerHeight返回窗口的外部高度，包含工具条与滚动条。
outerWidth返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent返回父窗口。
screen对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft返回相对于屏幕窗口的x坐标
screenTop返回相对于屏幕窗口的y坐标
screenX返回相对于屏幕窗口的x坐标
sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY返回相对于屏幕窗口的y坐标
self返回对当前窗口的引用。等价于 Window 属性。
status设置窗口状态栏的文本。
top返回最顶层的父窗口。

2.5 windows对象的常见方法

同样，需要用到哪个方法就去查相关的API即可，不需要记忆

方法描述
alert()(点击可跳转至菜鸟编程)显示带有一段消息和一个确认按钮的警告框
atob()解码一个 base-64 编码的字符串
btoa()创建一个 base-64 编码的字符串
blur()把键盘焦点从顶层窗口移开
clearInterval()取消由 setInterval() 设置的 timeout
clearTimeout()取消由 setTimeout() 方法设置的 timeout
close()关闭浏览器窗口
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
createPopup()创建一个 pop-up 窗口
focus()把键盘焦点给予一个窗口
getSelection()返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()获取指定元素的 CSS 样式。
matchMedia()该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()可相对窗口的当前坐标把它移动指定的像素。
moveTo()把窗口的左上角移动到一个指定的坐标。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
print()打印当前窗口的内容。
prompt()显示可提示用户输入的对话框。
resizeBy()按照指定的像素调整窗口的大小。
resizeTo()把窗口的大小调整到指定的宽度和高度。
scroll()已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()按照指定的像素值来滚动内容。
scrollTo()把内容滚动到指定的坐标。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
stop()停止页面载入。
postMessage()安全地实现跨源通信。

2.6 BOM编程的简单示例

2.6.1 三种弹窗方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>//也可以直接不加window,直接调用alert()、confirm()、prompt()//普通信息提示框function Alert() {window.alert("提示信息");}//确认框function Confirm() {var con = window.confirm("确定要删除吗?");if (con) {window.alert("点击了确定")} else {window.alert("点击了取消")}}//信息输入对话框function Prompt() {var res = window.prompt("请输入昵称", "例如:张三");window.alert("您输入的是:" + res)}</script>
</head><body><input type="button" value="提示框" onclick="Alert()" /> <br><input type="button" value="确认框" onclick="Confirm()" /> <br><input type="button" value="对话框" onclick="Prompt()" /> <br>
</body></html>

运行效果：

2.6.2 页面跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>function gotoMyBlock() {var flag = confirm("即将跳转到我的博客,本页信息即将丢失,确定吗?")if (flag) {// 通过BOM编程地址栏url切换window.location.href = "https://blog.csdn.net/m0_55908255?type=blog"}}</script>
</head><body><input type="button" value="跳转到我的博客" onclick="gotoMyBlock()" /> <br>
</body></html>

运行效果：

2.6.3 实现会话级存储和持久级数据存储（重要）

① 会话级数据 : 内存型数据，是浏览器在内存上临时存储的数据

        特点：在浏览器关闭后，数据失去；通过 window 的 sessionStorge 属性实现

② 持久及数据：磁盘型数据，是浏览器在磁盘上持久存储的数据

        特点：在浏览器关闭后，数据仍在；通过 window 的 localStorge 实现

存储的数据可以在 F12 开发者工具上找到，如下：

​应用场景：可以用于存储一些服务端响应回来的数据，例如 token 令牌，或者一些其他功能数据，根据具体业务需求可以选择数据存储的会话/持久级别

案例1：存储数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>function testSessionStorage(){window.sessionStorage.setItem("key1","value1");alert("存储成功");}function testlocalStorage(){window.localStorage.setItem("key2","value2");alert("存储成功");}</script>
</head><body><input type="button" value="向sessionStorage中存储数据" onclick="testSessionStorage()" /><input type="button" value="向localStorage中存储数据" onclick="testlocalStorage()" />
</body></html>

 运行效果：

案例2：读取数据和删除数据

读取存储数据通过 getItem(key) 实现，删除存储的数据通过 removeItem(key) 实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>//会话级存储function testSessionStorage(){window.sessionStorage.setItem("key1","value1");alert("存储成功");}//持久级存储function testlocalStorage(){window.localStorage.setItem("key2","value2");alert("存储成功");}//获取数据function get(){alert("sessionStorage: " + sessionStorage.getItem("key1"));alert("localStorage: " + localStorage.getItem("key2"));}//删除数据function remove(){window.sessionStorage.removeItem("key1");window.localStorage.removeItem("key2");alert("删除成功");}</script>
</head><body><input type="button" value="向sessionStorage中存储数据" onclick="testSessionStorage()" /><input type="button" value="向localStorage中存储数据" onclick="testlocalStorage()" /><br/><input type="button" value="读取sessionStorage、localStorage中存储的数据" onclick="get()" /><br><input type="button" value="删除sessionStorage、localStorage中存储的数据" onclick="remove()" /></body></html>

运行效果就不演示了，大家可以自己试一下 

3.DOM编程

3.1 基本介绍

① DOM 编程其实就是利用 window 对象的 document 属性的相关 API 修改 html 页面的内容

所以 DOM 包含于 BOM 中 

② DOM全称是 Document Object Model ，文档<--->对象模型，就是把文档中的标签，属性，文本等转换成为对象来管理

③ 文档会被映射为一棵由多个对象组成的有层次结构的树来进行管理，这就是DOM机制

树中的结点类型：

  • Element：元素(标签)节点

  • Attribute：属性节点

  • Text：文本节点

其实还有 <!----> 注释节点，这个我们后面再说

3.2 常见方法表

3.2.1 查找HTML元素

查找 HTML 元素
API功能返回值
document.getElementById(id)根据 id 值查询一个具体的元素节点（因为id不能重复）
document.getElementsByTagName(tagname)根据 标签名 查询元素节点数组
document.getElementsByName(name)根据 name 属性值查询元素节点数组
document.getElementsByClassName(className)根据 类名 查询元素节点数组

3.2.2 改变HTML元素

改变 HTML 属性
API功能
element.innerHTML = new html content改变元素的 inner HTML
element.attribute = new value改变 HTML 元素的属性值
element.setAttribute (attribute，value)改变 HTML 元素的属性值
element.style.property = new style改变 HTML 元素的样式

3.2.3 添加和删除元素

添加和删除元素
API功能
document.createElement (element)创建 HTML 元素
document.removeChild(element)删除 HTML 元素
document.appendChild(element)添加 HTML 元素
document.replaceChild(element)替换 HTML 元素
document.write(text)写入 HTML 输出流

3.2.4 元素添加事件模板

模板描述

document.getElementById(id).onclick = function(){code}

向 onclick 事件添加事件处理程序

3.3 案例演示

3.3.1 弹出窗口实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>first application</title><script>window.onload = function () {//获取button_1标签对应的dom对象var button_1 = document.getElementById("button_1");button_1.onclick = function () {alert(button_1.innerText);      //innerText，强调文本alert(button_1.innerHTML);      //innerHTML，强调标签}}</script>
</head>
<body><button id="button_1"><span>点我一下</span></button><p>点击按钮来获取它的值</p>
</body>
</html>

运行效果：

3.3.2 多选框实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Second application</title>
</head>
<script type="text/javascript">//全选function selectAll() {//获取到fruit这组复选框var fruits = document.getElementsByName("fruit");  //fruits是一个数组for (var i = 0; i < fruits.length; ++i) {fruits[i].checked = true;//将元素的checed属性置为true，表示选中}}//全不选function selectNone() {var fruits = document.getElementsByName("fruit");for (var i = 0; i < fruits.length; ++i) {fruits[i].checked = false;}}//反选function selectReverse() {var fruits = document.getElementsByName("fruit"); for (var i = 0; i < fruits.length; ++i) {fruits[i].checked = !fruits[i].checked;}}
</script>
<body><span>你喜欢吃的水果：</span> <br/><input type="checkbox" name="fruit" value="grape"/>Grape<input type="checkbox" name="fruit" value="watermelon"/>Watermelon<input type="checkbox" name="fruit" value="strawberry"/>Strawberry<input type="checkbox" name="fruit" value="blueberry"/>Blueberry <br/><br/><button onclick="selectAll()">全选</button><button onclick="selectNone()">全不选</button><button onclick="selectReverse()">反选</button>
</body>
</html>

运行效果：

3.3.3 图片切换案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Third application</title><script type="text/javascript">function changeImages() {//getElementsByTagName方法可以通过标签名来获取对应的dom对象var images = document.getElementsByTagName("img");var input1 = document.getElementById("input1");if (input1.value == "点击将陆雪琪切换为张小凡") {for (var i = 0; i < images.length; ++i) {images[i].src = "../img/zhangxiaofan" + i + ".png";}input1.value = "点击将张小凡切换为陆雪琪";} else if (input1.value == "点击将张小凡切换为陆雪琪") {for (var i = 0; i < images.length; ++i) {images[i].src = "../img/luxueqi" + i + ".png";}input1.value = "点击将陆雪琪切换为张小凡";}}</script>
</head>
<body><img src="../img/luxueqi0.png" height="100px"/><img src="../img/luxueqi1.png" height="100px"/><img src="../img/luxueqi2.png" height="100px"/><br><input type="button" value="点击将陆雪琪切换为张小凡" id="input1" onclick="changeImages()"/>
</body>
</html>

运行效果：

3.3.4 动态增加图片案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Fourth application</title><script type="text/javascript">/*Δ注意：创建新的图片不是修改，而是增加！因此，此处要要用document的createElement方法*/var addImage = function () {//在浏览器内存中"创建"<img/>元素var img = document.createElement("img");img.src = "../img/zhangxiaofan1.png";img.width = "100";//利用appendChild方法"添加"HTML元素 (将创建的img元素挂载到dom树上)document.body.appendChild(img);}</script>
</head>
<body><input type="button" value="点击添加一张图片" onclick="addImage()"/>
</body>
</html>

运行效果： 

3.4 DOM节点

前面我们提到了 dom 的树形结构，如下所示：

树中节点类型有：

  • Element：元素(标签)节点

  • Attribute：属性节点

  • Text：文本节点

  • <!---->：注释节点（补充，后面会用到）

3.4.1 常用属性和案例

注：以下提到节点指的均是：Element元素节点 、Text文本节点、<!---->注释节点，不包括Attribute属性节点噢；另外，元素之间的空白也是 Text 文本节点，如下：

<body>、<button>、<span> 均为 Element 元素节点

① childNodes 属性，获取当前节点的所有子节点

案例演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>window.onload = function () {//获取button_1标签对应的dom对象var button_1 = document.getElementById("button_1");var childNodes = button_1.childNodes;console.log("button的所有子节点:")for(var i = 0;i<childNodes.length;i++){console.log(childNodes[i])}}</script>
</head>
<body><button id="button_1"><span>看看我</span></button>
</body>
</html>

运行结果：

 ② firstChild 属性：获取当前节点的第一个子节点

③ lastChild 属性：获取当前节点的最后一个子节点

④ parentNode 属性：获取当前节点的父节点；注意是父节点哈，不是紧挨着当前节点的前一个节点

⑤ nextSibling 属性：获取当前节点的后一个节点

⑥ previousSibling 属性：获取当前节点的前一个节点

④ -- ⑥ 的示意图如下：

④ -- ⑥ 案例演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>window.onload = function () {//获取button_1标签对应的dom对象var button_1 = document.getElementById("button_1");console.log(button_1.parentNode);//父节点console.log(button_1.previousSibling);//前节点console.log(button_1.nextSibling);//后节点}</script>
</head>
<body><button id="button_1"><span>damn</span></button><!---->
</body>
</html>

运行效果：

⑦ className ：用于获取或设置标签的 class 属性值

⑧ innerHTML 属性：表示获取 / 设置起始标签和结束标签中的内容

⑨ innerText 属性：表示获取 / 设置起始标签和结束标签中的文本

⑧ -- ⑨ 的示意图如下：

⑧ -- ⑨ 的案例演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script>window.onload = function () {//获取button_1标签对应的dom对象var button_1 = document.getElementById("button_1");console.log(button_1.innerHTML);console.log(button_1.innerText);}</script>
</head>
<body><button id="button_1"><span>点我一下</span></button>
</body>
</html>

运行效果：

🆗，若想看更多的 Element 的属性和方法，可以查看：HTML DOM Element 对象https://www.w3school.com.cn/jsref/dom_obj_all.asp需要什么查什么即可，也不需要特意去记

3.5 DOM编程总结

重点掌握：

① DOM的机制 : 将文档映射成由一个个具有层次关系的节点组成的树；html文档本身被映射为文档节点，而html文档内的元素和属性，以及元素内的文本，均可被映射为dom对象，而dom对象就是树上的一个节点（or 结点）。获取某个dom对象后，可以通过事件绑定（事件注册）来控制该对象的展现方式，而有了dom机制的加持，可以通过某一个节点（某一个dom对象）来获取其子节点、父节点等等，便于控制和管理。（html dom树的演示图要熟记）

② DOM常用的属性和方法：getElementById、getElementsByTagName 等等，要熟练运用

③ DOM本身并不是当前的主流工具，但是DOM机制是Vue的底层支撑，原理要清楚

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

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

相关文章

Web3.0：互联网的去中心化未来

Web3.0：互联网的去中心化未来

随着互联网技术的不断发展&#xff0c;我们正站在一个新时代的门槛上——Web3.0时代。Web3.0不仅仅是一个技术升级&#xff0c;它更是一种全新的互联网理念&#xff0c;旨在通过去中心化技术重塑网络世界。本文将深入探讨Web3.0的核心概念、技术基础、应用场景以及它对未来的深…
阅读更多...
CVPR计算机视觉顶会论文解读：IPC-Dehaze 如何解决真实场景去雾难题

CVPR计算机视觉顶会论文解读：IPC-Dehaze 如何解决真实场景去雾难题

【CVPR 2025】迭代预测-评判编解码网络&#xff1a;突破真实场景去雾的极限 摘要 本文提出了一种名为IPC-Dehaze的创新去雾方法&#xff0c;通过迭代预测-评判框架和码本解码机制&#xff0c;有效解决了现有去雾算法在复杂场景下的性能瓶颈。该方法在多个基准测试中取得了SOT…
阅读更多...
07.three官方示例+编辑器+AI快速学习webgl_buffergeometry_attributes_integer

07.three官方示例+编辑器+AI快速学习webgl_buffergeometry_attributes_integer

本实例主要讲解内容 这个Three.js示例展示了WebGL 2环境下的整数属性渲染技术。通过创建大量随机分布的三角形&#xff0c;并为每个三角形分配不同的整数索引&#xff0c;实现了基于索引动态选择纹理的效果。 核心技术包括&#xff1a; WebGL 2环境下的整数属性支持顶点着色…
阅读更多...
WebSocket：实时通信（如聊天应用）从零到一的深度解析

WebSocket：实时通信（如聊天应用）从零到一的深度解析

简介 在现代互联网应用中，实时通信已成为不可或缺的核心功能。从在线聊天到金融数据监控，从协同办公到在线游戏，实时性需求推动了WebSocket技术的广泛应用。本文将从底层协议原理出发，结合企业级开发场景，系统讲解WebSocket的实现机制、实战技巧与优化策略。通过完整的代…
阅读更多...
【NLP 困惑度解析和python实现】

【NLP 困惑度解析和python实现】

**困惑度&#xff08;Perplexity&#xff09;**是自然语言处理和机器学习中常用的评价指标&#xff0c;尤其在评估语言模型时广泛使用。它衡量的是一个概率模型对一个样本&#xff08;如一句话&#xff09;的预测能力。 一、困惑度的定义 对于一个语言模型 $ P $ 和一个测试语…
阅读更多...
编程题 02-线性结构3 Reversing Linked List【PAT】

编程题 02-线性结构3 Reversing Linked List【PAT】

文章目录 题目输入格式输出格式输入样例输出样例 题解解题思路完整代码 编程练习题目集目录 题目 Given a constant K K K and a singly linked list L L L, you are supposed to reverse the links of every K K K elements on L L L. For example, given L being 1 → …
阅读更多...
互联网大厂Java求职面试实战：Spring Boot到微服务全景解析

互联网大厂Java求职面试实战：Spring Boot到微服务全景解析

&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 2. 我的免费工具站&#xff1a; 欢迎访问 https://tools-6wi.pages.dev/ &#x1f601; 3. 毕业设计专栏&#xff0c;毕业…
阅读更多...
课程11. 计算机视觉、自编码器和生成对抗网络 (GAN)

课程11. 计算机视觉、自编码器和生成对抗网络 (GAN)

计算机视觉、自编码器和生成对抗网络&#xff08;GAN&#xff09; 自动编码器Vanilla自动编码器使用 AE 生成新对象. 变分 AE (VAE)AE 条件 GAN理论示例下载并准备数据GAN模型 额外知识 课程计划&#xff1a; 自动编码器&#xff1a; 自动编码器结构&#xff1b;使用自动编码器…
阅读更多...
MarkitDown：AI时代的文档转换利器

MarkitDown：AI时代的文档转换利器

在当今AI快速发展的时代，如何高效地将各种格式的文档转换为机器可读的格式，成为了一个迫切需要解决的问题。今天，我们来介绍一款由微软开发的强大工具——MarkitDown，它正是为解决这一问题而生的。 什么是MarkitDown？ MarkitDown是一个用Python编写的轻量级工具，专门用…
阅读更多...
Python实战案例：打造趣味猜拳小游戏

Python实战案例：打造趣味猜拳小游戏

Python实战案例&#xff1a;猜拳小游戏 文章目录 Python实战案例&#xff1a;猜拳小游戏一、案例背景二、代码实现三、代码解析3.1 执行过程3.2 流程图 四、案例总结1. 核心知识点运用2. 编程思维提升 一、案例背景 猜拳游戏&#xff08;石头剪刀布&#xff09;是一款规则简单…
阅读更多...
MCP：重塑AI交互的通用协议，成为智能应用的基础设施

MCP：重塑AI交互的通用协议，成为智能应用的基础设施

目录： 为什么我们需要一个AI世界的USB-C？MCP的核心架构与工作原理MCP如何解决当前AI生态系统的碎片化问题从代码到实践：构建基于MCP的智能应用MCP的未来：从工具到生态为什么我们需要一个AI世界的USB-C？ 还记得在USB-C标准普及之前，我们的数字生活是什么样子吗？抽屉里塞…
阅读更多...
如何保证RabbitMQ消息的顺序性？

如何保证RabbitMQ消息的顺序性？

保证RabbitMQ消息的顺序性是一个常见的需求&#xff0c;尤其是在处理需要严格顺序的消息时。然而&#xff0c;默认情况下&#xff0c;RabbitMQ不保证消息的全局顺序&#xff0c;因为消息可能会通过不同的路径&#xff08;例如不同的网络连接或线程&#xff09;到达队列&#xf…
阅读更多...
HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.2 列表--无序列表、有序列表、定义列表

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。小编作为新晋码农一枚&#xff0c;会定期整理一些写的比较好的代码&#xff0c;作为自己的学习笔记…
阅读更多...
Vuex和Vue的区别

Vuex和Vue的区别

Vue和Vuex有着不同的功能和定位&#xff0c;主要区别如下&#xff1a; 概念与功能 - Vue&#xff1a;是一个构建用户界面的JavaScript框架&#xff0c;专注于视图层的开发&#xff0c;采用组件化的方式构建应用程序&#xff0c;通过数据绑定和指令系统&#xff0c;能方便地…
阅读更多...
数据可视化-----子图的绘制及坐标轴的共享

数据可视化-----子图的绘制及坐标轴的共享

目录 绘制固定区域的子图 &#xff08;一&#xff09;、绘制单子图 subplot()函数 Jupyter Notebook的绘图模式 &#xff08;二&#xff09;、多子图 subplots()--可以在规划好的所有区域中一次绘制多个子图 &#xff08;三&#xff09;、跨行跨列 subplot2grid()---将整…
阅读更多...
基于Qt6 + MuPDF在 Arm IMX6ULL运行的PDF浏览器——MuPDF Adapter文档

基于Qt6 + MuPDF在 Arm IMX6ULL运行的PDF浏览器——MuPDF Adapter文档

项目地址&#xff1a;总项目Charliechen114514/CCIMXDesktop: This is a Qt Written Desktop with base GUI Utilities 本子项目地址&#xff1a;CCIMXDesktop/extern_app/pdfReader at main Charliechen114514/CCIMXDesktop 前言 这个部分说的是Mupdf_adaper下的文档的工…
阅读更多...
Linux 防火墙 firewalld 实战配置教程!

Linux 防火墙 firewalld 实战配置教程!

最近工作上处理了很多关系配置服务器防火墙的操作&#xff0c;于是想写一篇理论与实践并存的文章&#xff0c;在这里分享给大家&#xff0c;希望对您有所帮助&#xff01; 主要包括以下几部分内容&#xff1a; 防火墙概述 firewalld原理框架 与iptables的异同点 firewalld常…
阅读更多...
C#发送文件到蓝牙设备

C#发送文件到蓝牙设备

测试环境&#xff1a; visual studio 2022 win11笔记本电脑&#xff0c;具有蓝牙功能 .net6控制台 测试步骤如下&#xff1a; 1 新增名为BluetoothDemo控制台项目 2 通过nuget安装InTheHand.Net.Bluetooth&#xff0c;版本选择4.2.1和安装InTheHand.Net.Obex&#xff0c;版…
阅读更多...
初识 Pandas：Python 数据分析的利器

初识 Pandas：Python 数据分析的利器

在数据分析、数据清洗和可视化等领域&#xff0c;Python 无疑是最受欢迎的语言之一&#xff0c;而在 Python 的数据处理生态中&#xff0c;Pandas 是最核心、最基础的库之一。如果你接触数据分析、机器学习、金融建模&#xff0c;或者只是想处理一些 Excel 表格&#xff0c;那么…
阅读更多...
SpringBoot项目使用POI-TL动态生成Word文档

SpringBoot项目使用POI-TL动态生成Word文档

近期项目工作需要动态生成Word文档的需求&#xff0c;特意调研了动态生成Word的技术方案。主要有以下两种&#xff1a; 第一种是FreeMarker模板来进行填充&#xff1b;第二种是POI-TL技术使用Word模板来进行填充&#xff1b; 以下是关于POI-TL的官方介绍 重点关注&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023