Data-атрибуты

HTML5 даёт нам возможность использовать произвольные data-атрибуты для элементов:

<div data-foo="bar"></div>

Для работы с data-атрибутами в jQuery есть несколько методов:

data()	получение всех значений в формате ключ-значение: { key: value }
data(key)	получение значения по ключу
data(key, value)	установка значения
data({ key1: value, key2: value })	установка нескольких значений
removeData(key)	удаление значения по ключу или ключам
removeData([key])	удаление нескольких значений

Вот сейчас будет сложный и важный момент!

МетодjQuery.data() не манипулирует атрибутами HTML, а работает со своим реестром, и лишь при отсутствии там данных пытается заполучить информацию из соответствующего атрибута data-*.

Не попадитесь!

<div id="my" data-foo="bar"></div>

$("#my").data("foo");      // >>> bar
$("#my").attr("data-foo"); // >>> bar

$("#my").data("foo", "xyz");

$("#my").data("foo");      // >>> xyz
$("#my").attr("data-foo"); // >>> bar !!!

$("#my").attr("data-foo", "def");

$("#my").data("foo");      // >>> xyz !!!
$("#my").attr("data-foo"); // >>> def

Наглядный пример:

Работа с методом data()