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

HTML 5 introduced tag attributes like data- * .
You probably heard or saw about them in different projects.
For example, they are used by such fashionable comrades as Twitter Bootstrap and jQuery Mobile.

Previously, classes were used to save information in HTML, for the purpose of subsequent use in js.

For example, to save a unique block number, they often write this:

  
...
  
...
  
...
  
...
  ...

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

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

Sometimes they use the attribute 'rel', but it can be used only for links, although I have seen other elements as well. And again, the disadvantage is that we can write only one value in it.

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

Buns

You can attach to any tag and old browsers will not say anything against.
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 one tag.

HTML will then turn into this:

  
...
  
...
  
...
  
...
  ...

Now the most interesting part, 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 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 through a hyphen, then we can get it in camelCase:

   $('#superid').data('fooBar'); // вернет 123

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

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

Although, if you do not need to track the code in, for example, the firebug, then you can not update .attr (), since it only affects the “visual” display.

In general, as soon as you like to save additional parameters in a tag, use data-attributes.

PS:

I wonder if anyone tried to store in json attributes? :)
Although this is perhaps in abnormal programming.

PSY:

Many people talk about the function jQuery.data (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 to any objects, 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 data- * properties of the element.