【筆記】【JavaScript】【jQuery】菜鳥編程學習筆記

来源:https://www.cnblogs.com/lao-jiaweijarvee/archive/2022/05/11/16259954.html
-Advertisement-
Play Games

前言 【內容】 jQuery菜鳥編程學習筆記 具體詳情看目錄 【目的】 記錄本人在jQuery學習中的筆記 方便日後的工作與學習。 【學習資料】 jQuery教程-菜鳥教程 【溫馨提示】 筆記中有些個人理解後整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。 jQuery快速瞭解 啥是jQuery ...


前言

【內容】

  • jQuery菜鳥編程學習筆記
  • 具體詳情看目錄

【目的】

  • 記錄本人在jQuery學習中的筆記
  • 方便日後的工作與學習。

【學習資料】

jQuery教程-菜鳥教程


【溫馨提示】

  • 筆記中有些個人理解後整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。

jQuery快速瞭解

啥是jQuery？

  • 是一個 JavaScript 函數庫
  • 是一個輕量級的"寫的少，做的多"的 JavaScript 庫

能幹什麼？

  • HTML 元素選取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函數
  • JavaScript 特效和動畫
  • HTML DOM 遍歷和修改
  • AJAX
  • Utilities
  • 提供了大量的插件

如何在網頁文件中引入jQuery？

方法一：本地引用

  • 從jQuery官網下載jQuery庫

    • 下載版本（二選一）
      • Production version - 用於實際的網站中，已被精簡和壓縮。
      • Development version - 用於測試和開發（未壓縮，是可讀的代碼）。

  • 將下載的文件放在網頁的同一目錄下

  • 在html文件中用<script>標簽引用

    <head>
	<script src="jquery-對應版本.js"></script>
</head>

方法二：通過CDN（內容分髮網絡） 引用

  • 直接選一個複製到html中用<script>標簽引用
/*Staticfile CDN*/
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

/*百度 CDN:*/
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

/*又拍雲 CDN*/
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>

/*新浪 CDN*/
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

/*Microsoft CDN*/
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

【PS】推薦使用方法二引入jQuery

  • 減少載入時間。
    • 【解釋】 許多用戶在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。所以結果是，當他們訪問您的站點時，會從緩存中載入 jQuery
  • 提高載入速度。
    • 【解釋】 大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的伺服器上返迴響應

如何查看jQuery使用版本？

  • 按F12打開 Console（控制台） 視窗
  • 輸入$.fn.jquery 命令查看當前 jQuery 使用的版本

如何使用jQuery？

jQuery語法

基礎語法

  • 通過選取 HTML 元素，並對選取的元素執行某些操作

【格式】

$(selector).action()

$：定義jQuery

selector（選擇符）："查詢"和"查找" HTML 元素（具體詳情）

action()：執行對元素的操作


文檔就緒事件

  • 所有 jQuery 函數位於一個 document ready 函數中
    • 【原因】 為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼，即在 DOM 載入完成後才可以對 DOM 進行操作。

【格式】

格式一：

$(document).ready(function(){
   // 開始寫 jQuery 代碼...
});

格式二：簡潔寫法（與以上寫法效果相同）

$(function(){
   // 開始寫 jQuery 代碼...
});

【拓展】JavaScript文檔就緒事件

格式:

window.onload = function () {
    // 執行代碼
}


jQuery選擇器

  • 允許對 HTML 元素組或單個元素進行操作。
  • 更css中的選擇器相同。
  • 所有選擇器都以美元符號開頭：$()。
常用選擇器 格式
元素選擇器 $("元素名")
id 選擇器 $("#id名")
class 選擇器 $(".類名")

瞭解更多（無須深究可暫時跳過，用到時再具體瞭解）


如何在獨立文件中使用jQuery函數？

  • 將jQuery 函數放到獨立的 .js 文件中。

  • 將函數直接添加到 <head> 部分中

    示例：

    <head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

【好處】

  • jQuery 函數易於維護

jQuery事件

啥是事件？

瞭解更多（無須深究可暫時跳過，用到時再具體瞭解）


如何設置jQuery事件?

【格式】

$("selecter").action（function(){
    //動作觸發後執行的代碼！！！
}）;

selecter：選擇器

action：事件

function：函數


jQuery 效果

隱藏/顯示

