HTML5 Custom Properties Data-* and Jquery.data detailed description

Source: Internet
Author: User

Transferred from: http://blog.netsh.org/posts/html-data-jquery_1812.netsh.html

The new HTML5 standard allows you to embed a data-*-like attribute in a common element tag to enable access to some simple data. It is unlimited in number and can be modified dynamically by JavaScript, and CSS selectors are also supported for styling. This makes the data property particularly flexible and very powerful. With this property, we are able to make data presets or storage more orderly and intuitively. The following describes the actual application of the HTML5 Dataset storage, as well as four ways to access it, including jquery.

Guide/Jump to

    • 1 examples of HTML5 Dataset storage
    • 2 Accessing the DataSet using GetAttribute, SetAttribute
    • 3 Accessing a DataSet using the dataset API
    • 4 Accessing a DataSet using the Jquery.attr method
    • 5 Accessing a DataSet using the Jquery.data method
    • 6 Jquery.data JSON information for parsing datasets
    • 7 CSS, jQuery find data property corresponding element
    • 8 HTML5 Dataset Browser support situation
examples of HTML5 Dataset storage

Assigning a data property to a single element stores it, for example, this is a span element whose content is the name of a piece of music, and we have more information on how to pre-provision the song directly in its HTML tag, and it looks like this can be written on the HTML source:

<span id= "Music-latch" class= "Musique"
Data-date= "2013"
Data-genre= "Electronic"
Data-album= "Settle (Deluxe)"
data-artist= "Disclosure"
Data-composer= "Howard Lawrence & Guy Lawrence" >
Latch (feat. Sam Smith)
</span>

In this way, we will simply embed the album, artist and genre information directly into the span tag for this song.

One more example, such as embedding a localized translation:

<H2 id= "FOOD-PKD" class= "food"
Data-en= "Peking Duck"
Data-available
Data-ja= "Beijing ダック"
Data-fr= "Canard Laquéde Pékin"
Data-de= "Pekingente" >
Beijing Roast Duck

In this way, without changing the appearance of the page, we can set the machine translation while detecting data-xx, to manually provide more accurate and precise translation.

Where data-available has no value and allows null values, for example in this case, it only means that the food can be ordered, so there is no need to have a value.

access datasets using GetAttribute, SetAttribute

As a label for HTML elements, the dataset's access is also subject to getattribute, SetAttribute, and the two methods are the most compatible.

For example, for the above two examples, we can run a

Get
var album = document.getElementById ("Music-latch"). GetAttribute ("Data-album");
Console.log (album);

Set
document.getElementById ("FOOD-PKD"). SetAttribute ("Data-en", "Beijing stuffed Duck");

This allows the dataset data to be accessed in a more compatible way. Any changes that are made can be reflected in real time to the element data property.

However, this method is relatively low-end, if you encounter multiple data-* custom fields, want to get all the data properties at once and wrapped into objects, you must also do a loop, very troublesome. But we also have a DataSet API available.

Accessing a DataSet using the dataset API

With the. DataSet API, it is easier to get all the data fields of an element and to make it easy to access and traverse in an object way. For example, for the example above, you can run

Get
var songd = document.getElementById ("Music-latch"). DataSet;
var album = Songd.album;
Console.log (album);

Set
document.getElementById ("FOOD-PKD"). Dataset.en = "Beijing stuffed Duck";

Add
document.getElementById ("FOOD-PKD"). dataset.es = "Pato laqueado a la Pekinesa";

When we visit data, we do not need "data-" keyword, direct use of . Dataset.name can be accessed. This is more convenient than the above method. Any changes that are made can be reflected in real time to the element data property.

If the hyphen "-" is involved, a camel can be used to access:

<span id= "en" data-en-us= "peiking Duck" ></span>

Where en-us is to be written Enus:

var en = document.getElementById ("en"). Dataset.enus;

Accessing a DataSet using the Jquery.attr method

jquery has excellent compatibility. Similar to the GET, Setattribute,jquery. attr () method can also be used in such cases, for example, for the above example, you can run

Window.jquery && (function ($) {
Get
var album = $ ("#music-latch"). attr ("Data-album");
Console.log (album);

Set
$ ("#food-PKD"). attr ("Data-en", "Beijing stuffed Duck");
}) (Window.jquery);

This is exactly the same as when the jquery.attr is applied to other attributes, and any changes made can be reflected in real time to the element data property.

Accessing a DataSet using the Jquery.data method

jquery starts with the 1.4.2 version to support the $.data () method to directly access the Data property, without the need to write "data-" keywords, for example, for the above example, you can run

Window.jquery && (function ($) {
Get
var album = $ ("#music-latch"). Data ("album");
Console.log (album);

Set
$ ("#food-PKD"). Data ("en", "Beijing stuffed Duck");
}) (Window.jquery);

This method also has excellent access to the Data property, but it is important to note that the changes made to the Jquery.data data are not reflected in the HTML element on the database property.

That is, jquery now thinks that the data-en of the #food-pkd element is "Beijing stuffed Duck", but on the HTML element its value remains unchanged, still "Peking Duck":

Window.jquery && (function ($) {
Set
$ ("#food-PKD"). Data ("en", "Beijing stuffed Duck");
Console.log ($ ("#food-PKD"). Data ("en"));
LOG: "Beijing stuffed Duck"
}) (Window.jquery);

Console.log (document.getElementById ("FOOD-PKD"). Dataset.en);
LOG: "Peking Duck"

Jquery.data parsing JSON information for a Dataset

In fact, jquery can also intelligently extract JSON information from data into objects:

<span id= "SONG-JSN"
Data-meta= ' {' name ': ' Latch ', ' album ': ' Disclosure ', ' Date ': '} ' >
Latch (feat. Sam Smith)
</span>

Window.jquery && (function ($) {
var jsn = $ ("#song-jsn"). Data ("meta");
Console.log (Jsn.album);
LOG: "Disclosure"
}) (Window.jquery);

This way, you don't have to write a bunch of data-album, data-lyrics, data-artist, you can just write all the song information in JSON and put it in a separate data tag!

CSS, jQuery find Data property corresponding element

If I want all album names (Data-album) to be disclosure in red, in the CSS selector, we can match

. musique[data-album= ' Disclosure ']
{
color:red;
}

In this case, the span text in the above example will appear in red.

If I want all the food now available to be ordered after clicking the popup dialog, in jquery, you can also use the brackets [] to easily match in the following way

Window.jquery && (function ($) {
$ (". Food"). Filter ("[Data-available]"). each (function () {
$ (this). Click (function () {
Alert ("It ' s available!");
});
});
}) (Window.jquery);

How, does it feel that this kind of free and easy storage method can bring very powerful effect?

HTML5 Dataset Browser support situation

The support for the HTML5 data property is bad on ie:

Internet explorer:11+

chrome:8+

firefox:6+

opera:11.1+

safari:6+

Android browser:4+

Therefore, consider using GetAttribute, setattribute to access the dataset if compatibility is to be considered.

HTML5 Custom Properties Data-* and Jquery.data detailed description

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.