04.前端之BOM和DOM

来源:https://www.cnblogs.com/changxin7/archive/2019/09/12/11511738.html
-Advertisement-
Play Games

前戲 到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。 也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。 JavaScript分為 ECMAScript，DOM，BOM。 BOM（Browse ...


前戲

　　到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。

　　也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。

　　JavaScript分為 ECMAScript，DOM，BOM。

　　BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

　　DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

　　Window對象是客戶端JavaScript最高層對象之一，由於window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

BOM

window對象

　　img

　　看上面的例子你會發現，name直接封裝到了window對象上，瞭解一下就可以了。

　　所有瀏覽器都支持 window 對象。它表示瀏覽器視窗。

　　**如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，併為每個框架創建一個額外的 window 對象（瞭解）。*

　　**沒有應用於 window 對象的公開標準，不過所有瀏覽器都支持該對象（瞭解）。*

　　所有 JavaScript 全局對象、函數以及變數均自動成為 window 對象的成員。

　　全局變數是 window 對象的屬性。全局函數是 window 對象的方法。

　　接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

　　一些常用的Window方法：（在瀏覽器調試器的console裡面輸入下麵這些屬性或者方法，就能看到對應的效果）

  • window.innerHeight - 瀏覽器視窗的內部高度
  • window.innerWidth - 瀏覽器視窗的內部寬度
  • window.open() - 打開新視窗
  • window.close() - 關閉當前視窗 (只能關閉用js的window.open()打開的頁面，瞭解一下就行了)

window的子對象

　　　　瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字元串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操作系統

　　　　看示例：

img

screen對象（瞭解即可）

　　　　屏幕對象，不常用。

　　　　一些屬性：

  • screen.availWidth - 可用的屏幕寬度
  • screen.availHeight - 可用的屏幕高度

history對象（瞭解即可）

　　　　window.history 對象包含瀏覽器的歷史。

　　　　瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁，其實也是window的屬性，window.history.forward()
history.back()  // 後退一頁

　　　　img

location對象

　　　　window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

　　　　常用屬性和方法：

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面,就是刷新一下頁面

　　　　img

　　

　　上面的內容需要大家記住的是：

　　　　1.window對象

　　　　2.window的子對象：location的那幾個屬性和方法

　　　　3.其他的作為瞭解

　　我們下麵來學些比較有意思有用的內容：

彈出框

　　　　可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

　　警告框

　　　　警告框經常用於確保用戶可以得到某些信息。

　　　　當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。

　　　　語法：

alert("你看到了嗎？");

　　　　img

　　確認框（瞭解即可）

　　　　確認框用於使用戶可以驗證或者接受某些信息。

　　　　當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

　　　　如果用戶點擊確認，那麼返回值為 true。如果用戶點擊取消，那麼返回值為 false。

　　　　語法：

confirm("你確定嗎？")

　　　　img

　　　　　　　　　　img

　　　　我們可以根據返回的true和false來判斷一下，然後根據這個值來使用location去跳轉對應的網站。

　　提示框（瞭解即可）

　　　　提示框經常用於提示用戶在進入頁面前輸入某個值。

　　　　當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

　　　　如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為預設值，就是第二個參數，如果沒有預設值那麼返回null。

　　　　語法：

prompt("請在下方輸入","你的答案")

img

　　　　可以通過用戶輸入的內容來判斷我們怎麼去進行後面的操作

　　除了那個警告框（用的也不都），其他的都很少用，比較醜陋，瞭解一下就行

計時相關（比較重要）

　　　　通過使用 JavaScript，我們可以在一定時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之為計時事件。

　　　　setTimeout() 一段時間後做一些事情

　　　　　　語法：

var t=setTimeout("JS語句",毫秒)  第一個參數js語句多數是寫一個函數，不然一般的js語句到這裡就直接執行了，先用函數封裝一下，返回值t其實就是一個id值（瀏覽器給你自動分配的）

　　　　　　setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。

　　　　　　setTimeout() 的第一個參數是含有 JavaScript 語句的字元串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

　　　　　　第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。

　　　　　　img

　　　　clearTimeout()

　　　　　　語法：

clearTimeout(setTimeout_variable)

　　　　舉個例子：

