Use of HTML5 custom data-* data(obj) attributes and jquery's data() method_html5 tutorial skills

Perhaps when you use jquery mobile, you often see the use of data-role, data-theme, etc., for example: the header effect can be achieved through the following code:

Copy code

The code is as follows:

i It is the title

Browse through mobile phone, the effect is as follows:

Why can writing a data-role="header" achieve the effect of black bottom and centered text?

This article provides the simplest implementation method so that everyone can have an intuitive understanding of these usages.

We write an html page and customize a data-chb="header" attribute. We hope that the background color of the div area with this attribute will be black, the text will be white, and the text will be displayed in the center; if it does not have the data-chb custom attribute The div is displayed by default, and the html code is as follows:

Copy the code

The code is as follows:

I used the data-chb custom attribute for the div

I did not use the data-chb custom attribute, so I can display it how I want;

< /body>

To achieve the display effect of "the background color is black, the text is white, and the text is centered", we define the following css:

Copy code

The code is as follows:

Then we pass the following js The method is to dynamically add css definitions and change the display style of divs with data-chb attributes when the page is loaded:

Copy code

The code is as follows:

The final page display effect is as follows:

People always like to add custom attributes to HTML tags to store and manipulate data. But the problem with doing this is that you don't know if other scripts will reset your custom attributes in the future. In addition, if you do this, it will also cause the html syntax to not comply with the Html specification, as well as some other side effects. That's why a custom data attribute was added to the HTML5 specification, and you can do a lot of useful things with it.

You can read the detailed specifications of HTML5, 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 attribute pages It 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 markup:

Copy code

The code is as follows:

data-myid="3e4ae6c4e">Some awesome data

But, how to read this data Woolen cloth? You can of course iterate through the page elements to read the properties you want, but jQuery already has built-in methods for manipulating these properties. Use jQuery's .data() method to access these "data-*" properties. One of the methods is .data(obj). This method appeared after jQuery 1.4.3. It can return the corresponding data attribute.
For example, you can read the data-myid attribute value using the following writing method:

Copy code

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:

Copy code

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:

Copy code

The code is as follows:

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

console.log (gameStatus); You can also directly assign values ​​to the "data-*" attributes through the .data(key,value) method. An important thing you need to pay attention to is that these "data-*" attributes should be related to the element they are in, and do not use them as storage tools to store anything.
Translator's supplement: Although "data-*" is an attribute that only appears in HTML5, jquery is universal, so you can still use .data in non-HTML5 pages or browsers. (obj) methods to operate on "data-*" data.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn