Web基礎瞭解版03-jQuery

来源:https://www.cnblogs.com/Open-ing/archive/2019/12/19/12056494.html
-Advertisement-
Play Games

jQuery jQuery,顧名思義,也就是JavaScript和查詢(Query)極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。 jQuery是免費、開源的 輕量級(壓縮後只有幾十k) 強大的選擇器 出色的 DOM 操作的封裝 可靠的事件處 ...


jQuery

 jQuery,顧名思義,也就是JavaScript和查詢(Query)極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。

  • jQuery是免費、開源的

  • 輕量級(壓縮後只有幾十k)

  • 強大的選擇器

  • 出色的 DOM 操作的封裝

  • 可靠的事件處理機制

  • 完善的 Ajax使用

  • 出色的多瀏覽器相容性

  • 隱式迭代:對集合對象做相同操作時不需要逐個進行遍歷,jQuery自動進行遍歷

  • 文檔說明很全

  • 可擴展插件

 jQuery庫實際上就是一個js文件,只需要在網頁中直接引入這個文件就可以了。

jQuery核心函數: $()

  • jQuery庫中為window對象定義了一個函數: jQuery(),簡化為:$()

  • $是jQuery的核心函數,jQuery的核心功能都是通過這個函數實現。$()就是調用$這個函數。

  • $函數會根據參數數據類型的不同做不同的工作, 返回一個jQuery封裝的偽數組的對象

傳入參數為函數時:$(function(){})

  • 傳入一個function參數, 作為回調函數。相當於window.onload = function(){}

  • 表示:在DOM文檔載入完成後,回調函數自動執行

  • 這個函數是 $(document).ready(function(){})的簡寫形式。

傳入參數為選擇器字元串時: $(選擇器字元串)

  • 接收一個CSS選擇器格式的字元串參數

  • 根據這個選擇器查找元素節點對象

  • 根據此字元串在document中去匹配一組元素,並封裝成jQuery對象返回

$("#id屬性值"); 相當於通過id屬性查找標簽對象
$("標簽名");  相當於通過標簽名查找標簽對象,返回集合
$(".class屬性值");  相當於通過class屬性查找標簽對象,返回集合

 

傳入參數為HTML字元串時:$(HTML字元串)

  • 接收一個標簽字元串參數。

  • 根據這個html字元串創建元素節點對象

  • 創建對應的標簽對象, 並包裝成jQuery對象

var $liEle = $("<li>香港</li>") //相當於創建了一個標簽對象 <li>香港</li>。
$("#city").append($liEle); //將此jQuery對象添加到現有的jQuery對象中。

 

傳入參數為DOM對象時: $(DOM對象)

  • 接收一個DOM對象類型的參數

  • 返回包含這個dom對象的jQuery對象。相當於把DOM對象包裝(或轉換)成jQuery對象。

    • 註意:如果聲明一個變數指向jQuery對象,那麼這個變數命名習慣上要以$開頭。

var bjEle = document.getElementById("bj");
alert(bjEle);
alert($(bjEle));

jQuery對象和DOM對象區分

  • Dom對象:通過原生js實現的DOM標準查找到的元素對象
  • jQuery對象:通過$查找或包裝過的對象

jQuery對象本質上是一個封裝了DOM對象數組加一系列的jQuery的功能函數function的結構。

習慣上給jQuery對象命名時,變數名前加上$,便於區分jQuery對象和js DOM對象。

jQuery對象和DOM對象使用區別

  • jQuery對象和DOM對象的屬性不能互用,只能調用各自聲明過的屬性。

  • jQuery對象和DOM對象的函數也不能互用,只能調用各自聲明過的函數。

DOM對象和jQuery對象的互相轉換

  • DOM對象轉jQuery對象

    • 使用jQuery核心函數包裝DOM對象:$(DOM對象)

    • 例如:var $btnEle = $(btnEle)

  • jQuery對象轉DOM對象

    • 使用數組下標:$btnEle[0]

    • 使用get(index)方法:$btnEle.get(0)

  • DOM對象轉為jQuery對象:為了調用jQuery提供的豐富的方法

  • jQuery對象轉為DOM對象:有些特殊需求在框架中沒有提供,需要使用原生的js實現

