Jquery（四）——動態篇

来源:http://www.cnblogs.com/syr-IT/archive/2017/09/15/7526343.html
-Advertisement-
Play Games

jQuery中隱藏元素的hide方法 讓頁面上的元素不可見，一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態的佈局，如果在代碼執行的時候，一般是通過js控制元素的style屬性，這裡jQuery提供了一個快捷的方法.hide()來達到這個效果 $elem.hide( ...


jQuery中隱藏元素的hide方法

讓頁面上的元素不可見，一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態的佈局，如果在代碼執行的時候，一般是通過js控制元素的style屬性，這裡jQuery提供了一個快捷的方法.hide()來達到這個效果

$elem.hide()

提供參數：

.hide( options )

當提供hide方法一個參數時，.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作

快捷參數：

.hide("fast / slow")

這是一個動畫設置的快捷方式，'fast' 和 'slow' 分別代表200和600毫秒的延時，就是元素會執行200/600毫秒的動畫後再隱藏

註意：

jQuery在做hide操作的時候，是會保存本身的元素的原始屬性值，再之後通過對應的方法還原的時候還是初始值。比如一個元素的display屬性值為inline，那麼隱藏再顯示時，這個元素將再次顯示inline。一旦透明度 達到0，display樣式屬性將被設置為none，這個元素將不再在頁面中影響佈局

jQuery中顯示元素的show方法

css中有display:none屬性，同時也有display:block，所以jQuery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

看一段代碼：使用上一致，結果相反

$('elem').hide(3000).show(3000)

讓元素執行3秒的隱藏動畫，然後執行3秒的顯示動畫。

show與hide方法是非常常用的，但是一般很少會基於這2個屬性執行動畫，大多情況下還是直接操作元素的顯示與隱藏為主

註意事項：

  • show與hide方法是修改的display屬性，通過是visibility屬性佈局需要通過css方法單獨設置
  • 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式
  • 如果讓show與hide成為一個動畫，那麼預設執行動畫會改變元素的高度，高度，透明度

jQuery中顯示與隱藏切換toggle方法

show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然後調用其對應的處理方法。比如顯示的元素，那麼就要調用hide，反之亦然。 對於這樣的操作行為，jQuery提供了一個便捷方法toggle用於切換顯示或隱藏匹配元素

基本的操作：toggle();

這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。

  • 如果元素是最初顯示，它會被隱藏
  • 如果隱藏的，它會顯示出來

display屬性將被儲存並且需要的時候可以恢復。如果一個元素的display值為inline，然後是隱藏和顯示，這個元素將再次顯示inline

提供參數：.toggle( [duration ] [, complete ] )

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

直接定位：.toggle(display)

直接提供一個參數，指定要改變的元素的最終效果

其實就是確定是使用show還是hide方法

if ( display === true ) {

  $( "elem" ).show();

} else if ( display === false ) {

  $( "elem" ).hide();

}

 

 

 

 

 

jQuery中下拉動畫slideDown

對於隱藏的元素，在將其顯示出來的過程中，可以對其進行一些變化的動畫效果。之前學過了show方法，show方法在顯示的過程中也可以有動畫，但是.show()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這裡將要學習一個新的顯示方法slideDown方法

.slideDown()：用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下麵部分滑下去，彌補了顯示的方式

常見的操作，提供一個動畫是時間，然後傳遞一個回調，用於知道動畫是什麼時候結束

.slideDown( [duration ] [, complete ] )

持續時間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字元串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字元串，或者這個duration參數被省略，那麼預設使用400 毫秒的延時。

具體使用：

$("ele").slideDown(1000, function() {

    //等待動畫執行1秒後,執行別的動作....

});

 

 

 

註意事項：

  • 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none
  • 如 果提供回調函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那麼要非常註意，回調函數會在每一個元素執行完動畫後都執行一次，而不是這組 動畫整體才執行一次

jQuery中上捲動畫slideUp

對於顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這裡將要學習一個新的顯示方法slideUp方法

最簡單的使用：不帶參數

$("elem").slideUp();

這個使用的含義就是：找到元素的高度，然後採用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面佈局了

帶參數：

.slideUp( [duration ] [, easing ] [, complete ] )

同樣可以提供一個時間，然後可以使用一種過渡使用哪種緩動函數，jQuery預設就2種，可以通過下載插件支持。最後一個動畫結束的回調方法。

因為動畫是非同步的，所以要在動畫之後執行某些操作就必須要寫到回調函數裡面，這裡要特別註意

jQuery中上捲下拉切換slideToggle

slideDown與slideUp是一對相反的方法。需要對元素進行上下拉捲效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素

基本的操作：slideToggle();

這是最基本的操作，獲取元素的高度，使這個元素的高度發生改變，從而讓元素里的內容往下或往上滑。

提供參數：.slideToggle( [duration ] ,[ complete ] )

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然後出發回調函數

同時也提供了時間的快速定義，字元串 'fast' 和 'slow' 分別代表200和600毫秒的延時

slideToggle("fast") 

slideToggle("slow") 

註意：

  • display屬性值保存在jQuery的數據緩存中，所以display可以方便以後可以恢復到其初始值
  • 當一個隱藏動畫後，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面佈局

 

jQuery中淡出動畫fadeOut

讓元素在頁面不可見，常用的辦法就是通過設置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這裡要提一個透明度的方法，設置元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。

fadeOut()函數用於隱藏所有匹配的元素，並帶有淡出的過渡動畫效果

所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。

.fadeOut( [duration ], [ complete ] )

通過不透明度的變化來實現所有匹配元素的淡出效果，併在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

字元串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字元串，或者這個duration參數被省略，那麼預設使用400毫秒的延時

jQuery中淡入動畫fadeIn

fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結果相反

.fadeIn( [duration ], [ complete ] )

  • duration：指定過渡動畫運行多長時間(毫秒數)，預設值為400。該參數也可以為字元串"fast"(=200)或"slow"(=600)。
  • 元素顯示完畢後需要執行的函數。函數內的this指向當前DOM元素。

fadeIn()函數用於顯示所有匹配的元素，並帶有淡入的過渡動畫效果。

註意：

  • 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%
  • 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見

jQuery中淡入淡出切換fadeToggle

fadeToggle()函數用於切換所有匹配的元素，並帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slideToggle 也是類似的處理方式

fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。

常用語法：.fadeToggle( [duration ] ,[ complete ] )

可選的 duration 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成後所執行的函數名稱。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

 

jQuery中淡入效果fadeTo

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區間要麼是0，要麼是1

fadeIn：淡入效果，內容顯示，opacity是0到1

fadeOut：淡出效果，內容隱藏，opacity是1到0

如果要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？

如果不考慮CSS3，我們用JS實現的話，基本就是通過定時器，在設定的時間內一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設置這麼舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位

語法

.fadeTo( duration, opacity ,callback)

必需的 duration參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。

jQuery中toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。
例如：

  • 改變樣式display為none
  • 設置位置高度為0
  • 設置透明度為0

都能達到這個目的，並且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區別：

  • toggle：切換顯示與隱藏效果
  • sildeToggle：切換上下拉捲滾效果
  • fadeToggle：切換淡入淡出效果

當然細節上還是有更多的不同點:

toggle與slideToggle細節區別：

  • toggle：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
  • slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）

 

jQuery中動畫animate(上)

有些複雜的動畫通過之前學到的幾個動畫函數是不能夠實現，這時候就需要強大的animate方法了

操作一個元素執行3秒的淡入動畫，對比一下2組動畫設置的區別

$(elem).fadeOut(3000)  

$(elem).animate({   

    opacity:0

},3000)

 

 

 

 

顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執行動畫

語法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )

