Категории: Ядро > Доступ к объектам jQuery
Описание: Сохраняет произвольные данные, связанные с соответствующим элементом.
.data( ключ, значение )
Добавлена в версию: 1.2.3
ключ
Строка называющая часть данных для установки.
значение
Любое
Новое значение данных.
Метод .data() позволяет нам присоединить данные любого типа к элементам DOM без риска циклической зависимости, а также утечек памяти.
Мы можем установить несколько различных значений для одного элемента и получить их позже:
$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
В jQuery 1.4.3 настройка данных элемента объекта с .data(obj)
расширяет данные, ранее сохраненные с этим элементом. jQuery сама использует метод .data() для сохранения информации под именами "события" и "обработчики", а также резервирует за собой все имена данных, начинающееся с символа подчеркивания ('_') для внутреннего использования.
До jQuery 1.4.3 (начиная с jQuery 1,4) метод .data() полностью заменял все данные, а не просто расширение объекта данных. Если вы используете сторонние плагины это не может быть целесообразным, чтобы полностью заменить объект данных элемента, так как плагины могут также иметь набор данных.
Из-за способа браузеров взаимодействовать с плагинами и внешним кодом, метод .data() не может быть использован на элементы <object> (если это не Flash плагин), <applet> или <embed>.
Данные атрибутов HTML 5
По состоянию на jQuery 1.4.3 данные атрибутов HTML 5 будут автоматически внесенны в объект данных jQuery.
Например, следующий HTML:
<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>
Весь следующий код jQuery будет работать.
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";
Обратите внимание, что строки остаются нетронутыми в то время как значения JavaScript преобразуются в связанные с ними значения (в том числе логические значения, числа, объекты, массивы, и нуль). Данные-атрибуты берут в первый раз данные свойство получено, а затем больше не доступен или мутировал (все данные затем хранятся внутри в jQuery).
Дополнительные примечания:
- Обратите внимание, что этот метод в настоящее время не обеспечивает кросс-платформенной поддержки для настройки данных в XML-документах, так Internet Explorer не позволяет данным быть подключенным через расширенные свойства.
Пример
Сохраняет, а затем получает значение из элемента div.Пример - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
});
</script>
<style>
div { color:blue; }
span { color:red; }
</style>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
</body>
</html>
Описание: Возвращает данные, которые хранятся в элементе под определенным именем, установленные ранее с помощью
data(ключ, значение).
.data( ключ )
Добавлена в версию: 1.2.3
key
Имя сохраненных данных.
.data( )
Добавлена в версию: 1.4
Метод .data() позволяет нам присоединить данные любого типа к элементам DOM без риска циклической зависимости, а также утечек памяти.
Мы можем получить несколько различных значений для одного элемента в одно время, или в виде набора:
alert($('body').data('foo'));
alert($('body').data());
Предупреждающие сообщения со значениями данных, что показанны выше, установленны на элемент body. Если ничего не было установленно на этот элемент, будет возвращенна пустая строка:
Вызов .data() без параметров вернет все значения в виде объекта JavaScript. Этот объект может быть безопасно сохранен в переменной до тех пор, пока новый объект не установлен с .data(obj). Использование объекта непосредственно для получения или установки значения быстрее, чем делать отдельные вызовы .data(), чтобы получить или установить каждое значение:
var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
mydata.count = 43;
mydata.status = "embiggened";
}
Дополнительные примечания:
- Обратите внимание, что этот метод в настоящее время не обеспечивает кросс-платформенной поддержки для настройки данных в XML-документах, так Internet Explorer не позволяет данным быть подключенным через расширенные свойства.
Пример
Получение данных, хранящихся в элементе под именем «blah».
$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
Пример - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
});
</script>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
</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>
</body>
</html>
Была ли эта информация полезной?