文檔處理          事件

選擇器

jQuery的選擇器分類

基本選擇器

它通過標簽名,id屬性,class屬性來查找匹配的DOM元素

1) id選擇器

  • 用法: $("#id")

  • 返回值:根據id屬性匹配一個標簽, 封裝成jQuery對象

2) 標簽選擇器

  • 用法: $("tagName")

  • 返回值:根據標簽名匹配的一個或多個標簽,封裝成jQuery對象

3) class選擇器

  • 用法: $(".class")

  • 返回值:根據class屬性值匹配一個或多個標簽, 封裝成jQuery對象

4) *選擇器

  • 用法: $("*")

  • 返回值: 匹配所有標簽, 封裝成jQuery對象

5) selector1,selector2,…

  • 用法: $(”div,span,.myClass”)

  • 返回值: 所有匹配選擇器的標簽, 封裝成jQuery對象,用分割

層級選擇器

如果想通過DOM元素之間的層級關係來獲取特定元素。例如後代元素、子元素、兄弟元素等。則需要通過層級選擇器(或層次選擇器)。

1) ancestor descendant

  • 用法:$(”form input”)

  • 說明:在給定的祖先元素下匹配所有後代元素(包括子元素的子元素,...)

2) parent > child

  • 用法: $(”form > input”)

  • 說明: 在指定父元素下匹配所有子元素。

    • 註意:要區分好後代元素與子元素

3) prev + next

  • 用法: $(”label + input”)

  • 說明: 匹配所有緊接在prev元素後的next元素。(即相鄰的下一個)

    • 註意:從平級元素中找,而不要去子元素中查找。

4) prev ~ siblings

  • 用法: $(”form ~ input”)

  • 說明: 匹配prev元素之後的所有 siblings元素,不包含該元素在內,並且siblings匹配的是和prev同輩(兄弟元素)的元素,後輩子元素不被匹配。

過濾選擇器:基本

  • 過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以 “:” 開頭

  • 按照不同的過濾規則,過濾選擇器可以分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾,表單過濾和表單對象屬性過濾選擇器。

1) :first

  • 用法: $(”tr:first”) ;

  • 說明: 匹配找到的第一個元素。

2) :last

  • 用法: $(”tr:last”)

  • 說明: 匹配找到的最後一個元素.與 :first 相對應。

3) :not(selector)

  • 用法: $(”input:not(:checked)”)

  • 說明: 去除所有與給定選擇器匹配的元素。類似於”非”,意思是沒有被選中的input(即當input的type=”checkbox”)。

4) :even

  • 用法: $(”tr:even”)

  • 說明: 匹配所有索引值為偶數的元素,從0開始計數。js的數組都是從0開始計數的。

5) :odd

  • 用法: $(”tr:odd”)

  • 說明: 匹配所有索引值為奇數的元素,和:even對應,從 0 開始計數。

6) :eq(index)

  • 用法: $(”tr:eq(0)”)

  • 說明: 匹配一個給定索引值的元素。eq(0)就是獲取第一個tr元素。括弧裡面的是索引值,不是元素排列數。從0開始

7) :gt(index)

  • 用法: $(”tr:gt(0)”)

  • 說明: 匹配所有大於給定索引值的元素。

8) :lt(index)

  • 用法: $(”tr:lt(2)”)

  • 說明: 匹配所有小於給定索引值的元素。

9) :header (匹配h1-h6標題)、:animated (匹配正在執行動畫效果的)、:focus(匹配當前獲取焦點的)

過濾選擇器:內容

  • 內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上

1) :contains(text)

  • 用法: $(”div:contains(’John’)”)

  • 說明: 匹配包含給定文本的元素。這個選擇器比較有用,當我們要選擇的不是dom標簽元素時,它就派上了用場了。它的作用是查找被標簽”圍”起來的文本內容是否符合指定的內容的。

2) :has(selector)

  • 用法: $(”div:has(p)”).addClass(”test”)

  • 說明: 匹配含有選擇器所匹配的元素的元素。這個解釋需要好好琢磨,但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標簽加上class=”test”。

3) :empty

  • 用法: $(”td:empty”)

  • 說明: 匹配所有不包含子元素或者文本的空元素

