Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use the custom data-* attribute of html5 and the data () of jquery". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the custom data-* attribute of html5 and data () of jquery".

People always like to add custom attributes to the HTML tag to store and manipulate data. But the problem with this is that you don't know if other scripts will reset your custom properties in the future. in addition, doing so will cause html syntax to be inconsistent with the Html specification, as well as some other side effects. This is why a custom data attribute has been added to the HTML5 specification, and you can do a lot of useful things with it.

You can read the detailed specification of HTML5, but the use of this custom data attribute is very simple, that is, you can add any attribute that begins with "data-" to the HTML tag, these properties page is not displayed, it will not affect your page layout and style, but it is readable and writable.

The following code snippet is a valid HTML5 tag:

The code is as follows:

Some awesome data

But how to read these data? Of course you can traverse the page elements to read the attributes you want, but jquery already has built-in methods to manipulate these attributes. Use the .data () method of jQuery to access these "data-*" properties. One of the methods is .data (obj), which appears after the jQuery1.4.3 version and returns the corresponding data property.

For example, you can read the value of the data-myid property as follows:

The code is as follows:

Var myid= jQuery ("# awesome") .data ('myid')

Console.log (myid)

You can also use json syntax in the "data-*" attribute, for example, if you write the following html:

The code is as follows:

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

The code is as follows:

Var gameStatus= jQuery ("# awesome-json"). Data ('awesome'). Game

Console.log (gameStatus)

You can also assign values to the "data-*" property directly through the .data (key,value) method. An important thing to note is that these "data-*" attributes should be related to the element in which they are located, and should not be used as a storage tool for storing anything.

Thank you for reading, the above is "how to use the custom data-* attribute of html5 and the data () of jquery". After the study of this article, I believe you have a deeper understanding of how to use the custom data-* attribute of html5 and the data () of jquery. The specific use also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.