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

This article will explain in detail about JS custom data-* attribute and jquery data() method use analysis, article content quality is high, so Xiaobian share for everyone to make a reference, I hope you read this article after the relevant knowledge has a certain understanding.

People always like to add custom attributes to HTML tags to store and manipulate data. The problem with doing this is that you don't know if other scripts will reset your custom properties in the future, and you'll also cause html syntax to be inconsistent with Html specifications, among other side effects. This is why HTML5 has added a custom data attribute that you can use to do a lot of useful things. You can read the HTML5 specification, but 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 attributes are not displayed on the page, 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 do you read that data? You can of course traverse the page elements to read the attributes you want, but jquery has built-in methods to manipulate those attributes. Use jQuery's.data() method to access these "data-*" properties. One of these methods is.data(obj), which has been available since jQuery 1.4.3 and returns the corresponding data attribute. For example, you can read the data-myid attribute value 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, 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 a value directly to the "data-*" attribute via the.data(key,value) method. An important thing to note is that these "data-*" attributes should have some association with the element they are in, and should not be used as storage tools for anything. Although "data-*" is an HTML5 attribute, jquery is generic, so you can still manipulate "data-*" data using the.data(obj) method in non-HTML5 pages or browsers.

About JS custom data-* attribute and jquery data() method use analysis shared here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

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.