4) :parent

  • 用法: $(”td:parent”)

  • 說明: 匹配含有子元素或者文本元素。註意:這裡是”:parent”可不是”.parent”!感覺與上面講的”:empty”形成反義詞。

過濾選擇器:可見性

  • 根據元素的可見和不可見狀態來選擇相應的元素

1) :hidden

  • 用法: $(”tr:hidden”)

  • 說明: 匹配所有的不可見元素,有兩種情況:css中display:none和input type=”hidden”的都會被匹配到。同樣,要在腦海中徹底分清楚冒號”:”,點號”.”和逗號”,”的區別。

2) :visible

  • 用法: $(”tr:visible”)

  • 說明: 匹配所有的可見元素。

過濾選擇器:屬性

  • 屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。

1) [attribute]

  • 用法: $(”div[id]“)

  • 說明: 匹配包含給定屬性的元素。例子中是選取了所有帶id屬性的div標簽。

2) [attribute=value]

  • 用法: $(”input[name='newsletter']“).attr(”checked”, true)

  • 說明: 匹配給定的屬性是某個特定值的元素。例子中選取了所有name屬性是newsletter的 input 元素。

3) [attribute!=value]

  • 用法: $(”input[name!='newsletter']“).attr(”checked”, true)。

  • 說明:匹配所有不含有指定的屬性,或者屬性不等於特定值的元素。此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value])。之前看到的 :not 派上了用場。

4) [attribute^=value]

  • 用法: $(”input[name^=‘news’]“)

  • 說明: 匹配給定的屬性是以某些值開始的元素。

5 ) [attribute$=value]

  • 用法: $(”input[name$=‘letter’]“)

  • 說明: 匹配給定的屬性是以某些值結尾的元素。

6) [attribute*=value]

  • 用法: $(”input[name*=‘man’]“)

  • 說明: 匹配給定的屬性是以包含某些值的元素。

7) [selector1] [selector2] [selectorN]

  • 用法:$("input[id] [name$='man']]")

  • 說明:複合屬性選擇器,需要同時滿足多個條件時使用。

過濾選擇器:子元素

1) :nth-child(index/even/odd/equation)

  • 用法: $(”ul li:nth-child(2)”)

  • 說明: 匹配其父元素下的第N個子或奇偶元素。註意index不同於eq(index),這裡從1開始

2) :first-child

  • 用法: $(”ul li:first-child”)

  • 說明: 匹配第一個子元素。’:first’ 只匹配一個元素而此選擇符將為每個父元素匹配一個子元素。這裡需要特別的記憶一下區別。二者的調用者都是針對要操作的元素來講的。

3) :last-child

  • 用法: $(”ul li:last-child”)

  • 說明: 匹配最後一個子元素。’:last’只匹配一個元素,而此選擇符將為每個父元素匹配一個子元素。

4) : only-child

  • 用法: $(”ul li:only-child”)

  • 說明: 如果某個元素是父元素中唯一的子元素,那將會被匹配。如果父元素中含有其他元素,那將不會被匹配。意思就是:只有一個子元素的才會被匹配!

過濾選擇器:表單

1) :input

  • 用法: $(”:input”)

  • 說明:匹配所有 text, textarea, select 和 button 元素 。

2) :text

  • 用法: $(”:text”)

  • 說明: 匹配所有的單行文本框。

3) :password

  • 用法: $(”:password”)

  • 說明: 匹配所有密碼框。

4) :radio

  • 用法: $(”:radio”)

  • 說明: 匹配所有單選按鈕。

5) :checkbox

  • 用法: $(”:checkbox”)

  • 說明: 匹配所有覆選框。

6) :submit

  • 用法: $(”:submit”)

  • 說明: 匹配所有提交按鈕。

7) :image

  • 用法: $(”:image”)

  • 說明: 匹配所有圖像域。

8) :reset

  • 用法: $(”:reset”)

  • 說明: 匹配所有重置按鈕。

9) :button

  • 用法: $(”:button”)

  • 說明: 匹配所有按鈕.這個包括直接寫的元素button。

10) :file

  • 用法: $(”:file”)

  • 說明: 匹配所有文件域。

