前端開發JS——jQuery常用方法

来源:https://www.cnblogs.com/aitiknowledge/archive/2019/09/23/11571838.html
-Advertisement-
Play Games

jQuery基礎(三)- 事件篇 1、jQuery滑鼠事件之click與dbclick事件 click方法用於監聽用戶單擊操作,dbclick方法用於監聽用戶雙擊操作,這兩個方法用法及其類似,所以這隻介紹click事件,只有單擊釋放後才生效,而且同一元素不能同時綁定click和dbclick事件 方 ...


jQuery基礎(三)- 事件篇   1、jQuery滑鼠事件之click與dbclick事件 click方法用於監聽用戶單擊操作,dbclick方法用於監聽用戶雙擊操作,這兩個方法用法及其類似,所以這隻介紹click事件,只有單擊釋放後才生效,而且同一元素不能同時綁定click和dbclick事件   方法一:$ele.click() click無參,只是綁定一個事件,在函數里可以實現其他的綁定事件   方法二:$ele.click(handler(eventObject)) click的參數是函數(回調函數),單擊會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象   方法三:$ele.click([eventData], handler(eventObject)) click增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData //不同函數傳遞數據     function data(e) {         $(this).find('p:last').html('數據:' + e.data)     }       function a() {         $(".right").click(1111, data)     }     a(); 註:只有滑鼠按鈕鍵which值為1(即滑鼠左鍵)才會實現所綁定的事件   2、jQuery滑鼠事件之mousedown與mouseup事件 mousedown方法用於監聽用戶滑鼠按下操作,只有滑鼠按下後才生效,mouseup方法用於監聽用戶滑鼠鬆開操作,只有滑鼠鬆開後才生效,這兩個方法用法及其類似,所以這隻介紹mousedown事件。   方法一:$ele.mousedown() mousedown 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件   方法二:$ele.mousedown(handler(eventObject)) mousedown 的參數是函數(回調函數),滑鼠按下後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象   方法三:$ele.mousedown([eventData], handler(eventObject)) mousedown增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData   註:mousedown強調按下,mouseup強調鬆開;如果點擊按住不放並離開元素,還是會實現所綁定的事件;任何滑鼠按鈕都會實現所綁定的事件; 用event 對象的which區別按鍵,敲擊滑鼠左鍵which的值是1,敲擊滑鼠中鍵which的值是2,敲擊滑鼠右鍵which的值是3   3、jQuery滑鼠事件之mousemove事件 mousemove方法用於監聽用戶滑鼠指針移動的操作,只有滑鼠指針移動就生效,只在綁定事件的元素的區域里。   方法一:$ele.mousemove() mousemove 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.mousemove(handler(eventObject)) mousemove 的參數是函數(回調函數),滑鼠指針移動會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 //綁定一個mousemove事件     //觸發後修改內容     $(".aaron1").mousemove(function(e) {         $(this).find('p:last').html('移動的X位置:' + e.pageX)     }) 方法三:$ele.mousemove ([eventData], handler(eventObject)) mousemove 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:mousemove 強調滑鼠指針移動;如果處理器做任何重大的處理,或者如果該事件存在多個處理函數,這可能造成瀏覽器的嚴重的性能問題   4、jQuery滑鼠事件之mouseover與mouseout事件 mouseover方法用於監聽用戶滑鼠移入操作,只有滑鼠移入區域內後才生效,mouseout方法用於監聽用戶滑鼠移出操作,只有滑鼠移除區域後才生效,處理事件的過程中會有事件冒泡,這兩個方法用法及其類似,所以這隻介紹mouseover事件。   方法一:$ele.mouseover () mouseover 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.mouseover (handler(eventObject)) mouseover 的參數是函數(回調函數),滑鼠移入後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.mouseover ([eventData], handler(eventObject)) mouseover 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:mouseover 強調滑鼠移入區域內,mouseover 強調滑鼠移除區域;   5、jQuery滑鼠事件之mouseenter與mouseleave事件   這和第四點的基本功能,理論知識點是一模一樣的,不加贅述。但是他們最主要的區別是第四點可能會處理冒泡事件,這第五點是不會處理冒泡事件   6、jQuery滑鼠事件之hover事件 這個事件是第五點的總結方法,所以他也不會處理冒泡事件,即懸停事件,在元素區域內懸停(移入),在元素外(移出) 方法:$ele.hover(handlerIn(eventObject) , handlerOut(eventObject)) handlerIn(eventObject):當滑鼠指針進入元素時觸發執行的事件函數 handlerOut(eventObject):當滑鼠指針離開元素時觸發執行的事件函數   7、jQuery滑鼠事件之focusin與focusout事件 focusin 方法用於監聽用戶元素聚焦操作(如input元素),只有元素聚焦後才生效。focusout 方法用於監聽用戶元素失焦操作(如input元素),只有元素失焦後才生效。兩者是很相似的,所以這隻介紹focusin事件 方法一:$ele.focusin () focusin 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.focusin (handler(eventObject)) focusin 的參數是函數(回調函數),滑鼠移入後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.focusin ([eventData], handler(eventObject)) focusin 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData //不同函數傳遞數據         function fn(e) {              $(this).val(e.data) //給input元素賦值有val()方法,不是value()         }           function a() {             $("input:last").focusin('呱唧_T_呱唧', fn)         }         a(); 註:focusin 強調元素聚焦;focusout強調元素失焦,無論是不是自身調用聚焦/失焦方法,都會執行函數裡面有部分操作,   8、jQuery表單事件之focus與blur事件 focus 方法用於監聽用戶元素聚焦操作(如input元素),只有元素聚焦後才生效。blur 方法用於監聽用戶元素失焦操作(如input元素),只有元素失焦後才生效。兩者是很相似的,所以這隻介紹focus事件 方法一:$ele.focus () focusin 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.focus (handler(eventObject)) focusin 的參數是函數(回調函數),滑鼠移入後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.focus ([eventData], handler(eventObject)) focus 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData   註:focus 強調元素聚焦;blur強調元素失焦,只有自身調用聚焦/失焦方法,並且聚焦成功,才會執行函數裡面有部分操作,   9、jQuery表單事件之change事件 只有當表單元素(input元素、textarea元素、select元素)值發生改變之後並且失焦(針對輸入文本的元素,其他立即觸發),會觸發表單綁定的change事件 方法:$ele.change(handler(eventObject)) change的參數是函數(回調函數),表單元素值發生改變再失焦,就會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象   10、jQuery表單事件之select事件 select事件只能用於<input>元素與<textarea>元素。當這兩元素的文本被選中時會觸發select事件 方法一:$ele.select () focusin 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.select (handler(eventObject)) select 的參數是函數(回調函數),文本被選中後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.select ([eventData], handler(eventObject)) select 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData   11、jQuery表單事件之submit事件 submit事件可以過濾一些數據做一些必要的操作阻止一些瀏覽器的預設行為。 有四種方式能觸發submit事件: <input type="submit">、 <input type="image">、 <button type="submit">、 當某些表單元素獲取焦點時,敲擊enter鍵 方法一:$ele.submit() submit 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.submit (handler(eventObject)) submit 的參數是函數(回調函數),文本被選中後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 //回車鍵或者點擊提交表單,禁止瀏覽器預設跳轉:     $('#target2').submit(function() {         alert('捕獲提交表達動作,阻止頁面跳轉')         return false;    //阻止瀏覽器的預設跳轉行為     }); 方法三:$ele.submit ([eventData], handler(eventObject)) submit 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData   註:如果要阻止瀏覽器的某些預設行為,可以傳統的調用事件對象e.preventDefault()來處理;也可以在函數上返回false   12、jQuery鍵盤事件之keydown與keyup事件 keydown方法用於監聽用戶鍵盤按下操作,只有鍵盤按下後才生效,keyup方法用於監聽用戶鍵盤鬆開操作,只有鍵盤鬆開後才生效,這兩個方法用法及其類似,所以這隻介紹keydown事件。   方法一:$ele.keydown () keydown 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件   方法二:$ele.keydown (handler(eventObject)) keydown 的參數是函數(回調函數),鍵盤按下後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象   方法三:$ele.keydown ([eventData], handler(eventObject)) keydown 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData;e.key或者e.which是鍵盤輸入的值(整型值)   註:keydown強調按下,keyup強調鬆開;如果點擊按住不放並離開元素,還是會實現所綁定的事件;理論上可以綁定所有元素,一般用於表單元素。keydown事件:每次獲取的內容都是之前輸入的,當前輸入的獲取不到,這就由下一知識點解決。   13、jQuery鍵盤事件之keypress()事件 keydown事件觸發在文字還沒敲進文本框,這時如果在keydown事件中輸出文本框中的文本得到的是觸發鍵盤事件前的文本,而keyup事件觸發時整個鍵盤事件的操作已經完成,獲得的是鍵盤觸發事件後的文本。他和keydown是一樣的。 keypress與keydown、keyup的主要區別: 只能獲取單個字元,不能捕獲組合鍵 無法響應系統功能鍵如(delete,backspace) 不區分小鍵盤和主鍵盤的數字字元   14、on()的多事件綁定 上述提及的所有時間他們的底層的處理都是通過一個”on“方法來實現的。(on和bind是一樣的, 推薦使用on) 基本用法:.on(event, [selector] , [data]) 如:$ele.on("click", function(){}) 和上述提到的事件最大的不同點是 可以自定義事件名 多個事件綁定同一個函數:$ele.on("mouseover   mouseout", function(){})  //多個事件用空格隔開 多個事件綁定不同函數:$ele.on({ mouseover: function(){}, mouseout:function(){} }) 將數據傳遞到處理程式 function greet( event ) {   alert( "Hello " + event.data.name ); //Hello 慕課網 } $( "button" ).on( "click", {   name: "慕課網" }, greet );   15、on()的高級用法 委托機制:.on( event, [selector], [data], handler(eventObject))   在on的第二參數中提供了一個selector選擇器,簡單的來描述下 參考下麵3層結構 <div class="left">     <p class="aaron">         <a>目標節點</a> //點擊在這個元素上     </p> </div> 給出如下代碼: $("div").on("click","p",fn) 註:事件綁定在最上層div元素上,當用戶觸發在a元素上,事件將往上冒泡,一直會冒泡在div元素上。如果提供了第二參數,那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素,將會觸發事件回調函數 就是說向上冒泡匹配到的元素,由該元素執行回調函數的範圍   16、卸載事件off()方法 通過on()綁定的事件處理程式 通過off()方法移除綁定(off和unbind也是一樣的, 推薦使用off) 綁定兩個事件 $ele.on("mouseover   mouseout", function(){}) 解除其中一個事件 $ele.off("mouseover") 解除所有事件 $ele.off()   17、jQuery事件對象的作用 可以借用對象的target屬性與冒泡機制實現事件委托-------多個事件綁定同一個函數 我們經常見到的this就是對象的currentTarget屬性,event.target是觸發事件的對象   18、jQuery自定義事件之trigger事件 例子: 在jQuery通過on方法綁定一個原生事件 $ele.on('click', function(){   alert("觸發系統事件") }); 必須用戶點擊這個元素才能觸發這個事件 $ele.trigger("click"); 只要寫出這行代碼,就相當於執行了上面的點擊事件   trigger除了能夠觸發瀏覽器事件,同時還支持自定義事件,並且自定義時間還支持傳遞參數 $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自觸自定義時間") }); $('#elem').trigger('Aaron',['參數1','參數2'])   trigger觸發瀏覽器事件與自定義事件區別?
    • 自定義事件對象,是jQuery模擬原生實現的
    • 自定義事件可以傳遞參數

 

