data-*與js的交互

這次帶給大家data-*與js的交互，data-*與js的交互的注意事項有哪些，下面就是實戰案例，一起來看一下。

HTML5新增屬性data-*

書寫實例

<p data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options=&#39;{"name":"John"}&#39;>
</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=&#39;{"name":"John"}&#39;>

別怕,你再輸出

 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中文網其它相關文章！

推薦閱讀：

H5的伺服器推送事件詳解

#基於HTML5陀螺儀實作行動動畫效果

H5的canvas實現貪吃蛇小遊戲

以上是data-*與js的交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！