hide()【隱藏】和 show()【顯示】

【格式】

$("selecter").hide(speed,callback);
$("selecter").hide(speed,callback);

speed（隱藏/顯示的速度）：可選

  • 值：slow、fast、毫秒

callback（隱藏/顯示後執行的函數）：可選


toggle()【將顯示的隱藏，將隱藏的顯示】

【格式】

$("selecter").toggle(speed,callback);

淡入/淡出

【註意】

  • 大小寫不能變

fadeln()【淡入已已隱藏的元素】和 fadeOut() 【淡出可見元素】

【格式】

$("selector").fadeIn(speed,callback);
$("selector").fadeOut(speed,callback);

speed（隱藏/顯示的速度）：可選

  • 值：slow、fast、毫秒

callback（淡入後執行的函數）：可選


fadeToggle() 【元素已淡出，添加淡入效果；元素已淡入，添加淡出效果】

【格式】

$("selector").fadeToggle(speed,callback);

fadeTo() 【漸變淡入淡出】

【格式】

$("selector").fadeTo(speed,opacity,callback);

opacity(不透明度)：將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）

【註意】

  • 沒有預設參數，必須加上 slow/fast/Time

滑動

slideDown() 【向下滑動元素】 和 slideUp()【向上滑動元素】

【格式】

$("selector").slideDown(speed,callback);
$("selector").slideUp(speed,callback);

speed（效果的時長）：可選

  • 值：slow、fast、毫秒

callback（滑動後執行的函數）：可選


slideToggle()【已向下滑動的元素，向上滑動；已向上滑動的元素，向下滑動】

【格式】

$("selector").slideToggle(speed,callback);

動畫

animate()【創建自定義動畫】

【格式】

 $("selector").animate({params},speed,callback);

params（形成動畫的 CSS 屬性）：必需

  • 可操作多個屬性
    • 可以同時使用多個屬性
    • 可以操作所有 CSS 屬性
      • 必須使用駝峰標記法書寫所有的屬性名
        • 例如必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
      • 色彩動畫並不包含在核心 jQuery 庫中
  • 可使用相對值
    • 相對值（該值相對於元素的當前值）。需要在值的前面加上+=或 -=
  • 可使用預定義的值
    • 可以把屬性的動畫值設置為 show、hide 或 toggle
  • 可使用對列功能
    • 編寫多個 animate() 調用，逐一運行這些 animate 調用。

speed（效果的時長）：可選

  • 值：slow、fast、毫秒

callback（動畫完成後執行的函數）：可選

【註意】

  • 如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute
    • 【原因】預設情況下，所有 HTML 元素都有一個靜態位置，且無法移動。

停止動畫

stop() 【在它們完成之前，停止動畫或效果】

  • 適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫

【格式】

 $("selector").stop(stopAll,goToEnd);

stopAll(是否應該清除動畫隊列)：

  • false:預設
    • 僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
  • true:所有動畫都不執行

goToEnd（是否立即完成當前動畫）：

  • false:預設
    • 會清除在被選元素上指定的當前動畫
  • true
    • 執行完當前動畫再停止後續動畫

Callback方法（回調）

  • 在當前動畫 100% 完成之後執行
  • 有Callback和無Calback的區別
    • 有Callback：執行完動畫在執行回調函數
    • 無Callback：直接執行後續函數

鏈（Chaining）

  • 可以把動作/方法鏈接在一起
  • 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）
  • 依次執行

【格式】

$("selecter").action1().action2().action3()....actionN();

【縮進格式】

$("selecter").action1()
    .action2()
    .action3()
    ...
    .actionN();

【註意】

  • 無須擔心縮進格式中的空格
    • 【原因】jQuery 會拋掉多餘的空格，並當成一行長代碼來執行上面的代碼行。

更多方法【瞭解即可】

jQuery 效果方法


jQuery HTML

  • jQuery 擁有可操作 HTML 元素和屬性的強大方法。
  • jQuery 中非常重要的部分，就是操作 DOM 的能力。
  • jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

【拓展】什麼是DOM？

  • DOM = Document Object Model（文檔對象模型）
  • DOM 定義訪問 HTML 和 XML 文檔的標準

獲取內容和屬性

獲取內容方法

方法名 設置或返回內容
text() 所選元素的文本內容
html() 所選元素的內容（包括 HTML 標記）
val() 表單欄位的值

