如何使用jquery獲取數據屬性.data()？在哪種情況下html5 data-*屬性會轉換為小寫字母和駝峰字母？使用自定義屬性存儲數據時應遵循的所有主要規則是什么？<input type="button" class="myButton" value="click me" data-productId="abc"/><input type="button" class="myButton" value="click me" data-product-id="abc"/><input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/><input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>
3 回答
慕神8447489
TA貢獻1780條經驗 獲得超1個贊
HTML5允許我們創建自己的自定義屬性來存儲數據?？梢詫⒆远x屬性稱為任何我們喜歡的名稱，例如變量名，但是它們必須以單詞“ data”開頭，并且單詞之間用短劃線隔開。您可以將“ foo”，“ bar”和“ foo bar”數據屬性添加到這樣的輸入中：
<input type="button" class="myButton" value="click me" data-foo="bar"
data-bar="baz" data-foo-bar="true">
jQuery的.data()方法將使您可以訪問data-*屬性。
使用jQuery 1.4及更高版本（包括1.4版），數據屬性不區分大小寫，因此：
<input type="button" class="myButton" value="click me" data-productId="abc"/>
將可以使用
$('.myButton').data('productId');
jQuery 1.5和1.6
但是，jQuery 1.5和1.6的更改意味著數據屬性現在被強制轉換為小寫，因此：
<input type="button" class="myButton" value="click me" data-productId="abc"/>
只能通過訪問
$('.myButton').data('productid');
任何data-*屬性都將成為元素的數據集對象的屬性。新屬性名稱的派生如下：
屬性名稱將轉換為所有小寫字母。
該data-前綴從屬性名稱剝離。
所有連字符也將從屬性名稱中刪除。
其余字符將轉換為CamelCase。在步驟3中刪除的連字符后緊跟的字符變為大寫。
請注意，原始屬性名稱data-product-id已productId在數據集對象中轉換為。命名data-*屬性時必須考慮名稱轉換過程。由于屬性名稱會轉換為小寫，因此最好避免使用大寫字母。以下示例顯示了幾個屬性名稱如何轉換為數據集屬性。
"data-productId" translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId" translates to "productid"
注意：
自定義數據屬性通常用于存儲輔助/簡化JavaScript代碼的元數據。
元素可以具有任意數量的自定義數據屬性。
僅當不存在更合適的元素或屬性時才應使用自定義數據屬性。例如，您不應在圖像上創建自定義的“文本描述”屬性。現有alt屬性是一個更好的選擇。
HTML5規范明確規定data-*了第三方應用程序不應使用屬性。這意味著在準備搜索結果時，諸如搜索引擎之類的程序不應依賴自定義數據屬性。
在HTML5中實現自定義屬性本身在技術上并不復雜，但是真正的困難在于選擇在您自己的項目中使用它們是否合適，以及如何有效地進行處理。最后，請記住，將數據集方法用于頁面所依賴的功能還為時過早，因此請確保為不支持的瀏覽器提供替代方法。
慕仙森
TA貢獻1827條經驗 獲得超8個贊
我發現值得注意的是，使用jquery仍然可以通過帶連字符的名稱訪問data屬性的值，例如$('<a data-product-id="One2Three"></a>').data('product-id')will One2Three。之前使用jQuery 3.3.1進行了檢查，但1.6也是如此。
- 3 回答
- 0 關注
- 846 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消