JS Custom data-* and jquery data () usage

Source: Internet
Author: User

First, data-*:

Data-* is a new attribute in the HTML5.

Definition and usage of data-*:

The Data-* property is used to store private custom data for a page or application.

The Data-* property gives us the ability to embed custom data properties on all HTML elements.

Stored (custom) data can be leveraged by JavaScript in the page to create a better user experience (no Ajax calls or server-side database queries).

The Data-* property consists of two parts:

The property name should not contain any uppercase letters, and must have at least one character after the prefix "data-"

The property value can be any string

Note: The user agent completely ignores custom attributes prefixed with "data-".

Why use the Data-* property:

People always like to add custom attributes to the HTML tag to store and manipulate the data. But the problem with this is that you don't know if there will be other scripts that will reset your custom properties in the future, and you'll also cause HTML syntax to not conform to HTML specifications and some other side effects. That's why you've added a custom data property to the HTML5 specification, and you can do a lot of useful things with it. You can read the detailed specification of the HTML5, but the use of this custom data property is very simple: You can add any attribute that begins with "data-" to the HTML tag, which is not displayed on the page, it doesn't affect your page layout and style, but it's readable and writable.

Ii. data ():

<id= "Awesome"  data-myid= "3e4ae6c4e">Some Awesome data</div>

You can traverse the page elements to read the properties you want, but jquery has built-in methods to manipulate these properties. Use the jquery. Data () method to access these "data-*" properties. One way to do this is. Data (obj), which appears after the jQuery1.4.3 version, which returns the corresponding data property.

var myid= $ ("#awesome"). Data (' myID '

You can also use the JSON syntax in the "data-*" attribute:

<id= "Awesome-json"  data-awesome= ' {' Game ': ' On '} '> </div>

You can access this data through JS directly, through the JSON key value, you can get the corresponding value


You can also assign a value directly to the "data-*" property by using the. Data (Key,value) method. One important thing you should be aware of is that these "data-*" attributes should be associated with the element in which it resides, not as a storage tool for storing anything.

Although data-* is a HTML5 attribute, jquery is generic, so you can use the. Data (obj) method to manipulate "data-*" data in non-HTML5 pages or browsers.

JS Custom data-* and jquery data () usage

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.