Содержание:
jQuery.data( элемент, ключ, значение )Возвращает: Объект
Описание: Хранение произвольных данных, связанных с указанным элементом. Возвращает установленное значение.
-
версия добавлена: 1.2.3jQuery.data( элемент, ключ, значение )
Примечание: Это метод низкого уровня; более удобный .data() также доступен.
Метод jQuery.data() позволяет прикреплять данные любого типа к элементам DOM таким образом, чтобы избежать циклических ссылок и, следовательно, утечек памяти. jQuery гарантирует, что данные будут удалены при удалении элементов DOM с помощью методов jQuery, а также при выходе пользователя со страницы. Мы можем установить несколько различных значений для одного элемента и получить их позже:
jQuery.data( document.body, "foo", 52 ); jQuery.data( document.body, "bar", "test" );
Дополнительные заметки:
- Обратите внимание, что этот метод в настоящее время не поддерживает кросс-платформенную установку данных для XML-документов, так как Internet Explorer не позволяет прикреплять данные через свойства expando.
-
undefinedне распознается как значение данных. Вызовы, такие какjQuery.data( el, "name", undefined )будут возвращать соответствующие данные для "имя", и поэтому эквивалентныjQuery.data( el, "name" ).
Пример:
Хранение и получение значения из элемента div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
var div = $( "div" )[ 0 ];
jQuery.data( div, "test", {
first: 16,
last: "pizza!"
});
$( "span" ).first().text( jQuery.data( div, "test" ).first );
$( "span" ).last().text( jQuery.data( div, "test" ).last );
</script>
</body>
</html> Демо:
jQuery.data( элемент, ключ )Возвращает: Объект
Описание: Возвращает значение в хранилище данных с заданным именем для элемента, как установленное jQuery.data(element, name, value), или полное хранилище данных для элемента.
-
версия добавлена: 1.2.3jQuery.data( элемент, ключ )
-
версия добавлена: 1.4jQuery.data( элемент )
- элементТип: ЭлементЭлемент DOM, который необходимо запросить для данных.
-
Примечание: Это метод низкого уровня; более удобный .data() также доступен.
О атрибутах HTML5 data-* : Этот метод низкого уровня НЕ извлекает атрибуты data-* , если их не извлек более удобный метод .data().
Метод jQuery.data() позволяет прикреплять данные любого типа к элементам DOM таким образом, что избежать циклических ссылок и, следовательно, утечек памяти. Мы можем получить несколько различных значений для одного элемента по одному или как набор:
alert( jQuery.data( document.body, "foo" ) ); alert( jQuery.data( document.body ) );
Вышеприведенные строки выводят значения данных, которые были установлены на элементе body. Если на этом элементе ничего не было установлено, возвращается пустая строка.
Вызов jQuery.data( element ) получает все сопоставленные с элементом значения в виде JavaScript-объекта. Обратите внимание, что сам jQuery использует этот метод для хранения данных для внутренних целей, например, обработчиков событий, поэтому не предполагайте, что он содержит только данные, сохранённые вашим собственным кодом.
Примечание: этот метод в настоящее время не обеспечивает кросс-платформенную поддержку установки данных для XML-документов, так как Internet Explorer не позволяет прикреплять данные через свойства expando.
Пример:
Получение данных с именем "blah", сохранённых для элемента.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
margin: 5px;
background: yellow;
}
button {
margin: 5px;
font-size: 14px;
}
p {
margin: 5px;
color: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$( "button" ).on( "click", function() {
var value,
div = $( "div" )[ 0 ];
switch ( $( "button" ).index( this ) ) {
case 0 :
value = jQuery.data( div, "blah" );
break;
case 1 :
jQuery.data( div, "blah", "hello" );
value = "Stored!";
break;
case 2 :
jQuery.data( div, "blah", 86 );
value = "Stored!";
break;
case 3 :
jQuery.removeData( div, "blah" );
value = "Removed!";
break;
}
$( "span" ).text( "" + value );
} );
</script>
</body>
</html> 
