HTML5新增屬性data-*和js/jquery之間的交互

HTML5新增屬性data-
data-自定義屬性,這種方式的自定義屬性解決屬性混亂無狀態管理的現狀

書寫實例

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

1. 定義:

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

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

2. 註意點:

data-* 屬性包括兩部分：

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

data-*屬性和jQuery交互

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

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

註意事項

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

2. 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')); //輸出的值為:page
   console.log($('div').attr('data-last-value')); //輸出的值為:43

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

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

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

data-*屬性和JS交互
筆者不愛這種方式,但是看到了,就總結整理在這吧

先準備示例:

<div id='main'>這種方式總感覺彆扭</div>

1. 設置data-*屬性

   //首先採用鏈式編程,再使用DOM元素上有一個dataset屬性,這是一個DOMStringMap類型的鍵值對集合
   document.getElementById('main').dataset.isBoss = true;
   document.getElementById('main').dataset.emp = {'name':'zhangsan',age:23};

   結果:

   這種方式總感覺彆扭

   這就完成了添加兩個data-自定義的屬性

2. 讀取data-*屬性也可以使用dataset這個屬性規則是一樣的

   console.log(document.getElementById('main').dataset.isBoss); //返回true

   除此之外還可以使用JS原生的getAttribute/setAttribute方法

   document.getElementById('main').setAttribute('data-email','[email protected]');
   document.getElementById('main').getAttribute('data-email');

最後註意的是CSS中data-是不可以不帶的