.animate( properties, options )

.animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對類似，除了屬性範圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合併成一個對象傳遞了

參數分解：

properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別註意所有用於動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動畫效果的。註意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。

特別註意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用

.animate({

    left: 50,

    width: '50px'   

    opacity: 'show',  

    fontSize: "10em",

}, 500);

 

 

 

 

 

 

除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定製隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({

    width: "toggle"

});

 

 

 

如果提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

.animate({ 

    left: '+=50px'

}, "slow");

 

 

 

duration時間

動畫執行的時間，持續時間是以毫秒為單位的；值越大表示動畫執行的越慢，不是越快。還可以提供'fast' 和 'slow'字元串，分別表示持續時間為200 和 600毫秒。

easing動畫運動的演算法

jQuery庫中預設調用 swing。如果需要其他的動畫演算法，請查找相關的插件

complete回調

動畫完成時執行的函數，這個可以保證當前動畫確定完成後發會觸發

jQuery中動畫animate(下)

animate在執行動畫中，如果需要觀察動畫的一些執行情況，或者在動畫進行中的某一時刻進行一些其他處理，我們可以通過animate提供的第二種設置語法，傳遞一個對象參數，可以拿到動畫執行狀態一些通知

.animate( properties, options )

options參數

  • duration - 設置動畫執行的時間
  • easing - 規定要使用的 easing 函數，過渡使用哪種緩動函數
  • step：規定每個動畫的每一步完成之後要執行的函數
  • progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念
  • complete：動畫完成回調

