前端筆記知識點整合之jQuery(一)載入函數的區別&對象&操作HTML/CSS&動畫&選擇器

来源:https://www.cnblogs.com/rope/archive/2019/03/31/10632880.html
-Advertisement-
Play Games

一、jQuery簡介 1.0 JavaScript編程比較噁心的地方 噁心1:選擇元素麻煩,全線相容的方法只有getElementById()和getElementsByTagName()兩個。其他的方法是不都相容的。getElementsByClassName()通過類名選擇元素,IE9開始相容。 ...


一、jQuery簡介

1.0 JavaScript編程比較噁心的地方

噁心1:選擇元素麻煩,全線相容的方法只有getElementById()getElementsByTagName()兩個。其他的方法是不都相容的。getElementsByClassName()通過類名選擇元素,IE9開始相容。

噁心2:樣式操作麻煩,得到原生樣式,需要我們自己造輪子getStyle()

噁心3:動畫麻煩,需要我們自己造輪子animate();

噁心4:批量控制麻煩,大量出現的for迴圈語句;排他操作麻煩

噁心5HTML節點操作麻煩

噁心的東西,能用“輪子”來解決,事實上我們已經造了兩個輪子:getStyleanimate

能不能把所有輪子組合起來,成為一個框架呢?jQuery就是這樣的一個東西。

 


 

1.1 簡介

jQueryDOM編程領域的霸主,極大的簡化了原生JavaScriptDOM編程。是免費開源的、語法設計簡單,可以更便捷開發,例如選擇元素、製作動畫效果等功能。

jQuery中含有豐富的輪子,完美解決了選擇元素難、樣式難、動畫難、批量操作難等各種相容問題,讓工程師只需要思考業務,而不必思考細枝末節的相容問題。jQuery是一個js文件,相容多瀏覽器的JavaScript庫(框架)。

優點:使用簡單方便

宗旨:Write Less, Do More.  寫的少,做的多

 


 

1.2 為什麼要學習jQuery

jquery開發簡單、易懂、相容性好(幾乎解決了所有的相容性問題)。

 

1.3 JavaScriptjQuery的關係

JavaScriptjQuery的關係好比父子,JavaScript是父親,jquery是兒子(青出於藍)

 


 

1.4 jQuery版本

 帶有.min標識是經過壓縮js文件,但是代碼和沒壓縮的一樣,不用擔心,項目中都用.min的,因為文件體積小。如要查看源代碼,就用沒壓縮的。

 

在官網下載的有3種版本:

 1.x 相容所有的瀏覽器,PC端開發都用這個

 2.x 不相容IE678的,一般用於移動端

 3.x 是最新的版本,不相容IE678,一般用在移動端

 

下載的時候有兩個選擇:

所有jQuery版本下載地址:http://code.jquery.com/jquery/


1.5 jQuery使用

1、先引入jQuery文件包(外部JS文件)

 

1、換行在寫script標簽,在裡面寫js代碼

2、使用$()方法用什麼就選擇什麼,不用去寫繁瑣的獲取元素的JS代碼。例如:$('div')

 

$()函數是jQuery核心函數,query是選擇的意思,也就是說jQuery的核心招牌動作就是選擇元素:

 $('.box ul li').hide(1500);

 

語法:

 $('選擇器');   

註意:

1、選擇的就是符合條件的元素,而不是一個

2、$('選擇器')裡面的選擇器和CSS選擇器完全一致

$也可以用jQuery代替,它們是同一個函數。

 $('選擇器');

等價於:

 jQuery('選擇器');   

 


二、載入函數的區別

2.1 JavaScript入口函數

語法:

 window.onload = function(){

 }

註意:不能寫多個,如果有多個入口函數,只執行後面寫的。

  


2.2jQuery入口函數

語法:

$(function(){});

註意:可以同時寫多個,並且按順序執行。

 

【建議】:

 入口一個足夠,不建議寫多個,JSjQuery入口函數是通用的。

 


三、jQuery對象

3.1 jQuery對象不是原生JS對象

