jQuery $.attr() 與 $.data()：何時使用哪一個？

jQuery Data 與 Attr

使用資料屬性時，可以使用兩種主要的 jQuery 方法：$.data 和 $.data。屬性。了解它們的差異對於有效的資料儲存和檢索至關重要。

HTML5 資料屬性的 $.attr

如果您正在處理 HTML5 資料屬性，例如作為<a>，適當的方法是$.attr。這使您能夠直接從元素的 HTML 讀取和寫入資料屬性。例如：

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

$.data 用於任意數據存儲

相反，$.data 允許您在元素上存儲任意數據，與特定的數據無關屬性。該資料不能透過 HTML 訪問，而是透過 jQuery 快取訪問。它通常用於小部件實例化和儲存複雜物件。例如：

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

$.data 中的連字符和駝峰命名法

使用$.data 時，帶連字符的資料屬性名稱會自動轉換為駝峰命名法，而原始的連字號的格式在HTML 中仍然可用。但是，不建議在 JavaScript 中使用連字號透過 $.data() 進行存取。

$.data 中的自動轉換

$.data 的另一個有用功能() 是它自動轉換值的能力。如果該值與識別的模式匹配，它將轉換為適當的資料類型。這個簡化的模式：

<a>

可以透過以下方式存取：

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

何時使用$.attr 與$.data

一般，使用$.attr 存取需要與HTML 直接互動的HTML5 資料屬性。使用 $.data 儲存無法透過 HTML 存取的任意數據，尤其是在處理複雜物件時。

以上是jQuery $.attr() 與 $.data()：何時使用哪一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！