Атрибуты data-*

Мне кажется, что не меньший прорыв, чем DOCTYPE. И столь же непонятный для людей, далеких от разработки. Но мы-то с вами знаем, каких усилий иногда требовала передача вместе с тегом дополнительной информации для обработки скриптом. Обычная практика — применять для этих целей атрибуты class или id, но пользоваться ими не всегда удобно, все же создавались они для другого.

Есть, конечно, выход в виде конструкции data JavaScript — фрэйм-ворка jQuery. Делалось это примерно так:

$(".album")[0].data("band", "doors");

$(". album")[0].data("title", "stange days");

<div class= "album">…</div>

Далее сохраненные значения можно извлекать и использовать. Приемлемо, но по сути это не более, чем «костыли».

Теперь же у нас есть специальная группа пользовательских атрибутов вида data-*, с помощью которых мы можем добавлять в тег любую дополнительную информацию. Тот же пример:

<div class= "album" data-band= "doors" data-title="stange days">…</div> <div class= "album" ata-band= "doors" data-title="hard-rock cafe">…</div>

Так гораздо нагляднее и удобнее, правда?

А j Query выкидывать не стоит, фреймворк идет в ногу со временем, и с появлением нового атрибута просто стало еще удобнее работать:

$(".album").[0].data("band");   "doors"

$(".album").[0].data("title");   "stange  days"

$(".album").[1].data("band");   "doors"

$(".album").[1].data("title");   "hard-rock  cafe";