11) :hidden

  • 用法: $(”input:hidden”)

  • 說明: 匹配所有不可見元素,或者type為hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style為hidden的也會被匹配。

過濾選擇器:表單對象屬性

  • 此選擇器主要對所選擇的表單元素進行過濾

1) :enabled

  • 用法: $(”input:enabled”)

  • 說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不為disabled,當然就為enabled啦。

2) :disabled

  • 用法: $(”input:disabled”)

  • 說明: 匹配所有不可用元素.與上面的那個是相對應的。

3) :checked

  • 用法: $(”input:checked”)

  • 說明: 匹配所有被選中的元素(覆選框、單選框等,不包括下拉列表select中的option)。

    • 註意:官方文檔說明是不包括select中的option,但測試中是包含的。只是不建議大家這樣用。

4) :selected

  • 用法: $(”select option:selected”)

  • 說明: 匹配所有選中的option元素。

文檔處理(CRUD)

查找節點方法()

1) $(selector)

  • 使用jQuery選擇器查詢

  • 得到一個包含所有匹配的dom節點對象的jQuery對象

2) find(selector)

  • 查詢jQuery對象內部數據

  • 在Jquery對象中根據selector查找其中匹配的後代節點

3) eq(index)

  • 根據索引值查找集合中指定位置的元素

  • index從0開始,也可以為-1,-2,...。其中-1是最後一個元素

4) filter(expr|obj|ele|fn)

  • 根據傳入的選擇器字元串等再次從調用者中篩選

5) children([expr])

  • 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

6) parent([expr])

  • 取得一個包含著多個匹配元素的唯一父元素的元素集合。

7) parents([expr])

  • 取得一個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通過一個可選的表達式進行篩選。

8) each(callback)

  • 遍歷jQuery對象包含的數據:$(selector1).each(function(index, itemDom){ })

  • 遍歷jQuery對象所包含的所有節點, 每取一個dom節點對象都去調用設置的回調函數, 並將取出的節點在數組中的下標和節點對象傳入函數

獲取長度

1) 屬性:length

  • jQuery 對象中元素的個數。

2) 函數:size()

  • jQuery 對象中元素的個數。與length屬性作用一樣。

內部插入節點

1) append(content)

  • 向每個匹配的元素的內部的結尾處追加內容。

2) appendTo(content)

  • 把所有匹配的元素追加到另一個指定的元素集合中

3) prepend(content)

  • 向每個匹配的元素的內部的開始處插入內容

4) prependTo(content)

  • 將每個匹配的元素插入到指定的元素內部的開始處

外部插入節點

1) after(content)

  • 在每個匹配的元素之後插入內容

2) before(content)

  • 在每個匹配的元素之前插入內容

3) insertAfter(content)

  • 把所有匹配的元素插入到另一個、指定的元素集合的後面

4) insertBefore(content)

  • 把所有匹配的元素插入到另一個、指定的元素集合的前面

創建節點

  • $(htmlString)

  • 動態創建的新元素節點不會被自動添加到文檔中, 需要使用其他方法將其插入到文檔中;

  • 當創建單個元素時, 需註意閉合標簽和使用標準的 XHTML 格式. 例如創建一個<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)

  • 創建文本節點就是在創建元素節點時直接把文本內容寫出來; 創建屬性節點也是在創建元素節點時一起創建

刪除節點

1) empty()

  • 刪除匹配的元素集合中所有的子節點(不包括本身)。

2) remove()

  • 刪除匹配的元素及其子元素(包括本身)

修改節點

1) replaceAll(selector)

  • 用匹配的元素替換掉所有 selector匹配到的元素。

2) replaceWith(content|fn)

  • 將所有匹配的元素替換成指定的HTML或DOM元素。

屬性操作

1) attr(name ,[value])

  • attr(屬性名) 返回“屬性名”對應的屬性值

  • attr(屬性名,屬性值) 將“屬性名”對應的屬性設置為“屬性值”

2) removeAttr(name)

  • 根據屬性名刪除對應的屬性

HTML代碼/值

1)html([val])

  • 得到元素的內容或者設置元素的內容

2)val([value])

  • val() 讀取value屬性

  • val(value值) 設置value屬性

  • val([選項值1,選項值2,…,選項值n]) 設置單選框、多選框或下拉列表被選中的值

