data()

посл. ред. 03.01.2017

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

Устанавливаемые данные представляют собой пару имя, значение. Имя задаётся в виде строки, по которой впоследствии можно получить эти данные. Устанавливаемое значение может иметь любой тип данных JavaScript, кроме undefined.

Данный метод позволяет получить данные, установленные HTML-атрибутами с префиксом data-.

Варианты использования

jQ_object.data() => Object: Возвращает в виде объекта все данные, установленные для первого элемента выборки.
jQ_object.data(имя) => JavaScript: Возвращает установленные данные по указанному имени для первого элемента выборки.
jQ_object.data(имя, значение) => jQuery: Каждому элементу выборки устанавливает/изменяет данные.
jQ_object.data({имя_1: значение_1, имя_2: значение_2, ...}) => jQuery: Каждому элементу выборки устанавливает/изменяет данные. Данные передаются в виде объекта.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p data-some-info="nothing"></p>
</body>
</html>
 
<script>
$('p').data('isEmpty', true);

var some_info = $('p').data('some-info');
var someInfo = $('p').data('someInfo');
var isEmpty = $('p').data('isEmpty');

$('p').html('some-info: ' + some_info + '<br>'
  + 'someInfo: ' + someInfo + '<br>'
  + 'isEmpty: ' + isEmpty);
</script>

some-info: nothing
someInfo: nothing
isEmpty: true