Сохранение данных

.data()

С помощью этого метода, появляется возможность привязывать собственные переменные к любым элементам страницы. Метод имеет несколько вариантов использования:

.data(key, value):jQuery1.2.3
устанавливает переменную key со значением value всем выбранным элементам страницы.
.data({key1: value1, key2: value2, ...}):jQuery1.4
устанавливает группу переменных key1, key2, ... со значениями value1, value2, ..., всем выбранным элементам страницы.
.data(key):any_type1.2.3
возвращает значение переменной key у первого выбранного элемента
.data():Object1.4
возвращает объект со всеми переменными, прикрепленными к первому из выбранных элементов. Возвращенный объект имеет привычный формат {key1: value1, key2: value2, ...}

Примеры использования:

$("div").data("len", 5) установит всем div-элементам переменную len равную 5
$(".topBlock").data("shadow", true) установит элементам с классом topBlock переменную shadow со значением true
$("div").data("len") вернет значение переменной len у первого div-элемента
$("div:last").data("len") вернет значение переменной len у последнего div-элемента
$("div:last").data() вернет объект со всеми переменными, прикрепленными за последним div-элементом

Замечание: важно отметить, что используя методы .data(key) и .data(), вы получите значение переменных только у первого элемента из всех выбранных. Если вам нужны значения всех элементов, то нужно использовать методы типа .map() или .each().

Внутреннее использование data()

jQuery использует data() при организации своей работы. Например, для хранения обработчиков событий, привязанных к элементам. Все переменные, которые устанавливает jQuery для внутреннего использования начинаются с символа нижнего подчеркивания "_".

Установка переменных с помощью объекта

В предыдущих версиях библиотеки (1.4.0 - 1.4.2), при установке переменных с помощью метода .data(obj), jQuery записывал их поверх старых, удаляя тем самым не упомянутые в параметре obj переменные. Начиная с версии 1.4.3 этот недочет устранен:

  // установим на элемент с id="content" переменные a и b
  $("#content").data("a", 1);
  $("#content").data("b", 2);
 
  // установим на этот же элемент переменные b и c
  $("#content").data({"b":3, "c":4});
 
  // выведем значение переменных a и b на экран
  alert($("#content").data("a") + ", " + $("#content").data("b"));
 
  // при использовании jQuery до версии 1.4.3, на экране
  // бы появилось "undefined, 3", поскольку переменная "a" была 
  // бы стерта, при установке переменных "b" и "с".
  // Однако, начиная с jQuery-1.4.3, на экране появится сообщение "1, 3"

Ссылки

Поисковые ключи:
  • данные установленные на элементы
  • переменые установленные на элементы
  • установка переменных элементам страницы
  • получение значения переменных
  • .data()
  • data()