HTML5 強大的新功能 data() data- 自定義屬性介紹

常常會看到程式碼裡面有 < a href="#" class ="RemoveLink"  data-id="myid ">

這是什麼呢？

是DOM物件上的自定義屬性，是HTML5才有的！

這有什麼好處呢？

比如我們本來需要用ajax獲得一些資料

但這些資料其實都不太會變動，就可以使用data-屬性了！

請看範例：

 < ul id="vegetable">

        <li data-spacing ="10cm" data-sowing-time="March to June"> Carrots</ li>

        <li data-spacing ="30cm" data-sowing-time="February to March"> Celery</ li>

        <li data-spacing ="3cm" data-sowing-time="March to September">Radishes </li >

    </ul >

    這樣定義後，當我們要將它呈現在網頁上時，就可以直接使用

    <script src ="Scripts/jquery-2.1.1.js"></ script>

    <script type ="text/javascript">

        $(document).ready(

          function () {

              $( '#vegetable>li').each( function (index, element) {

                  console.log(index)

                  alert($(element).data( 'spacing'))

              })

          }

        )

        //來取得預先設定好的公分數和熟成時間了！  是不是很方便呢？

    </script >

定義介紹：

jQuery.data( element,  key, value  )

element - 必要的參數，這個屬性就是我們要塞入資料的節點。

key - 欲塞入資料的鍵值，往後取得資料使用。

value - 欲塞入的資料，可為任何的資料型態。

JQuery寫入：

    $(this).data("mykey", "myValue")

也等於：

    $.data(this,"myKey","myValue")

jQuery取值：

    $(this ).attr("data-myKey" )

等於

    $(this ).data("myKey")

其實data()就是在改變該Object也就是其dataset屬性的值而已：

var myObject = { myProperty: 'myValue' }  

$.data(myObject, 'newProperty1', 'newValue1');

結果：myObject值為'newValue1'

JavaScript寫入語法：

<div id="test" data-age ="24"> Click Here</div>

var test = document.getElementById( 'test');

      test.dataset.my = 'Byron';

css選取器亦可藉此設定樣式

<style type="text/css">

    [data-age] {

        background-color: #0f0;

        width: 100px;

        margin: 20px;

    }

</style>

相關參考：

http://www.cnblogs.com/dolphinX/p/3348458.html

http://html5doctor.com/html5-custom-data-attributes/

最後補充一點，雖然data()很好用，但的相容性不怎麼好：

• Internet Explorer 11+ 
• Chrome 8+ 
• Firefox 6.0+ 
• Opera 11.10+ 
• Safari 6+