其中最關鍵的一點就是：

如果多個元素執行動畫，回調將在每個匹配的元素上執行一次，不是作為整個動畫執行一次

列出常用的方式：

$('#elem').animate({

    width: 'toggle',  

    height: 'toggle'

  }, {

    duration: 5000,

    specialEasing: {

      width: 'linear',

      height: 'easeOutBounce'

    },

    complete: function() {

      $(this).after('<div>Animation complete.</div>');

    }

  });

 

 

 

 

 

 

 

 

 

 

 

 

jQuery中停止動畫stop

動畫在執行過程中是允許被暫停的，當一個元素調用.stop()方法，當前正在運行的動畫（如果有的話）立即停止

語法：

.stop( [clearQueue ], [ jumpToEnd ] )

.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop還有幾個可選的參數，簡單來說可以這3種情況

  • .stop(); 停止當前動畫，點擊在暫停處繼續開始
  • .stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麼在隊列中的動畫其餘被刪除並永遠不會運行
  • .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值

簡單的說：參考下麵代碼、

$("#aaron").animate({

    height: 300

}, 5000)

$("#aaron").animate({

    width: 300

}, 5000)

$("#aaron").animate({

    opacity: 0.6

}, 2000)

 

 

 

 

 

 

 

 

  1. stop()：只會停止第一個動畫，第二個第三個繼續
  2. stop(true)：停止第一個、第二個和第三個動畫
  3. stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態 

jQuery中停止動畫stop

動畫在執行過程中是允許被暫停的，當一個元素調用.stop()方法，當前正在運行的動畫（如果有的話）立即停止

語法：

.stop( [clearQueue ], [ jumpToEnd ] )

.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop還有幾個可選的參數，簡單來說可以這3種情況

  • .stop(); 停止當前動畫，點擊在暫停處繼續開始
  • .stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麼在隊列中的動畫其餘被刪除並永遠不會運行
  • .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值

簡單的說：參考下麵代碼、

$("#aaron").animate({

    height: 300

}, 5000)

$("#aaron").animate({

    width: 300

}, 5000)

$("#aaron").animate({

    opacity: 0.6

}, 2000)

 

 

 

 

 

 

 

 

  1. stop()：只會停止第一個動畫，第二個第三個繼續
  2. stop(true)：停止第一個、第二個和第三個動畫
  3. stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態 

 

jQuery中查找數組中的索引inArray

在PHP有in_array()判斷某個元素是否存在數組中，JavaScript卻沒有，但是jQuery封裝了inArray()函數判斷元素是否存在數組中。註意了：在ECMAScript5已經有數據的indexOf方法支持了，但是jQuery保持了版本向下相容，所以封裝了一個inArray方法

jQuery.inArray()函數用於在數組中搜索指定的值，並返回其索引值。如果數組中不存在該值，則返回 -1。

語法：

jQuery.inArray( value, array ,[ fromIndex ] )

用法非常簡單，傳遞一個檢測的目標值，然後傳遞原始的數組，可以通過fromIndex規定查找的起始值，預設數組是0開始

例如：在數組中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4

註意：

如果要判斷數組中是否存在指定值，你需要通過該函數的返回值不等於(或大於)-1來進行判斷

jQuery中去空格神器trim方法

頁面中，通過input可以獲取用戶的輸入值，例如常見的登錄信息的提交處理。用戶的輸入不一定是標準的，輸入一段密碼：'  1123456  "，註意了： 密碼的前後會留空，這可能是用戶的無心的行為，但是密碼確實又沒錯，針對這樣的行為，開發者應該要判斷輸入值的前後是否有空白符、換行符、製表符這樣明顯的無意義的輸入值。

jQuery.trim()函數用於去除字元串兩端的空白字元

這個函數很簡單，沒有多餘的參數用法

需要註意：

  • 移除字元串開始和結尾處的所有換行符，空格(包括連續的空格)和製表符（tab）
  • 如果這些空白字元在字元串中間時，它們將被保留，不會被移除

jQuery中DOM元素的獲取get方法

jQuery是一個合集對象，如果需要單獨操作合集中的的某一個元素，可以通過.get()方法獲取到