$()函數,能夠根據CSS選擇元素,比如:

 

 $("#box")

 等於

 jQuery("#box")

 

註意:選出來的是一個類數組對象,jQuery自己的對象,這個jQuery對象後面不能是原生JS的語法:

  $('#box').style.backgroundColor = 'green';

因為.style.backgroundColor= 'green';是原生JS語法,$()的對象是jQuery,不能混用。

如果要把jQuery對象,轉為原生JS對象,加[0]get()方法即可。

 $('#box')[0].style.backgroundColor = 'green';

 

 $('#box').get(0).style.backgroundColor = 'green';

 


3.2原生JS對象和jQuery之間互相轉換

jQuery對象→原生JS對象:方法就是根據下標獲取其中一項元素。

 

 $('p').innerHTML = '你好!';

 $('p')[0].innerHTML = '你好!';

 $('p')[0].html('你好');

 

原生JS對象→jQuery對象:將原生JS對象放在$()中即可。

 var oBox = document.getElementById('box');
 //$(oBox).style.backgroundColor = 'blue';
 $(oBox).hide()

 


3.3引號的問題

 $('選擇器')

註意引號不能丟,在jQuery世界中,只有三個對象不能加引號,其他必須加引號:

 $(this)

 $(document)

 $(window)

 

$()獲得的元素一個類數組的對象,由一些自定義屬性和方法組成,還要我們獲取原生JS的元素對象。

可以通過兩個方法獲取原生元素對象的長度:

第一個:length屬性,可以返回內部元素的長度,通過下標獲取某一項元素對象

 console.log($('p').length);

 console.log($('p')[0]);

 

第二個:size()方法,可以返回內部元素的長度

 console.log($('p').size());

 

index()方法:能夠返回元素在結構中同級元素中的位置(下標)。

 console.log($('#box').index());

 

 


四、jQuery操作CSS樣式

eq() 是遍歷方法,並且可以通過下標選擇某個元素

jquery中操作CSS,全都使用css()這個方法

 

【中文語法解釋】:

 1、獲取CSS屬性值:$('選擇器').css('屬性名');    一個參數表示獲取屬性值

 2、單屬性CSS設置:$('選擇器').css('屬性名','屬性值');

 3、多屬性CSS設置:$('選擇器').css({'屬性名':'屬性值','屬性名':'屬性值'});

 

【代碼語法解釋】:

 1、獲取CSS屬性值:$('選擇器').css('width');    一個參數表示獲取屬性值

 2、單屬性CSS設置:$('選擇器').css('width','100px');

 3、多屬性CSS設置:$('div').css({'width':'200px','height':'200px'});

 

屬性名屬性值之間用“:”隔開,每一組CSS用逗號隔開,最外層用({})包住,是JSON的格式。

 

其實CSS屬性可以不寫引號,但是如果遇到“-”就必須要寫上。但是不建議不寫,規範來說還是全部加上引號,避免出錯。

 

多屬性可以換行(下圖為例)

 

CSS運算:

 $('div').css('width','-=20px');

 $('div').css('width','+=20px');

 


五、jQuery操作HTML

5.1jQuery操作HTML標簽內容

通過html()方法可以獲取或設置HTML標簽的內容。

 獲取標簽內容:$('選擇器').html();

 設置標簽內容:$('選擇器').html('需要設置的內容');

 


5.2jQuery操作HTML標簽屬性

屬性的英文單詞:attributejQuery把複雜的單詞簡化為attr

 操作HTML標簽屬性的方法:attr()

 

語法:

 獲取屬性值:attr('屬性名');

 單屬性設置:attr('屬性名','屬性值');

 多屬性設置:attr({'屬性名':'屬性值','屬性名':'屬性值'});

 

註意:attr()方法和css()方法語法完全一致。

 


六、jQuery動畫

6.1 jQuery基礎動畫

 hide()    隱藏

 show()    顯示

 toggle()  顯示和隱藏的切換

以上3種方法,預設是沒有動畫的,需要添加動畫,可以在括弧內填寫毫秒參數控制動畫時間。

 


