В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.
Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.
Например, для сохранения уникального номера блока часто пишут так:
<div class="items">
<div class="item1">...</div>
<div class="item3">...</div>
<div class="item6">...</div>
<div class="item1">...</div>
...
</div>
А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.
Как может показаться, тут можно задействовать id, но у нас могут быть блоки с одинаковым номером.
Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.
И вот нам на помощь спешат Чип и Дейл атрибуты data-*.
Плюшки
Можно присобачить к любому тегу и старые браузеры ничего не скажут против.
Можно в названии писать словосочетания: data-email-id=”190”.
Можно использовать любую строку в значении.
Можно использовать любой количество таких параметров для одного тега.
HTML тогда превратится в это:
<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>
Теперь самое интересное, а именно — работа в jQuery.
Находим: $(‘[data-email-id]’) или $(‘[data-action=close]’) или даже $(‘[data-date^=2010]’)
Получем значение: var email = $(selector).attr(‘data-email-id’)
Самое интересное — это использование функции .data().
В версии 1.4.3 data() научилось получать наши атрибуты data-* вот таким образом:
var action = $(selector).data(‘action’); // close
Если же мы использовали словосочетание через дефис, то мы сможем получить его в camelCase:
<div id="superid" data-foo-bar="123"></div>
  $(selector).data(‘fooBar’); // вернет 123
Один минус (а может и не минус) — это то, что в data() сохранится только изначальное значение, и если мы изменим значение атрибута (например, через .attr(‘data-email-id’, 90)), то получая .data(‘emailId’) увидим наше старое значение.
Но никто не мешает нам обновлять значение в 2х местах, если мы так захотим:
var newemail = 150;
$(selector).data('emailId', newemail).attr('data-email-id', newemail);
Хотя, если вам не нужно отслеживать код в, например, фаербаге, то можно и не обновлять .attr(), так как он влияет только на “визуальное” отображение.
В общем, как только вам понабиться сохранить дополнительные параметры в теге, то используйте data-атрибуты.
ЗЫ:
Интересно, кто нибудь пробовал хранить в атрибутах json? :)
Хотя это, пожалуй, в ненормальное программирование.
ЗЫЫ:
Многие говорят про функцию jQuery.data(elem, key, [value])
Кто не знает, это отличная функция от $(selector).data(key, [value])
Она позволяет привязывать данные к DOM-элементам, а не к jQuery объектам. Да, она работает на 60% быстрей, но вот data-* атрибуты она не получает.
Автор: Dzorogh
