HTML data- * attributes for storing parameters and getting them in js

In HTML 5, tag attributes such as data- * were introduced.
About them you probably heard or seen in different projects.
For example, they are used by such fashionable comrades as Twitter Bootstrap and jQuery Mobile.

Previously used classes, for the sake of preserving information in HTML, for the purpose of later use in js.

For example, to save a unique block number, it is often written like this:
')

<div class="items">   <div class="item1">...</div>   <div class="item3">...</div>   <div class="item6">...</div>   <div class="item1">...</div>   ... </div> 

And if we need to add another class for each element? Or a modifier for the individual? Yes, of course, you can cut regular or other crutches to your taste.

As it may seem, id can be used here, but we may have blocks with the same number.

Sometimes the 'rel' attribute is used, but it can only be used for links, although I have seen it with other elements. And again, a drawback - we can write only one value into it.

And here Chip and Dale data- * attributes are rushing to our aid.

Buns

You can add to any tag and old browsers will not say anything against it.
You can write phrases in the title: data-email-id = ”190”.
You can use any string in the value.
You can use any number of such parameters for a single tag.

HTML will then turn into this:

 <div class="items">  <div class="item" data-item="1">...</div>  <div class="item" data-item="3">...</div>  <div class="item" data-item="6">...</div>  <div class="item" data-item="1">...</div>  ... </div> 

Now the most interesting, namely - work in jQuery.

Find: $('[data-email-id]') or $('[data-action=close]') or even $('[data-date^=2010]')
Get the value: var email = $(selector).attr('data-email-id')

The most interesting thing is the use of the .data () function.
In version 1.4.3, data () learned how to get our data- * attributes like this:

var action = $(selector).data('action'); // close

If we used the phrase with a hyphen, then we can get it in camelCase:

   <div id="superid" data-foo-bar="123"></div> 

    $('#superid').data('fooBar'); //  123 

One minus (or maybe not minus) is that only the original value is saved in data () (cached), and if we change the attribute value (for example, via .attr ('data-foo-bar', 456)) , then getting .data ('fooBar') will see our old value.
But no one bothers us to update the value in 2 places, if we so want:

    var baz = 150;   $(selector).data('fooBar', baz).attr('data-foo-bar', baz); 

Although, if you don’t need to track the code in, for example, firebag, you may not need to update .attr (), as it only affects the “visual” display.

In general, as soon as you need to save additional parameters in the tag, use data attributes.

PS:

Interestingly, somebody tried to store in json attributes? :)
Although this is perhaps an abnormal programming.

ZYY:

Many people are talking about the jQuery.data function (elem, key, [value])
Who does not know, this function is different from $ (selector) .data (key, [value])
It allows you to bind data to DOM elements of any objects, and not to jQuery objects. Yes, it works 60% faster, but it does not receive data- * attributes.

ZYYY:

trijin : It is not mentioned that $ (selector) .data () will return an object with all the data- * properties of the element.