以下有3個a元素結構：

<a>1</a>

<a>2</a>

<a>3</a>

 

 

 

通過jQuery獲取所有的a元素合集$("a")，如果想進一步在合集中找到第二2個dom元素單獨處理，可以通過get方法

語法：

.get( [index ] )

註意2點

  1. get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象
  2. get方法是從0開始索引

所以第二個a元素的查找： $(a).get(1)

負索引值參數

get方法還可以從後往前索引，傳遞一個負索引值，註意的負值的索引起始值是-1

同樣是找到第二元素，可以傳遞 $(a).get(-2) 

 

jQuery中DOM元素的獲取index方法

get方法是通過已知的索引在合集中找到對應的元素。如果反過來，已知元素如何在合集中找到對應的索引呢？

.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計數。

語法：參數接受一個jQuery或者dom對象作為查找的條件

.index()

.index( selector )

.index( element )

 

 

 

如果不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置

  • 如果在一組元素上調用 .index() ，並且參數是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對於原先集合的位置
  • 如果參數是一個選擇器， .index() 返回值就是原先元素相對於選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1

簡單來說：

<ul>

    <a></a>

    <li id="test1">1</li>

    <li id="test2">2</li>

    <li id="test3">3</li>

</ul>

 

 

 

 

 

 

$("li").index() 沒有傳遞參數，反正的結果是1，它的意思是返回同輩的排列循序，第一個li之前有a元素,同輩元素是a開始為0，所以li的開始索引是1

如果要快速找到第二個li在列表中的索引,可以通過如下2種方式處理

$("li").index(document.getElementById("test2")) //結果：1$("li").index($("#test2"))  //結果:1


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

-Advertisement-
Play Games
更多相關文章
  • 深入理解繼承
    學習怎樣創建對象是理解面向對象編程的第一步，第二步是理解繼承。在傳統的面向對象編程語言中，類繼承其他類的屬性。然而，JS的繼承方式與傳統的面向對象編程語言不同，繼承可以發生對象之間，這種繼承的機制是我們已經熟悉的一種機制：原型。 1.原型鏈接和Object.prototype js內置的繼承方式被稱 ...
  • AJAX的工作原理
    1：在講ajax的原理之前我們先簡單的瞭解一下ajax的背景 可否認，ajax技術的流行得益於google的大力推廣，正是由於google、gmail等對ajax技術的廣泛應用，才催生了ajax的流行。而這也讓微軟感到無比的尷尬，因為早在97年，微軟便已經發明瞭ajax中的關鍵技術，並且在99年IE ...
  • css編寫註意事項（不定時更新）
    CSS的編寫是需要積累的，而一個好的css編寫習慣對我們將來的成長是非常有利的，我會把我平時看到的或者遇到的會不定時的更新到這裡，不時翻一下，但求有所進步。 如果各位看官也有看法和建議，評論下，我也會更新進來，謝謝！ 1、css選擇符是從右到左進行比配的，例如 #nav li，查找時先會去找到所有的 ...
  • 一些常用的正則表達式（from web）
    一、校驗數字的表達式數字：^[0-9]*$n位的數字：^\d{n}$至少n位的數字：^\d{n,}$m-n位的數字：^\d{m,n}$零和非零開頭的數字：^(0|[1-9][0-9]*)$非零開頭的最多帶兩位小數的數字：^([1-9][0-9]*)+(.[0-9]{1,2})?$帶1-2位小數的正數 ...
  • 用canvas繪製android機器人
    大寫的尷尬 …… <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用canvas繪製android機器人</title></head><body> <canvas id="myCanvas"></canvas> ...
  • 用JS實現氣泡效果
    氣泡跟隨滑鼠移動，併在每次點擊時產生不同的變化 <!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 簡單的氣泡效果 < ...
  • h5的本地存儲——sessionStorage,localStorage
    HTML5 提供了兩種在客戶端存儲數據的新方法： localStorage - 沒有時間限制的數據存儲 sessionStorage - 針對一個 session 的數據存儲 SessionStorage, LocalStorage, Cookie這三者都可以被用來在瀏覽器端存儲數據，localSt ...
  • angular使用Md5加密
    一、現象 用戶登錄時需要記住密碼的功能，在前端需要對密碼進行加密處理，增加安全性 二解決 1、利用npm(如果沒有，先自行安裝npm)安裝ts-md5 npm install ts-md5 --save-dev 2、在使用的頁面中導入 3、使用 三、總結 發現這個 npm install md5 - ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類