獲取屬性

attr() 【獲取自定義屬性值】

【格式】

$("selecter").attr("想要獲取值的屬性")

prop()【獲取固有屬性值】

【格式】

$("selecter").prop("想要獲取值的屬性")

【PS】

  • 具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()

【拓展】啥是固有屬性？

  • 元素本身就帶有的屬性
  • W3C 標準里就包含有的屬性
  • IDE 里能夠智能提示出的屬性

attr()和prop()的區別

attr() prop()
用途 獲取自定義屬性值 獲取固有屬性值
如果沒有相應的屬性，返回值 undefined 空字元串

設置內容和屬性

設置內容方法

方法名 設置或返回內容
text("文本內容") 所選元素的文本內容
html("帶標簽的內容") 所選元素的內容（包括 HTML 標記）
val("值") 表單欄位的值

text()、html() 以及 val() 的回調函數

【格式】

$("selecter").text(function(index,origText){
    //方法代碼
});
$("selecter").html(function(index,origText){
    //方法代碼
});
$("selecter").val(function(index,origText){
    //方法代碼
});

index：被選元素列表中當前元素的下標

origText：原始（舊的）值。


設置屬性

attr()方法設置屬性值

【格式】

//設置單個屬性
$("selecter").attr("屬性","想要設置的值");

//設置多個屬性
$("selecter").attr({
    "屬性1":"屬性1的值",
    "屬性2":"屬性2的值",
    ....
    "屬性N":"屬性N的值",
});

attr() 的回調函數

【格式】

$("selecter").attr("屬性",function(index,orgValue){
    //方法代碼
});

index：被選元素列表中當前元素的下標

orgValue：原始（舊的）值


添加元素/內容

append()【在被選元素的結尾插入內容（仍然在該元素的內部）】

【格式】

$("selecter").append("追加文本");

prepend() 【在被選元素的開頭插入內容（仍然在該元素的內部）】

【格式】

$("selecter").prepend("在開頭追加文本");

通過 append() 和 prepend() 方法添加若幹新元素、

【思路】

  • 創建若幹個新元素
    • 這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建
  • 然後通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）

【格式】

var txt1="<p>文本-1。</p>";              // 使用 HTML 標簽創建文本
var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 創建文本
var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 創建文本 text with DOM
$("body").append(txt1,txt2,txt3);        // 追加新元素

after() 【在被選元素之後插入內容】 和 before()【在被選元素之前插入內容】

【格式】