jQuery基礎(四)---動畫篇   1、jQuery中元素的隱藏和顯示之hide和show方法  (改變樣式display:none/block) 元素隱藏方法hide()     元素顯示方法show()兩者用法很相似,這裡以hide為例 $ele.hide()     直接隱藏 $ele.hide(options)     動畫隱藏會慢慢改變寬高,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 註:.hide()方法是會保存元素的原始屬性和屬性值即再次顯示的時候還是原來的屬性。 show和hide方法是修改display屬性,通過visibility屬性佈局需要通過css方法單獨設置 如果使用!important在你的樣式中,你就需要通過css方法修改屬性,併在屬性之後添加!important重寫樣式   2、jQuery中顯示與隱藏切換toggle方法(改變樣式display:none/block) toggle方法是上述兩個方法的切換 $ele.toggle()      無參數 若元素隱藏,則會顯示;若顯示,則隱藏 $ele.toggle(options)     動畫隱藏或顯示會慢慢改變寬高,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 $ele.toggle(display)  直接定位 直接提供一個參數,指定要改變原色最終效果 如果為true則是顯示,如果為false則是隱藏   3、jQuery中下拉/上捲動畫之slideDown和slideUp方法(改變元素的高度) 元素下拉顯示方法slideDown()和上述的show()很相似;元素下拉顯示方法slideUp()和上述的hide()很相似,slideDown和slideUp方法使用很相似,以slideDown為例 $ele.slideDown()     直接用滑動動畫顯示一個匹配元素 $ele.slideDown(options)     只會改變元素的高度,即頁面佈局會向上移動 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 註:.slideDown()方法是從無到有的一開始元素的就是隱藏的 .slideUp()方法是從有到無的,一開始元素的就是顯示的 。因為動畫是非同步的,所以要在動畫之後執行某些操作就必須要寫到回調函數裡面   4、jQuery中上捲下拉切換slideToggle方法(改變元素的高度) slideToggle 方法是上述兩個方法的切換 $ele.slideToggle ()      無參數 若元素隱藏,則會下拉;若顯示,則上捲 $ele.slideToggle (options)     動畫上捲或下拉會慢慢改變高度,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。 快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等   5、jQuery中淡出/淡入動畫之fadeOut和fadeIn方法(改變元素的透明度)   元素淡出隱藏方法fadeOut ()和上述的.hide()很相似;元素淡入顯示方法fadeIn()和上述的show()很相似,fadeOut 和fadeIn方法使用很相似,以slideDown為例 $ele.fadeOut ()     直接用淡出隱藏所有匹配元素 $ele.fadeOut (options)     只會改變元素的透明度opacity,即頁面佈局剛開始不會變化,在透明度為0時,頁面佈局才發生改變;如果時fadeIn(options)時一開始佈局變化,然後逐漸改變透明度 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 註:.slideDown()方法是從無到有的一開始元素的就是隱藏的 .slideUp()方法是從有到無的,一開始元素的就是顯示的 。因為動畫是非同步的,所以要在動畫之後執行某些操作就必須要寫到回調函數裡面   6、jQuery中淡出淡入切換fadeToggle方法(改變元素的透明度) fadeToggle 方法是上述兩個方法的切換 $ele.fadeToggle ()      無參數 若元素隱藏,則會下拉;若顯示,則上捲 $ele.fadeToggle (options)     動畫淡入淡出會慢慢改變元素透明度opacity在01之間,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等   7、jQuery中淡入效果之fadeTo方法(改變元素的透明度) fadeTo 方法是上述fadeIn方法的擴展,即可以指定元素的透明度 $ele.fadeTo (options)     動畫淡入淡出會慢慢改變並指定元素透明度opacity在01之間的某個值,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。 快捷參數:fast預設200ms,slow預設600ms,必需參數(duration時間、opacity透明度值),complete:function(){}等   8、jQuery中toggle與slideToggle以及fadeToggle的比較 操作元素的顯示與隱藏可以有 改變樣式display:none/block/inline/inline-block     ======>toggle  橫向動作 (顯示從左到右,隱藏從右到左) 設置位置高度     ======>slideToggle 縱向動作(顯示從上往下,隱藏從下往上) 設置透明度     ======>fadeToggle                  
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 任何一個開發者,都是十分喜歡使用開源軟體包的。因為它使開發工作變得更快速、高效、容易。如果沒有開源軟體包,開發工作將變得疲憊不堪,不斷的重覆造輪子! 下麵整理了 Github 上 36 個實用的 Vue 開源庫,建議收藏! 1.Bootstrap Vue |star 10014 具有超過40個插件和 ...
  • 1、js如何獲取數組的key function getObjectKeys(object){ var keys = []; for (var property in object) return property; } console.log(getObjectKeys(3332:[])) // 3 ...
  • 在ie11中打開vue項目一片空白,F12打開控制台發現如下錯誤 只需要在build/webpack.base.conf.js中加一行代碼即可 ...
  • 本文主要使用坐標軸的使用來繪製多邊形,點位則都是在y軸上尋找,這種方法能夠更好的理解圖形與修改。 這張圖片是代碼執行後的結果 ...
  • 1. 概述 Proxy 用於修改某些操作的預設行為,等同於在語言層面做出修改,所以屬於一種『元編程』即對編程語言進行編程。 1.1 理解 Proxy 是在目標對象之前架設一層『攔截』,外部對對象的訪問,都需要經過該層攔截。因此在攔截中對外界的訪問進行過濾和改寫。 在Es6 中 提供了原生的 Prox ...
  • 快來點我吧 ...
  • function getCount(arr, rank,ranktype){ var obj = {}, k, arr1 = []; for (var i = 0, len = arr.length; i < len; i++) { k = arr[i]; if (obj[k]) obj[k]++;... ...
  • 博客園美化博客隨筆目錄 基於 在`2014 5 11`寫的目錄代碼基礎上進行改進 一.js代碼 二.css代碼 三.展示效果 未打開狀態 展開效果 hover效果 三.在原先的基礎上解決的bug 1.目錄由於其他js導致沒法載入(最主要修改的內容) 2.修改了樣式 3.修改了hover樣式讓他看起來 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...