HTML5 Custom data-* properties and the use of the data () method of jquery

People always like to add custom attributes to the HTML tags to store and manipulate the data. The problem with this is that you don't know if any other scripts will reset your custom attributes in the future, and in addition, you can also cause HTML syntax to be inconsistent with HTML specifications and some other side effects. This is why adding a custom data attribute to the HTML5 specification allows you to do a lot of useful things with it.

You can read the detailed specification of HTML5, but the use of this custom data property is very simple: you can add arbitrary properties to the HTML tag, which are "data-" not displayed on the page and do not affect the layout and style of your page, but are readable and writable.

One of the following code snippets is a valid HTML5 tag:

 
  
  

  
   
   
<div id= "Awesome"
  
   
   
Data-myid= "3e4ae6c4e" >some awesome data</div>
 
  
  

But how do you read this data? You can certainly traverse the page elements to read the attributes you want, but jquery has built-in methods to manipulate these attributes. Use the. Data () method of jquery to access these "data-*" properties. One method is  .data(obj) that this method appears after the jQuery1.4.3 version, and it returns the corresponding data property.

For example, you can read the attribute values in the following notation data-myid :

 
  
  

  
   
   
var myid= jQuery ("#awesome"). Data (' myID ');
  
   
   
Console.log (myID);
 
  
  

You can also "data-*"  use JSON syntax in attributes, for example, if you write the following HTML:

 
  
  

  
   
   
<div id= "Awesome-json" Data-awesome= ' {game ': ' On '} ' ></div>
 
  
  

You can access this data directly through JS, and you can get the corresponding value through the key value of JSON:

 
  
  

  
   
   
var gamestatus= jQuery ("#awesome-json"). Data (' awesome '). Game;
  
   
   
Console.log (GameStatus);
 
  
  

You can also .data(key,value) assign a value directly to a property by means of a method "data-*"  . One important thing you should be aware of is that these "data-*"  attributes should be associated with the element in which it resides, not as a storage tool for storing anything.

Although "data-*"  it is a HTML5 attribute, jquery is generic, so you can still manipulate the data in a HTML5 page or browser by using a .data(obj) method "data-*"  .