6.2 jQuery滑動動畫

 slideUp()     向上滑動隱藏

 slideDown()   向下滑動顯示

 slideToggle() 滑動顯示和隱藏的切換

 

以上3種方法,預設有動畫,也可以毫秒控制動畫時間

 

註意:如果給img標簽設置了滑動動畫,就必須給img標簽設寬度或高度,否則就變對角線動畫了。

 


6.3 jQuery透明度動畫

 fadeIn()       淡入顯示

 fadeOut()      淡出隱藏

 fadeToggle()   淡入淡出之間切換

 fadeTo(時間,透明度值)        設置透明度,透明度的值0~1之間

 

$('button').eq(0).click(function(){
   $('div').fadeOut(2000);  //淡出隱藏
});
$('button').eq(1).click(function(){
   $('div').fadeIn(2000); //淡入顯示
});
$('button').eq(2).click(function(){
   $('div').fadeToggle(1000);  //淡入淡出切換
});
$('button').eq(3).click(function(){
   $('div').fadeTo(1000,0.5);  //在1秒鐘設置透明度為0.5
});

註意所有動畫方法都有回調函數fadeIn(speed,callback);


七、基本選擇器

jQuery$()是萬能選擇器,絕大部分選擇器都是和CSS選擇器一樣。

 


八、篩選選擇器和方法

8.1篩選選擇器

篩選選擇器主要通過特定的過濾規則篩選除所需要的元素,該選擇器都是“:”開頭,並且寫在$()函數內。

 

$('p:first').css('background','skyblue');  //選中第一個p標簽
$('p:last').css('background','skyblue');  //選中最後一個p標簽
$('p:even').css('background','skyblue');  //選中所有偶數的p標簽
$('p:odd').css('background','orange');    //選中所有偶數的p標簽
$('p:gt(3)').css('background','orange');  //選中大於指定編號的p標簽
$('p:lt(3)').css('background','orange');  //選中小於指定編號的p標簽
$('p:eq(3)').css('background','orange');    //選中下標為3的p標簽,索引值從0開始
$('p:not(.op)').css('background','orange');  //選中所有p標簽,但排除類名為.op的

 


 

8.2篩選方法

 first()   選中第一個元素

 last()    選中最後一個元素

 eq(3)     選中指定下標的元素

 

 $('p').first().css('background','orange');    //選中第一個p標簽
 $('p').last().css('background','orange');    //選中最後一個p標簽
 $('p').eq(3).css('background','orange');    //選中下標為3的p標簽

九、節點關係選擇器

9.1三巨頭:父、子、兄

 

 $('div').parent()     選中當前div元素的父親

 $('div').children()   選中當前div元素的兒子

 $('div').siblings()   選中當前div的所有兄弟,不包括自己

 

註意,以上3個方法中,都可以填參數,參數都是選擇器

 $(this)      代表當前對象的事件源(和jsthis一樣)

 


9.2其他節點關係

find():找的是元素的後代的一些元素,根據參數的選擇器去選擇。

 $('.box').find('li').css("border","1px solid red"); //選中.box所有的後代li

 

next():選中的是當前元素的下一個元素,必須是同級的。

 $('.box2').next().css("border","1px solid red");   //選中box2下一級兄弟

 

nextAll():選中的是當前元素後面的所有兄弟元素。內部可以傳參數,選擇符合選擇器的後面的兄弟。

 $('.box2').nextAll().css("border","1px solid red"); //選中box2下一級所有的兄弟

 

prev():選中的是當前元素的上一個元素,必須是同級的。

 $('.box2').prev().css("border","1px solid green");  //選中box2上一級兄弟

 

prevAll():選中的是當前元素前面的所有兄弟元素。內部可以傳參數,選擇符合選擇器的後面的兄弟

 $('.box2').prevAll().css("border","1px solid green"); //選中box2上一級所有兄弟

 

parents():選擇的是包含html標簽在內的所有祖先元素。內部可以傳參數,選擇符合選擇器的祖先元素。

 $('.box ul li').parents().css("border","1px solid #000"); //選中li標簽所有的祖先元素

 $('.box ul li').parents('.box1').css('border','1px solid red'); //選中li標簽.box祖先元素

 


