data-*與js的交互示例

這篇文章主要介紹data-*與js的交互示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

HTML5新增屬性data-*

書寫實例

<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對象

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

以上是“data-*與js的交互示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！