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.pswp.cn/diannao/83222.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/83222.shtml
英文地址，請注明出處：http://en.pswp.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