$("selecter"").after("在元素後面添加文本");

$("selecter").before("在元素前面添加文本");

通過 after() 和 before() 方法添加若幹新元素

【思路】

  • 創建若幹新元素
    • 這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建
  • 然後通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）

【格式】

var txt1="<b>I </b>";                    // 使用 HTML 創建元素
var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創建元素
var txt3=document.createElement("big");  // 使用 DOM 創建元素
    txt3.innerHTML="jQuery!";
$("selecter").after(txt1,txt2,txt3);          // 在圖片後添加文本

【append/prepend】和【after/before】有什麼區別?

  • 【append/prepend】 是在選擇元素內部嵌入。
  • 【after/before】 是在元素外面追加。

刪除元素/內容

remove()方法

刪除被選元素和子元素

【格式】

$("selecter").remove();

過濾被刪除的元素

【格式】

$("selecter").remove("selecter");

empty()方法

刪除被選元素的子元素

【格式】

$("selecter").empty();

獲取並設置CSS類

方法名 功能
addClass() 向不同的元素添加 class 屬性
removeClass() 在不同的元素中刪除指定的 class 屬性
toggleClass() 對被選元素進行添加/刪除類的切換操作

【格式】

$("元素1,元素2,元素3,...,元素N").addClass("類名1 類名2 類名N");

$("元素1,元素2,元素3,...,元素N").removeClass("類名1 類名2 類名N");

$("元素1,元素2,元素3,...,元素N").toggleClass("類名1 類名2 類名N");

【註意】

  • 指定多個元素用,隔開
  • 添加多個類用空格隔開

CSS()方法

返回指定的 CSS 屬性的值

【格式】

$("selecter").css("propertyname");

propertyname：想要獲取值的CSS屬性


設置指定的 CSS 屬性

【格式】

$("selecter").css("propertyname","value");

propertyname：想要設置值的CSS屬性

value：該屬性的值


設置多個 CSS 屬性

【格式】

$("selecter").css({
    "屬性1":"值1",
    "屬性2":"值2",
    ...
    "屬性N":"值N",
});

尺寸

【設置或返回元素的寬度】

方法名 描述
width() 不包括內邊距、邊框或外邊距
innerWidth() 包括內邊距
outerWidth() 包括內邊距和邊框

【格式】

$("selecter").width();

$("selecter").innerWidth();

$("selecter").outerWidth();

【設置或返回元素的高度】

方法名 描述
height() 不包括內邊距、邊框或外邊距
innerWidth() 包括內邊距
outerWidth() 包括內邊距和邊框

【格式】

$("selecter").height();

$("selecter").innerHeight();

$("selecter").outerHeight();

瞭解更多

jQuery HTML / CSS 方法


jQuery 遍歷

什麼是遍歷？

  • 就是移動
    • 【解釋】用於根據其相對於其他元素的關係來"查找"（或選取）HTML 元素。以某項選擇開始，並沿著這個選擇移動，直到抵達您期望的元素為止。

對DOM 進行遍歷

  • 從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）


祖先【向上遍歷 DOM 樹】

方法名 功能描述 方法返回
parent() 只會向上一級對 DOM 樹進行遍歷 被選元素的直接父元素
parents() 一路向上直到文檔的根元素 (<html>) 被選元素的所有祖先元素
parentsUntil() 介於兩個給定元素之間的所有祖先元素

【格式】

/* parent方法 */
//返回"selecter"的直接父元素
$("selecter").parent();

/* parents方法 */
//返回"selecter"的所有祖先元素
$("selecter").parents();
//返回"selecter"的所有祖先元素中的被選中元素
$("selecter").parents("selecterChosen");

/* parentsUntill方法 */
//返回"selecterStart"到"selecterEnd"中所有祖先元素
$("selecterStart").parentsUntill("selecterEnd");

後代【向下遍歷 DOM 樹】

方法名 功能描述 方法返回
children() 只會向下一級對 DOM 樹進行遍歷 被選元素的所有直接子元素
find() 一路向下直到最後一個後代 被選元素的後代元素

【格式】

/* children方法 */
//返回被選元素的所有直接子元素
 $("selecter").children();
//使用可選參數來過濾對子元素的搜索
 $("selecter").children("selecterChosen");

/* find方法 */
//返回屬於"selecter"後代的所有"selecterChosen"元素
$("selecter").find("selecterChosen");
//返回"selecter"的所有後代
$("selecter").find("*");

同胞【在 DOM 樹中水平遍歷】

方法名 方法返回 方向相反方法
siblings() 被選元素的所有同胞元素
next() 只返回一個元素，被選元素的下一個同胞元素 prev()
nextAll() 被選元素的所有跟隨的同胞元素 prevAll()
nextUntil() 介於兩個給定參數之間的所有跟隨的同胞元素 prevUntil()

【格式】

/* siblings() 方法 */
//返回 "selecter" 的所有同胞元素
$("selecter").siblings();
//返回屬於 "selecter" 的同胞元素中的所有 "selecterChosen" 元素
$("selecter").siblings("selecterChosen");

/* next() 方法 */
//返回 "selecter" 的下一個同胞元素
$("selecter").next();

/* nextAll() 方法 */
//返回 "selecter" 的所有跟隨的同胞元素
$("selecter").nextAll();

/* nextUntil() 方法 */
//返回介於 "selecterStart" 與 "selecterEnd" 元素之間的所有同胞元素
$("selecterStart").nextUntil("selecterEnd");

過濾【縮小搜索元素的範圍】

基本過濾方法

  • 允許您基於其在一組元素中的位置來選擇一個特定的元素。
方法名 方法返回
first() 被選元素的首個元素
last() 被選元素的最後一個元素
eq() 被選元素中帶有指定索引號的元素

【格式】

/* first() 方法 */
//選取首個 "selecterFather" 元素內部的第一個 "selecterSon" 元素
$("selecterFather selecterSon").first();

/* last() 方法 */
//選擇最後一個 "selecterFather" 元素中的最後一個 "selecterSon" 元素
$("selecterFather selecterSon").last();

/* eq() 方法 */
//選取第 index+1 個 "selecter" 元素    (索引號從 0 開始)
$("selecter").eq(index);

其他過濾方法

  • 允許您選取匹配或不匹配某項指定標準的元素。

filter() 方法

  • 允許您規定一個標準。
    • 匹配這個標準的元素：會被從集合中刪除
    • 匹配的元素：會被返回

【格式】

//返回帶有 "selecterChosen" 的所有 "selecter" 元素
$("selecter").filter("selecterChosen");

not() 方法

  • not() 方法與 filter() 相反

  • 允許您規定一個標準。

    • 匹配這個標準的元素：會被返回
    • 匹配的元素：會被從集合中刪除

【格式】

//返回不帶有 "selecterChosen" 的所有 "selecter" 元素
$("selecter").not("selecterChosen");

瞭解更多

jQuery 遍歷方法


jQuery AJAX

啥是AJAX？

  • 與伺服器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
  • AJAX = 非同步 JavaScript 和 XML

jQuery與AJAX有啥關係？

  • jQuery 提供多個與 AJAX 有關的方法。
  • 通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程伺服器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。

AJAX load()方法

  • 從伺服器載入數據，並把返回的數據放入被選元素中。

【格式】

$(selector).load(URL,data,callback);

URL（希望載入的 URL）：必需

data（與請求一同發送的查詢字元串鍵/值對集合）：可選

callback（ load() 方法完成後所執行的函數名稱）：可選

  • 可以設置不同的參數：
    • responseTxt ：包含調用成功時的結果內容
    • statusTXT ：包含調用的狀態
    • xhr ：包含 XMLHttpRequest 對象

AJAX get()/post()方法

  • 通過 HTTP GET 或 POST 請求從伺服器請求數據。

HTTP 請求：GET 與 POST 的區別

GET POST
對指定的資源操作 請求數據 提交要處理的數據
數據能否緩存 可緩存 無法緩存
發送的數據數量 只能發送有限數量的數據 可以發送大量的數據
數據發送位置 在 URL 中發送 在正文主體中發送
安全性 發送的數據不受保護 發送的數據是安全的
數據在 URL 欄中是否公開 公開 不公開
可變大小 2000 個字元 最多允許 8 Mb
主要作用 獲取信息 更新數據
表單提交時編碼 只接受 ASCII 字元 不綁定表單數據類型，並允許二進位和 ASCII 字元

jQuery $.get() 方法

  • 通過 HTTP GET 請求從伺服器上請求數據。

【格式】

$.get(URL,callback);

URL（希望請求的 URL）：必需

callback（請求成功後所執行的函數名）：可選


jQuery $.post() 方法

  • 通過 HTTP POST 請求向伺服器提交數據。

【格式】

$.post(URL,data,callback);

URL（希望請求的 URL）：必需

data（連同請求發送的數據）：可選

callback（請求成功後所執行的函數名）：可選


瞭解更多

jQuery AJAX 方法


結語

【感謝】

感謝菜鳥編程提供學習的平臺!!!

感謝各位讀者能看到最後!!!


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

-Advertisement-
Play Games
更多相關文章
  • 《第一行代碼：Android篇》學習筆記（十一）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，非常 ...
  • 《第一行代碼：Android篇》學習筆記（十）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，非常 ...
  • 《第一行代碼：Android篇》學習筆記（九）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • 《第一行代碼：Android篇》學習筆記（八）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • 《第一行代碼：Android篇》學習筆記（七）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • 《第一行代碼：Android篇》學習筆記（六）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • iOS Widget
    信息爆發時代，有效率有質量地整理視頻、音頻、文字等信息變得尤為重要。會議、講座、採訪、客服電話等場景均需要形成完整的文字記錄材料，音視頻文件也要配有字幕。語音轉文字的智能化，讓信息錄入即時高效。 在直播類、會議類、筆記類的應用中都具備實時語音轉寫功能。例如，在音視頻會議中，可以將發言內容可視化，即時 ...
  • 趙海鵬：如何進行 OpenHarmony 音頻特性架構設計和開發工作
    本期 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）開發者故事，我們特別採訪了 2 月代碼最佳貢獻者、一位接觸 OpenHarmony 1 年左右，2022 年初便完成高難度開發項目的開發者——潤和軟體資深軟體開發工程師趙海鵬。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類