// 在指定時間之後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);

　　　　setInterval() 每隔一段時間做一些事情

　　　　　　setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

　　　　　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

　　　　　　語法：

setInterval("JS語句",時間間隔)

　　　　　　返回值

　　　　　　一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

　　　　clearInterval()

　　　　　　clearInterval() 方法可取消由 setInterval() 設置的 timeout。

　　　　　　clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

　　　　　　語法：

clearInterval(setinterval返回的ID值)

　　　　　　舉個例子：

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);

　　　　　　

DOM

　　DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

　　當網頁被載入時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

　　HTML DOM 模型被構造為對象的樹。

HTML DOM 樹

　　　　img

　　DOM標準規定HTML文檔中的每個成分都是一個節點(node)：

  • 文檔節點(document對象)：代表整個文檔
  • 元素節點(element 對象)：代表一個元素（標簽）
  • 文本節點(text對象)：代表元素（標簽）中的文本
  • 屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
  • 註釋是註釋節點(comment對象)　

　　JavaScript 可以通過DOM創建動態的 HTML：

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠對頁面中的所有事件做出反應（滑鼠點擊事件，滑鼠移動事件等）

查找標簽（和css一樣，你想操作某個標簽需要先找到它）

直接查找

document.getElementById           根據ID獲取一個標簽
document.getElementsByClassName   根據class屬性獲取（可以獲取多個元素，所以返回的是一個數組）
document.getElementsByTagName     根據標簽名獲取標簽合集

　　　　例子：　

　　　　　img

間接查找

parentElement            父節點標簽元素
children                 所有子標簽
firstElementChild        第一個子標簽元素
lastElementChild         最後一個子標簽元素
nextElementSibling       下一個兄弟標簽元素
previousElementSibling   上一個兄弟標簽元素

　　　　img

　　　如果查找出來的內容是個數組，那麼就可以通過索引來取對應的標簽對象

　　　　img

　　上面說的這些查找標簽的方法，以後我們很少用，等學了JQuery，會有很好用、更全的查找標簽的功能，上面這些大家簡單練習一下，有個瞭解就行了。

節點操作

創建節點（就是創建標簽）

　　　　　　語法：

　　　　　　createElement(標簽名)

　　　　　　示例：

var divEle = document.createElement("div");

　　　　　img

　　　　　img

添加節點

　　　　　　語法：

　　　　　　追加一個子節點（作為最後的子節點）

　　　　　　somenode.appendChild(newnode)；

　　　　　　把增加的節點放到某個節點的前邊。

　　　　　　somenode.insertBefore(newnode,某個節點);

　　　　　　示例：

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

　　　　img

刪除節點

　　　　　　語法：

　　　　　　獲得要刪除的元素，通過父元素調用該方法刪除。

　　　　　　somenode.removeChild(要刪除的節點)

替換節點

　　　　　　語法：

　　　　　　somenode.replaceChild(newnode, 某個節點);

　　　　　　somenode是父級標簽，然後找到這個父標簽裡面的要被替換的子標簽，然後用新的標簽將該子標簽替換掉

屬性節點

　　　　　　獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText  #輸入這個指令，一執行就能獲取該標簽和內部所有標簽的文本內容
divEle.innerHTML  #獲取的是該標簽內的所有內容，包括文本和標簽

　　　　　　img

　　　　　　img

　　　　　　設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"  
divEle.innerHTML="<p>2</p>" #能識別成一個p標簽

　　　　　　attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比較規範的寫法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設置，如果是你自定義的屬性，是不能通過.來獲取屬性值的
imgEle.src
imgEle.src="..."

獲取值操作

　　　　　　語法：

　　　　　　elementNode.value

　　　　　　適用於以下標簽，用戶輸入或者選擇類型的標簽：

　　　　　　1.input

　　　　　　2.select

　　　　　　3.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

　　　　　　　例如：頁面上有下麵三個標簽

　　　　　　　img

　　　　　　img

　　　　　　

　　　　　　img

class的操作

className  獲取所有樣式類名(字元串)首先獲取標簽對象
標簽對象.classList.remove(cls)  刪除指定類
classList.add(cls)  添加類classList.contains(cls)  存在返回true，否則返回falseclassList.toggle(cls)  存在就刪除，否則添加，toggle的意思是切換，有了就給你刪除，如果沒有就給你加一個

