↑ jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) | ||||
Урок - Работа с атрибутами-данных. Метод jQuery.data(). | ||||
← Предыдущий урок Урок - Событие scroll в jQuery - скролирование содержимого.
|
Следующий урок → Урок - Галереи для jQuery 1.9.1
|
Метод jQuery.data() позволяет сохранять дополнительные данные для каждого элемента из набора элементов или получить данные для первого элемента из набора элементов.
Синтаксис метода jQuery.data().
Метод jQuery.data() имеет несколько вариантов синтаксиса:
- Синтаксис для сохранения данных
- jQuery(<selector>).data(<key>, <value>)
- jQuery(<selector>).data(<object>)
- Синтаксис для чтения данных
- jQuery(<selector>).data(<key>)
- jQuery(<selector>).data()
где
- <selector> - стандартный селектор в jQuery.
- <key> - строка, имя под которым хранятся данные.
- <value> - данные которые необходимо сохранить.
- <object> - массив, который используется для сохранения данных.
Сохранение данных с помощью метода jQuery.data().
Метод jQuery.data() позволяет прикрепить данные любого типа для любого DOM-элемента, при этом избегая циклических ссылок и утечек памяти.
Для одного элемента можно установить несколько значений и позже их извлечь.
// сохраняем парами название-значение jQuery("#example").data("bool", true); jQuery("#example").data("number", 997); jQuery("#example").data("float", 9.95); jQuery("#example").data("str", 'Simple string'); jQuery("#example").data("array", {'key1': 1, 'key2': 'string', key3: {key4: 'text'}}); jQuery("#example").data("array2", [1, 2, 3, [10,20]]); console.log(jQuery("#example").data("bool")); // true console.log(jQuery("#example").data("number")); // 997 console.log(jQuery("#example").data("float")); // 9.95 console.log(jQuery("#example").data("str")); // Simple string console.log(jQuery("#example").data("array")); // {'key1': 1, 'key2': 'string', key3: {key4: 'text'}} console.log(jQuery("#example").data("array2")); // [1, 2, 3, [10,20]] // сохраняем массивом jQuery("#example").data({ obj1: false, obj2: [ 1, 2, 3 ] }); console.log(jQuery("#example").data("obj1")); // false console.log(jQuery("#example").data("obj2")); // [ 1, 2, 3 ] // получаем все сохраненные данные console.log(jQuery("#example").data());
В jQuery 1.4.3 изменение данных элемента методом jQuery.data() расширяет первичные данные сохраненные с этим элементом. Библиотека jQuery сама использует метод jQuery.data() для сохранения информации под именами 'events' и 'handle' и резервирует для ситемного использования имена начинающиеся с символа подчеркивания ('_').
Из-за различного взаимодействия с браузерами метод jQuery.data() не может быть использован для элементов <object> (если это не плагин Flash), <applet>, <embed>.
Дополнительное примечание:
Обратите внимениа, что мето jQuery.data() не обеспечивает кросс-платформеную поддержку установки данных для XML-документов, а Internet Explorer не позволяет данным быть прикрепленным через expando-свойства.
Пример использования метода jQuery.data():
Сохранение и чтение данных из DIV-элемента.
<!DOCTYPE html> <html> <head> <style> div { color:blue; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div> The values stored were <span></span> and <span></span> </div> <script> $("div").data("test", { first: 16, last: "pizza!" }); $("span:first").text($("div").data("test").first); $("span:last").text($("div").data("test").last); </script> </body> </html>
Чтение данных с помощью метода jQuery.data().
При чтении данных метод jQuery.data() возвращает значение указанного параметра или значение DOM-атрибута dasta-*, первого элемента из jQuery-набора элементов.
Если не указано имя атрибута, то jQuery.data() вернет все данные.
Метод jQuery.data() позволяет прикрепить данные любого типа для любого DOM-элемента, при этом избегая циклических ссылок и утечек памяти. Мы можем получить несколько различных значений для одного элемента за один раз, или в виде набора:
console.log( jQuery('body').data('key') ); console.log( jQuery('body').data() );
В случае, если данные не были установлены будет возвращено undefined.
console.log( jQuery('body').data('key') ); // undefined jQuery('body').data('key', 1000) console.log( jQuery('body').data('key') ); // 1000
Начиная с jQuery 1.4.3 HTML5-атрибуты данных (data-*) автоматически прикрепляются к объекту данных jQuery. Обработка названий атрибутов данных с вложенным тире ('-') была изменена в jQuery 1.6, чтобы соответствовать спецификации W3C HTML5.
Смотрите пример, с учетом использования HTML атрибутов даных:
<div data-type="page" data-page-id="99" data-published="false" data-settings='{"author":"Ivan Draco"}'></div>
Обращение в атрибутам данных, используя jQuery будет следующим:
console.log( jQuery("div").data("type") ); // page console.log( jQuery("div").data("pageId") ); // 99 console.log( jQuery("div").data("published") ); // false console.log( jQuery("div").data("settings").author ); // Ivan Draco
Каждый раз происходит попытка преобразование строки в JаvaScript-значение (включая логические, числа, объекты, массивы и NULL) иначе значение остается строкой. Чтобы получить значение в виде строки, без преобразования, используйте метод jQuery.attr(). Если первый символ атрибута открывающая квадратная скобка '[' или открывающая фигурная скобка '{', то используется метод jQuery.parseJSON() для разбора строки. Атрибуты данных (data-*) берутся один раз и больше не доступны (данные сохраняются в jQuery).
Вызов метода jQuery.data() без аргументов возвращает все значения в виде JavaScript-объекта. Этот объект может быть безопасно кэширован в переменной до тех пор, как новый объект не сохранен с помощью jQuery.data(). Используйте объект непосредственно, чтобы быстрее читать и сохранять отдельные значения, вместо использования jQuery.data() для каждого значения:
var divData = $("#example").data(); if ( divData.type == 'page') { divData.title = 'Title'; }
Дополнительное примечание:
Обратите внимениа, что мето jQuery.data() не обеспечивает кросс-платформеную поддержку установки данных для XML-документов, а Internet Explorer не позволяет данным быть прикрепленным через expando-свойства.
Пример использования метода jQuery.data():
Сохранение/получение данных с именем 'blah' хранящиеся в элемента.
<!DOCTYPE html> <html> <head> <style> div { margin:5px; background:yellow; } button { margin:5px; font-size:14px; } p { margin:5px; color:blue; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-1.9.1.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").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> </body> </html>
↑ jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) | ||||
Урок - Работа с атрибутами-данных. Метод jQuery.data(). | ||||
← Предыдущий урок Урок - Событие scroll в jQuery - скролирование содержимого.
|
Следующий урок → Урок - Галереи для jQuery 1.9.1
|