.data()

Метод .data() позволяет нам прикреплять данные любого типа к элементам DOM таким образом, что исключаются циклические ссылки, и, следовательно, утечки памяти.

Мы можем установить несколько различных значений для одного элемента и извлечь их позже:

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }

Использование метода data() для обновления данных не влияет на атрибуты в DOM. Для установки значения атрибута data-*, используйте attr.

Перед jQuery 1.4.3, .data( obj ) полностью заменял все данные. Начиная с jQuery 1.4.3, данные расширяются с помощью поверхностного слияния.

Начиная с jQuery 3, каждая последовательность из двух символов "-" (U+002D), за которой следует строчная ASCII-буква в ключе, заменяется заглавной версией буквы, в соответствии с API набора данных HTML. Выражение типа $( "body" ).data( { "my-name": "aValue" } ).data(); вернёт { myName: "aValue" }.

Из-за того, как браузеры взаимодействуют с плагинами и внешним кодом, метод .data() не может быть использован для <object> (если это не плагин Flash), <applet> или <embed> элементов.

• Обратите внимание, что в настоящее время этот метод не обеспечивает кросс-платформенную поддержку установки данных в XML-документах, так как Internet Explorer не позволяет прикреплять данные через свойства expando.
• undefined не распознаётся как значение данных. Вызовы, такие как .data( "name", undefined ), вернут объект jQuery, на котором был вызван метод, позволяя цепочку вызовов.

Метод .data() позволяет нам читать данные, ранее связанные с элементами DOM. Мы можем извлечь несколько различных значений для одного элемента по одному или как набор:

var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
 
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }

Вызов .data() без параметров возвращает объект JavaScript, содержащий каждое сохранённое значение в качестве свойства. Объект может быть использован непосредственно для получения значений данных (обратите внимание, что имена свойств, изначально содержащие дефисы, будут изменены, как описано ниже).

Начиная с jQuery 3, каждая последовательность из двух символов "-" (U+002D), за которой следует строчная ASCII-буква в ключе, заменяется заглавной версией буквы, в соответствии с API набора данных HTML. Выражение типа $( "body" ).data( { "my-name": "aValue" } ).data(); вернёт { myName: "aValue" }.

Атрибуты HTML5 data-*

Начиная с jQuery 1.4.3, data-* атрибуты используются для инициализации данных jQuery. Атрибуты data-* элемента извлекаются в первый раз, когда вызывается метод data(), а затем больше не используются или не изменяются (все значения хранятся внутри jQuery).

Делается все возможное, чтобы преобразовать строковое значение атрибута в значение JavaScript (это включает булевы значения, числа, объекты, массивы и null). Строка преобразуется в число только в том случае, если это не изменит её представление (например, строка "100" преобразуется в число 100, но "1E02" и "100.000" остаются строками, потому что их числовое значение 100 сериализуется в "100"). Если строка начинается с '{' или '[', используется jQuery.parseJSON, чтобы разобрать её; она должна соответствовать валидному синтаксису JSON включая строковые имена свойств. Строка, не поддающаяся разбору как значение JavaScript, не преобразуется.

Чтобы получить значение атрибута data-* как не преобразованную строку, используйте метод attr().

Начиная с jQuery 1.6, дефисы в именах атрибутов data-* обрабатываются в соответствии с API набора данных HTML.

Например, приведённый HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

Следующие сравнения верны:

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

• Обратите внимание, что в настоящее время этот метод не обеспечивает кросс-платформенную поддержку установки данных в XML-документах, так как Internet Explorer не позволяет прикреплять данные через свойства expando.