HTML5新增屬性data-*和js/jquery之間的交互及注意事項

書寫實例

<div data-role=page data-last-value=43 data-hidden=true data-options='{name:John}'></div>

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有HTML 元素上嵌入自定義data 屬性的能力。

data-* 屬性包括兩部分：

• 屬性名不應該包含任何大寫字母，並且在前綴data- 之後必須有至少一個字符
• 屬性值可以是任意字符串

使用jQuery中的.data()函數取用data-*屬性值

console.log($(div).data('lastValue')); //輸出的值為:43console.log($(div).data('role')); //輸出的值為:page

data-**屬性名格式駝峰命名改寫

data-屬性是在第一次使用這個數據屬性後不再存取或改變（所有的數據值都在jQuery內部存儲）

演示:

 console.log($(div).data('lastValue')); //輸出的值為:43 $('div').data('lastValue',44); //設置data-last-value= 44 $('div')[2] //假設這是文檔中的第3個div,我們輸出這個dom //輸出:<div data-role=page data-last-value=43 data-hidden=true data-options='{name:John}'>

別怕,你再輸出

console.log($(div).data('lastValue')); //輸出的值為:44

值只是存儲在jQuery內部了

使用jQuery中.attr()函數取用data-*屬性值

console.log($('div').attr('data-role')); //輸出的值為:pageconsole.log($('div').attr('data-last-value')) ; //輸出的值為:43

使用jQuery中.attr()函數設置data-*屬性值

$('div').attr('data-emp',{'name':'zhangsan','age':23}); //給div添加一個data-emp的屬性,屬性值為一個json對象

注意:破折號要轉化成駝峰命名

以上所述是小編給大家介紹的HTML5新增屬性data-*和js/jquery之間的交互，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！