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