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

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.