3)text()

  • text() 得到元素節點對象的文本內容
  • text(str) 設置元素的文本內容

CSS

1) addClass(className)

  • 添加class屬性

2) removeClass()

  • 移除class屬性

3) css(name,[value])

  • 查看某個樣式屬性, 或設置某個樣式屬性

常用事件

1) ready(fn)

  • 當DOM載入就緒可以查詢及操作時,綁定一個要執行的函數

2) click([fn])

  • 觸發每一個匹配元素的click事件

3) blur([fn])

  • blur事件會在元素失去焦點的時候觸發,既可以是滑鼠行為,也可以是按tab鍵離開的

4) change([fn])

  • change事件會在元素失去焦點的時候觸發,也會當其值在獲得焦點後改變時觸發。

綁定與解綁事件

1) bind(type, fn)

  • 為每個匹配元素的特定事件綁定事件處理函數。

2) unbind(type)

  • bind()的反向操作,從每一個匹配的元素中刪除綁定的事件

事件切換

1)hover(over,out)

  • 當滑鼠移動到一個匹配的元素上面時,會觸髮指定的第一個函數。當滑鼠移出這個元素時,會觸髮指定的第二個函數。

2) 事件冒泡

  • 描述: 事件會按照 DOM 層次結構像水泡一樣不斷向上直至頂端。即:子元素事件觸發引起父元素的事件也觸發的現象

  • 解決: 在事件處理函數中返回 false, 會對事件停止冒泡

效果

基本

1) show()

  • 顯示當前標簽

2) hide()

  • 隱藏當前標簽

3) toggle()

  • 切換當前標簽的可見性

 滑動

1) slideDown()

  • 這個動畫效果只調整元素的高度,可以使匹配的元素以“滑動”的方式顯示出來

2) slideUp()

  • 這個動畫效果只調整元素的高度,可以使匹配的元素以“滑動”的方式隱藏起來

3) slideToggle()

  • 通過高度變化來切換所有匹配元素的可見性

 淡入淡出

1) fadeIn()

  • 通過不透明度的變化來實現所有匹配元素的淡入效果

2) fadeOut()

  • 通過不透明度的變化來實現所有匹配元素的淡出效果

3) fadeToggle()

  • 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果


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

-Advertisement-
Play Games
更多相關文章
  • 今天在開發的時候,遇到一個問題,就是我們我在寫發送廣告的功能,然後我用了一個textare文本框,這個時候,發現了一個問題。這個文本框憑空消失了。不見了,我以為是自己的那個樣式不小心把這個隱藏掉了後來發現,還真的不是。經過仔細的查找發現是一個很特殊的樣式,請看截圖: 這個樣式肯定不是我自己寫的,然後 ...
  • 介紹ECMAScript是一種由Ecma國際(前身為歐洲電腦製造商協會)在標準ECMA-262中定義的腳本語言規範。這種語言在萬維網上應用廣泛,它往往被稱為JavaScript或JScript,但實際上後兩者是ECMA-262標準的實現和擴展。 歷史版本至發稿日為止有九個ECMA-262版本發表。 ...
  • JS作用: 1.頁面交互特效 2.表單驗證 JS組成: 1.ECMAscript js核心; 2.DOM 文檔對象類型; 3.BOM 瀏覽器對象模型; (1)window 視窗; (2)history 瀏覽歷史; (3)locarion 地址欄; (4)document 頁面; JS操作 1.操作元 ...
  • BOM對象——location ~~~javascript btn ~~~ ...
  • BOM對象——History ~~~javascript history History ~~~ ...
  • BOM對象——Navigator ~~~javascript ~~~ ...
  • 鍵盤控制DIV移動 ~~~javascript ~~~ ...
  • 錯誤總會發生,每當您寫一些新的電腦代碼時。 JavaScript 調試 在沒有調試器的情況下寫 JavaScript 是有難度的。 您的代碼中也許包含了語法錯誤,或者邏輯錯誤,這些都難以診斷。 通常,如果 JavaScript 代碼包含錯誤,也不會發生任何事情。不會有錯誤消息,並且不會有任何可供查 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...