JS Custom data-* and jquery data () usage

First, data-*:

Data-* is a new attribute in the HTML5.

Definition and usage of data-*:

The Data-* property is used to store private custom data for a page or application.

The Data-* property gives us the ability to embed custom data properties on all HTML elements.

Stored (custom) data can be leveraged by JavaScript in the page to create a better user experience (no Ajax calls or server-side database queries).

The Data-* property consists of two parts:

The property name should not contain any uppercase letters, and must have at least one character after the prefix "data-"

The property value can be any string

Note: The user agent completely ignores custom attributes prefixed with "data-".

Why use the Data-* property:

People always like to add custom attributes to the HTML tag to store and manipulate the data. But the problem with this is that you don't know if there will be other scripts that will reset your custom properties in the future, and you'll also cause HTML syntax to not conform to HTML specifications and some other side effects. That's why you've added a custom data property to the HTML5 specification, and you can do a lot of useful things with it. You can read the detailed specification of the HTML5, but the use of this custom data property is very simple: You can add any attribute that begins with "data-" to the HTML tag, which is not displayed on the page, it doesn't affect your page layout and style, but it's readable and writable.

Ii. data ():

<id= "Awesome"  data-myid= "3e4ae6c4e">Some Awesome data</div>

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

var myid= $ ("#awesome"). Data (' myID '

You can also use the JSON syntax in the "data-*" attribute:

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

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

Var

You can also assign a value directly to the "data-*" property by using the. Data (Key,value) method. 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-* is a HTML5 attribute, jquery is generic, so you can use the. Data (obj) method to manipulate "data-*" data in non-HTML5 pages or browsers.

JS Custom data-* and jquery data () usage