HTML-атрибуты data и jQuery

Комментарии ()

В HTML 5 введены атрибуты тегов data для хранения параметров и получения их в js.  Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.

Использование

Поиск: 

$('[data-email-id]')

или

$('[data-action=close]')

или

$('[data-date^=2010]')

Получение значения:

var email = $(selector).attr('data-email-id')

или

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

Вернет объект со всеми data-* свойствами элемента:

$(selector).data()

При использовании словосочетание через дефис, то мы получаем его в camelCase:

<div id="superid" data-foo-bar="123"></div>
$('#superid').data('fooBar'); // вернет 123

Нюанс

В data() хранится только изначальное значение (кешируется), и если мы изменим значение атрибута (например, через .attr(‘data-foo-bar’, 456)), то получая .data('fooBar') увидим наше старое значение. 
Но никто не мешает нам обновлять значение в 2х местах, если мы так захотим:

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

 


Webit.in.ua 2013