這次帶給大家data-*與js的交互，data-*與js的交互的注意事項有哪些，下面就是實戰案例，一起來看一下。
書寫實例
<p data-role="page"
data-last-value="43"
data-hidden="true"
data-options='{"name":"John"}'>
</p>1. 定義:
data-* 屬性用於儲存頁面或應用程式的私有自訂資料。
data-* 屬性賦予我們在所有 HTML 元素上嵌入自訂 data 屬性的能力。
2. 注意點:
data-* 屬性包括兩個部分：
屬性名稱不應該包含任何大寫字母，且在前綴"data-" 之後必須有至少一個字元
屬性值可以是任意字串
data-*屬性與jQuery互動
#使用jQuery中的.data()函數取用data-*屬性值
console.log($("p").data('lastValue')); //输出的值为:43
console.log($("p").data('role')); //输出的值为:page注意事項
data-**屬性名格式駝峰命名改寫
data-屬性是在第一次使用這個資料屬性後不再訪問或改變（所有的資料值都在jQuery內部儲存）
示範:
console.log($("p").data('lastValue')); //输出的值为:43
$('p').data('lastValue',44); //设置data-last-value=44
$('p')[2] //假设这是文档中的第3个p,我们输出这个dom
//输出:<p data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>別怕,你再輸出
console.log($("p").data('lastValue')); //输出的值为:44值只是儲存在jQuery內部了
使用jQuery中.attr()函數取用data-*屬性值
console.log($('p').attr('data-role')); //输出的值为:page
console.log($('p').attr('data-last-value')); //输出的值为:43使用jQuery中.attr()函數設定data-*屬性值
$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象注意:破折號要轉換成駝峰命名
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是data-*與js的交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！
