html5 element data attribute

A custom data attribute has been added to the HTML5 specification

The usage of this custom data attribute is very simple,

That is, you can add any attribute starting with "data-" to the HTML tag,

These properties are not displayed on the page,

It will not affect your page layout and style,

But it is readable and writable .

 

Such as

<a class="btn-service-deploy"
                        href="javascript:;"
                    data-id="{{item.id}}"
                    data-display_name="{{item.display_name}}"
                    data-version="{{item.version}}"
                    data-screenshot="apps/appfile/download/{{(item.screen_shot)[0].id}}"
                    data-description="{{item.description}}">部署</a>

 

 

How to read this data?

It can be obtained by reading the properties,

var display_name  = $('.btn-service-deploy').attr('data-display_name');

 

 

But jquery already has built-in methods to manipulate these properties.

Use jQuery's .data() method to access these "data-*" properties.

Such as

var display_name = $('.btn-service-deploy').data("display_name");

 

 

You can also use json syntax in "data-*" attributes,

For example, if you write out the following html:

<div id="awesome-json" data-awesome='{"game":"on"}'></div>

 

 

Obtain:

var gameStatus= $("#awesome-json").data('awesome').game;

 

 

You can also directly assign values ​​to "data-*" properties via the .data(key,value) method.

 

$item.data('status', status);

 

 

 

Replenish:

Although "data-*" is an HTML5 attribute,

But jquery is generic,

so,

On non-HTML5 pages or browsers,

You can still use the .data(obj) method to manipulate "data-*" data.