十、鏈式編程

但凡針對同一個目標進行所有的操作,都可以通過“點”語法來連續寫,這種叫做“鏈式編程”。

 


十一、索引值index()

在jQuery中用選擇器選出來的元素都有一個index()方法,這個方法可以獲取當前元素在父級中的下標(索引值)

(自己家的孩子排行大小,根隔壁老王家的孩子排行大小沒關係)

 

$('ul li').click(function(){
   alert($(this).index()); //獲取當前被點擊那個li元素在父級中的下標
   console.log($('ul li').eq(8));  //把全部選擇的元素進行大排隊
});

十二、jQuery操作class

雖然attr()方法也可以操作class屬性,但是jQuery專門為我們封裝了一些操作class的方法,更方便更直觀。

 

 addClass()     添加class

 removeClass()  刪除class

 toggleClass()  切換類,刪除和添加之間切換

 hasClass()     判斷是否有class類,true表示有,false表示沒有

以上4個方法的參數,都是class類名,並且不會覆蓋原有的class類名,除非類名相同。

註意:圓括弧內的只能是class類名,不能加“.”

 addClass('box');   正確的

 addClass('.box');  錯誤的

 


 

十三、事件監聽方法

 hover()方法集成了滑鼠移入和移出兩個事件。

【語法】:

$('div').hover(function(){
   //滑鼠移入執行的事情
},function(){
   //滑鼠離開執行的事情
});

【語法2】:

$('div').hover(function(){
   //滑鼠移入移出兩個事件執行的代碼
});

參數解釋:

 hover(參數1,參數2);

參數1和參數2都是匿名函數function(){},如果只寫一個參數,表示滑鼠移入和移出兩個事件。

 


十四、animate()自定義動畫

animate()方法用於創建CSS屬性集的自定義動畫,通過CSS樣式將元素從一個狀態慢慢的變化到另一種狀態的過程。

animate()是動畫的意思,原生JS動畫必須依靠setInterval,根據步長和間隔時間操作運動。animate()方法內部用setInterval已經封裝好了,不用自己算步長。

 

14.1 animate()語法

 $(選擇器).animate({css樣式},時間,運動方式,回調函數);

 

 參數1CSS屬性名:屬性值,JSON個數{'width':500}

 參數2:動畫執行總時間,毫秒

 參數3:動畫的運動方式,參數要用引號,例如:linear是勻速運動

 參數4:回調函數function(){},動畫完畢後,執行的函數

以上參數,除了參數1,其他都是可選的。


 

14.2可以參與運動的屬性

http://www.w3school.com.cn/jquery/effect_animate.asp

 

參考上面的鏈接,裡面羅列了所有能運動的屬性,有數值的都能參與運動。

我們關心不能參與運動的有哪些?

 1background-color 背景色,但是CSS3可以

 2background-position背景定位,但是CSS3可以

 3、大部分CSS3屬性都不能動畫,border-radius除外


14.3動畫隊列

jQuery中有一個機制,叫“動畫隊列”。

什麼叫“隊列”,比喻:食堂打飯,先進的先出

什麼叫“棧”,比喻:羽毛球筒,先進的後出

 

同一個元素animate的時候,會按照順序執行

$('div').animate({'left':500},2000);
$('div').animate({'top':500},2000);
$('div').animate({'left':0},2000);
$('div').animate({'top':0},2000);

上面四段動畫等價於這一行代碼:

同一個元素多次打點調用動畫方法,動畫會自動排成隊列,誰先寫,誰先執行。

$('div').animate({'left':500},2000).animate({'top':500},2000).animate({'left':0},2000).animate({'top':0},2000);

下麵的動畫是同時執行,不會按順序執行:

$('div').animate({'left':500,'top':300},2000);

//非動畫語句會同時執行
$('div').eq(0).animate({"left":500},1000);
$('div').eq(1).css({"background-color":"pink"});

animate是非同步的語句,JS解析動畫的時候,不會死等動畫。


14.4非同步語句和回調函數