　　　　　　例如：我想將c2的類加到class裡面去

　　　　　　　　img

　　　　　　　　img

　　　　　　

指定CSS操作

obj.style.backgroundColor="red"

　　　　　　JS操作CSS屬性的規律：

　　　　　　1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

　　　　　　　　

　　　　　　2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

　　　　　　　　img

　　我們上面所說的這些修改樣式的方法，是不是應該應用在用戶的某些操作上啊，如果你用戶點擊了某個內容，讓它變變顏色之類的，給用戶一些好看的效果或者指示的效果啊，所以這就要和我們下麵要學的事件結合起來要做的事情，通過事件+上面的樣式修改來實現。

事件

　　HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下麵是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

常用事件(就先講一下onfocus，onblur，onclick，onchange吧，其他的回頭再說~~)

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成載入。
onmousedown    滑鼠按鈕被按下。
onmousemove    滑鼠被移動。
onmouseout     滑鼠從某元素移開。
onmouseover    滑鼠移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

綁定方式：

　　　　方式一：（已經不常用了，多數用方式二了）

<div id="d1" onclick="changeColor(this);">點我</div>  
<script>  
  function changeColor(ths) {  
    ths.style.backgroundColor="green";
  }
</script>

　　　　註意：

　　　　　　this是實參，表示觸發事件的當前元素。

　　　　　　函數定義過程中的ths為形參。

　　　　方式二：

<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {　　 //console.log(this)
    this.innerText="呵呵"; #哪個標簽觸發的這個事件，this就指向誰
  }
</script>

　　　　註意一個問題：

　　　　　　img

　　　　　　img

　　　　　　img

　　　　　　還有一種解決辦法就是將script標簽寫到body標簽最下麵

　　　　　　img

　　　　　　

　　　　結合計時器的事件示例，input框裡面動態顯示時間:

<!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">
  <title>定時器</title>
  <script>  //當js代碼中有找標簽的操作的時候，別忘了頁面載入的時候的順序，以防出現找不到標簽的情況出現，我們可以將這個script標簽放到body標簽最下麵，或者用window.onload，這裡我沒有放，你們練習的時候放到下麵去
    var intervalId; //用來保存定時器對象，因為開始定時器是一個函數，結束定時器是一個函數，兩個函數都是操作的一個定時器，讓他們互相能夠操作這個定時器，就需要一個全局變數來接受一下這個對象
　　　　　　//把當前事件放到id為i1的input標簽裡面
    function f() {
      var timeStr = (new Date()).toLocaleString(); // 1.拿到當前事件
      var inputEle = document.getElementById("i1");// 2.獲取input標簽對象
      inputEle.value = timeStr;  //3.將事件賦值給input標簽的value屬性
    }
　　//開始定時任務
    function start() {
      f();
      if (intervalId === undefined) { //如果不加這個判斷條件，你每次點擊開始按鈕，就創建一個定時器，每點一次就創建一個定時器，點的次數多了就會在頁面上生成好多個定時器，並且點擊停止按鈕的時候，只能停止最後一個定時器，這樣不好，也不對，所以加一個判斷
        intervalId = setInterval(f, 1000);
      }
    }    //結束定時任務
    function end() {
      clearInterval(intervalId); //　清除對應的那個定時器
      intervalId = undefined;
    }

  </script>
</head>
<body>

<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結束" id="end" onclick="end();">
</body>
</html>

　　　　事件示例：

