Use of the Custom data-* attribute of HTML 5 and the data () method of jquery

Source: Internet
Author: User

People always like to add custom attributes to HTML tags to store and operate on data. However, you do not know whether other scripts will reset your custom attributes in the future. In addition, if you do this, the html syntax does not conform to the Html specification, and some other side effects are also caused. This is why a custom data attribute is added to the HTML5 specification, and you can use it to do many useful things. You can read the detailed HTML5 specifications, 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 are not displayed. They do not affect the layout and style of your pages, but are readable and writable. The following code snippet is a valid HTML5 Tag: <div id = "awesome" data-myid = "3e4ae6c4e"> Some awesome data </div> however, how can we read this data? Of course you can traverse the page elements to read the desired attributes, but jquery has built-in methods to operate these attributes. Use jQuery's. data () method to access these "data-*" attributes. One of the methods is. data (obj), which appears after jQuery1.4.3 and can return corresponding data attributes. For example, you can use the following method to read the data-myid attribute value: var myid = jQuery ("# awesome "). data ('myid'); console. log (myid); www.2cto.com you can also use the json syntax in the "data-*" attribute. For example, if you write the following html: <div id = "awesome-json" data-awesome = '{"game": "on"}'> </div> You can directly access this data through js, with the json key value, you can get the corresponding value: var gameStatus = jQuery ("# awesome-json "). data ('awess '). game; console. log (gameStatus); you can also use. the data (key, value) method directly assigns values to the "data-*" attribute. One important thing you should pay attention to is that these "data-*" attributes should be related to the elements in which they are stored. do not regard them as storage tools for storing anything. Although "data-*" is a property that appears in HTML5, jquery is generic. Therefore, you can still use it on non-HTML5 pages or browsers. the data (obj) method is used to operate "data-*" data.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.