animate動畫方法是一個非同步語句,也可以寫回調函數,描述動畫結束後可以做什麼。

 $('div').animate({'width':500},2000,'linear',function(){

    //動畫執行完畢後的回調函數

    $(this).css('background-color','skyblue');

 });

 


14.5 delay()延遲動畫

所有的jQuery動畫方法都可以用delay(),表示動畫不是立即執行,需要等待一段時間。

參數:規定延遲的時間

 

$('div').delay(1000).slideUp();
$('div').delay(1000).slideDown();
$('div').delay(2000).animate({"left":500},1000);

上面寫法等價於:

$('div').delay(1000).slideUp().delay(1000).slideDown().delay(2000).animate({"left":500},1000);

只要是動畫方法都可以使用delay()延遲。


 

14.6 stop()停止動畫方法

jQuery所有動畫採取的都是排隊機制的播放形式,如果相繼觸發10次動畫,那麼沒有執行的動畫會依次排隊等待執行。

 

stop():可以清空動畫的排隊機制,一定要寫在執行動畫的前面,命令運動的元素停止。

 stop(是否清空動畫隊列,是否完成當前動畫)

 

第一個參數:表示是否清空動畫隊列,true表示清空,false表示不清空

第二個參數:表示是否完成當前動畫,true表示立即完成,false表示立即停止不動

兩個參數預設不寫:都是false

 

$('button').eq(0).click(function(){
   $('div').animate({'left':1000}, 2000);
   $('div').animate({'top':500}, 1500);
   $('div').animate({'left':0}, 1500);
   $('div').animate({'top':0}, 1500);
});
//不清空動畫隊列,立即停止當前動畫,執行後面隊列的動畫
$('button').eq(1).click(function(){
   $('div').stop(); //等價於stop(false,false)
});
//清空動畫隊列,立即停止當前動畫,盒子留在此時的位置(常用)
$('button').eq(2).click(function(){
   $('div').stop(true); //等價於stop(true,false)
});
//清空動畫隊列,立即停止當前動畫,並且瞬間完成當前動畫
$('button').eq(3).click(function(){
   $('div').stop(true,true);
});
//不清空動畫隊列,立即停止當前動畫,並且瞬間完成當前動畫,繼續執行後面的動畫
$('button').eq(4).click(function(){
   $('div').stop(false,true);
});
//不清空動畫隊列,立即停止當前動畫,並且瞬間完成當前動畫,繼續執行後面的動畫
$('button').eq(5).click(function(){
     $('div').finish(); //finish()瞬間完成所有動畫隊列!
});

當一個元素身上積累了很多動畫,不經意就積累了,我們稱為“流氓”。

希望新的動畫觸發時,前面這個動畫全部清空,立即停止,防止用戶頻繁觸發事件

方法1:用stop(),清空動畫隊列

 

//每次點擊按鈕,都會讓div增加一個動畫隊列
$('button').eq(0).click(function(){
   //先清空所有動畫隊列,然後執行新的動畫
   $('div').stop(true).animate({'left':0}, 2000);
});
$('button').eq(1).click(function(){
   //先清空所有動畫隊列,然後執行新的動畫
   $('div').stop(true).animate({'left':1000}, 2000);
});

14.7 is()方法

方法2:節流方法,判斷元素是否正在運動過程中,如果是,就不執行後面的操作;如果不是,就執行後面的動畫。

元素都有一個方法叫is() 它可以判斷是否處於某種狀態。

is表示“是不是”,而不是“是”,表示檢測某一個元素否具備某種狀態,返回布爾類型。

$(this).is('.t'); //判斷當前被點擊的p是不是有.t的類名,是就返回true
$(this).is('#t'); //判斷當前被點擊的p是不是有#t的id,是就返回true
$(this).is('p:odd'); //判斷當前被點擊的p是不是奇數,是就返回true
$(this).is('p:lt(3)'); //判斷當前被點擊的p下標是不是小於3
$(this).is('p:visible'); //判斷當前被點擊的p是不是可見

 

 $('p').is(':animated');  判斷這個元素是否正在運動中,返回truefasle

判斷是否正在運動中,可以防止動畫的積累:

只要動畫正在進行,那麼我不接受新的命令

和之前學stop()不一樣,動畫正在運行中,立即停止當前動畫,執行新的命令。

$('button').eq(0).click(function(){
   if($('div').is(':animated')){
       return; //如果當前這個div是在運動,直接return結束後面代碼的執行
   }
   $('div').animate({'left':0}, 2000);
});
$('button').eq(1).click(function(){
   if($('div').is(':animated')){
       return; //如果當前這個div是在運動,直接return結束後面代碼的執行
   }
   $('div').animate({'left':1000}, 2000);
});

 

簡化後的代碼:

$('button').eq(0).click(function(){
   if(!$('div').is(':animated')){
       $('div').animate({'left':0}, 2000);
   }
});
$('button').eq(1).click(function(){
   if(!$('div').is(':animated')){
       $('div').animate({'left':1000}, 2000);
   }
});

 


十五、jQuery each()遍歷方法

jQueryeach()方法,表示遍歷,$()選擇出來的元素,把每個被選中的元素匹配,可以認為是一個隊列,那麼each就遍歷這個隊列中的每一個元素,遍歷之後就可以執行一些操作:

each 在英語表示“每一個”

 $('div p').each(function(index,ele){

     對每一個元素的操作

 })

 

【參數解釋】:

 index  當前被選中元素的編號(索引值)

 ele    當前被選中的元素(也可以用this代替),如果用this代替,可以不寫這個參數

 

$('div').each(function(index,ele){
   //index就是每次進來遍歷的元素下標
   	   

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

-Advertisement-
Play Games
更多相關文章
  • 省市區三級數據(含港澳台釣魚島以及經濟開發區)和經緯度信息,準確有效! ...
  • 一、系統整體性能監測工具:uptime uptime命令用於查看伺服器運行了多長時間以及有多少個用戶登錄,快速獲知伺服器運行的負載情況。 load average,顯示了最近1,5,15分鐘的負荷情況。 它的值代表等待CPU處理的進程數,如果CPU沒有時間處理這些進程,load average值會升 ...
  • 在面試中被問到這樣的題目,當時被問蒙了,後來查閱了一下相關資料搞懂了一些,記錄一下。 題目:有一堆的用戶消費數據,欄位為id、城市、性別、消費總額等,要求選取每個城市消費總額的Top N。面試官提示,可以用python,也可以用任何sql語言。 這裡記錄的是Oracle的做法。查看表的信息: sel ...
  • 主界面代碼 主活動代碼: ...
  • Android開發中有三種主要的方式用於設置View的點擊事件,1、創建內部類;2、主類中實現OnClickListener介面;3、使用匿名內部類。這三種方式都用到了OnClickListener介面,只是不同形式而已。其中OnClickListener是監聽View點擊事件的介面,介面中定義控制項 ...
  • 前言 最近筆者在複習以前基礎知識,發現很多細的知識點還是需要重新再總結一番。本文對flex佈局進行圖解說明,以後忘了的同學可以隨時過來查看,歡迎轉載,煩請註明出處。 主體 萬丈高樓平地起,熟悉flex,先來瞭解下以下7種css屬性 1. 2. 3. 4. 5. 6. 7. 下麵我們就對每個屬性進行詳 ...
  • 一.介紹 在前端項目頁面開發中,尤其是H5頁面開發,我們常常要適配各種解析度的屏幕,才能讓用戶獲得最好的體驗效果.pc也是如此,很多頁面是一屏,也是要適配各種尺寸的解析度.這時候我們就需要對各種解析度的手機電腦進行適配.那麼用什麼適配方案比較好呢?下麵給大家介紹一種我覺得比較好的適配方案. 二、分辨 ...
  • 本文轉載自:https://blog.csdn.net/xiaogeldx/article/details/85455011 JavaScript的math對象 math方法 sqrt:開方 abs:絕對值 PI:π pow:x的y次方 round:取整 floor:向下 ceil:向上 max:最 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...