　　　　　　搜索框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){  //如果在標簽中寫的blur()等方法，沒有傳入this參數，那麼我們就需要自己來獲取一下這個標簽，例如下麵的getElementById('d1')
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";　　　　 //inputEle.setAttribute('value','')
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>

　　　　　　select聯動：選擇省份，自動列出所有的城市，例如：選擇河北省就顯示河北省所有的市

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>
<select id="province">
  <option>請選擇省:</option>
</select>

<select id="city">
  <option>請選擇市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海澱區"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");
  //頁面一刷新就將所有的省份都添加到select標簽中
  for (var i in data) {
    var optionP = document.createElement("option"); //創建option標簽
    optionP.innerHTML = i; //將省份的數據添加到option標簽中
    p.appendChild(optionP);//將option標簽添加到select標簽中
  }  //只要select中選擇的值發生變化的時候，就可以觸發一個onchange事件，那麼我們就可以通過這個事件來完成select標簽聯動
  p.onchange = function () {    //1.獲取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是當前選擇的option標簽的索引位置，this.options是獲取所有的option標簽，通過索引拿到當前選擇的option標簽對象，然後.innerHTML獲取對象中的內容，也就是省份
    //還可以這樣獲取省：var pro = this.value;    var citys = data[pro]; //2. 通過上面獲得的省份去data裡面取出該省對應的所有的市
    // 3. 清空option
    c.innerHTML = ""; //清空顯示市的那個select標簽裡面的內容
　　    //4.迴圈所有的市，然後添加到顯示市的那個select標簽中
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

　　window.onload

　　　　當我們給頁面上的元素綁定事件的時候，必須等到文檔載入完畢。因為我們無法給一個不存在的元素綁定事件。

　　　　window.onload事件在文件載入過程結束的時候觸發。此時，文檔中的所有對象都位於DOM中，並且所有圖像，腳本，鏈接和子框架都已完成載入。

　　　　註意：.onload()函數存在覆蓋現象。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 將Android封裝庫通過gradle部署到maven私服並依賴使用
    一、在需要發佈的模塊chrisbaselibrary下的build.gradle中添加以下部分 直接添加到最後即可。 使用gradle的插件uploadArchives實現部署。 部署成功後，我們可以修改app模塊的依賴方式。不過建議另外建一個項目進行依賴測試，畢竟這個項目中的app模塊是用來做實時 ...
  • 鍵值是數字時的處理方式
    同事碰到介面返回為數值的鍵值，想處理成自己想要的鍵值的對象，於是寫了個方法來處理類似的數據 '{"1":"憑訂單詳情頁的入園憑證(入園輔助碼或二維碼)入園","2":"憑下單時預留的身份證入園","3":""}' 處理成自己想要的鍵值的對象 const content = '{"1":"憑訂單詳情頁 ...
  • redux和react-redux
    redux和react redux的關係： redux是react的狀態管理工具，卻不僅僅只是為了react而生的，所以在使用中會存在痛點。而react redux是專門為了react定製，目的是為瞭解決redux的痛點，起到了補充的作用。 redux和flux思想： 從代碼層面而言，flux無非就 ...
  • capserjs-prototype(上)
    Casper prototyp back() 具體樣式: back() Moves back a step in browser’s history: 在瀏覽器歷史中回退一步: 同樣看一眼 "forward()" 方法 base64encode() 具體樣式: base64encode(String ...
  • casperjs-options
    The Casper class The easiest way to get a casper instance is to use the module’s create() method: 最簡單獲取casper實例的方法是casper模塊的create()方法: But you can al ...
  • jq動畫插件，自製基於vue的圓形時鐘
    首先附上jq插件庫，裡面的東西太炫了，建議學前端的可以看看學習下：http://www.jq22.com/ 裡面有個“超個性動畫版本的個人簡歷”，通過屏幕上不斷列印內容，改變相應樣式來實現動畫簡歷，我從來沒想到過還有這種操作； 再附上一個比較有趣的基於vue的圓形時鐘： <!DOCTYPE html ...
  • 那些你不知道的HTML知識，快來學習一下吧
    前言 HTML作為前端三大基礎知識點之一，是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會註意，卻在面試時可能會問到的題目，來看看你都會嗎？ 如何使用div模擬實現textarea？ 我們都知道textarea是form表單中一個很常見的元素，用於多行文本輸入，可以設置行數和 ...
  • JavaScript之深入對象（一）
    在之前的《JavaScript對象基礎》中，我們大概瞭解了對象的創建和使用，知道對象可以使用構造函數和字面量方式創建。那麼今天，我們就一起來深入瞭解一下JavaScript中的構造函數以及對象的原型及原型鏈。 一 構造函數 1，什麼是構造函數 Javascript中使用構造函數的目的是批量創建擁有相 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類