Метод data в jQuery

Метод data в jQuery даёт нам возможность связать произвольные данные с любым объектом документа или javaScript, что позволяет сделать ваш код более кратким и читаемым. Начиная с версии jQuery 1.4.3 появилась возможность использовать этот метод для объектов javaScript, а также отслеживать изменения этих данных.

Основы

Начнём с того, что вы можете вызвать метод data для jQuery объекта, а также использовать функцию $.data() напрямую.

// Использование метода: $("#myDiv").data("key","произвольное значение"); // Использование функции напрямую: $.data($("#myDiv").get(0),"key","произвольное значение");

Функция data – это низкоуровневая реализация, которая в действительности используется при вызове метода. Метод объекта jQuery гораздо удобнее, он также позволяет включать себя в какчестве цепочки вызовов.

Также, обратите внимание, что в качестве первого параметра в функцию $.data вам необходимо передавать DOM-элемент, а не объект jQuery.

Метод объекта требует двух параметров – ключ и значение. Ключ – строковая константа, а значение – любая структура данных, включая функции массивы и объекты. Существует альтернативный синтаксис, в котором можно передавать объект как один параметр:

// Можно передать объект: $("#myDiv").data({"name":"Stevie","age":21}); // Тоже самое: $("#myDiv").data("name","Stevie").data("age",21);

Теперь, если вам необходимо получить сохранённые данные, вы можете вызвать функцию data, передав ей ключ в качестве параметра:

var theValue = $("#myDiv").data("age"); // 21

Доступ к этим данным открыт в любом месте скрипта. Вы будете получать сохранённые данные, до тех пор, пока существует элемент, получаемый по заданному селектору.

var theValue = $("div:first").data("name"); // Stevie $("div:first").click(function(){ alert($(this).data("age"); // 21 });

В jQuery 1.4.3 также доступны HTML5-данные, хранимые в атрибутах. Это означает, что если у вас есть элемент, объявленный следующим образом:

<img id="img1" data-internal-id="221" width="100" height="100" />

В этом случае вы можете получить данные из атрибута data-internal-id, вызвав метод $("#img1").data("internal-id"), что несомненно удобно при AJAX-запросах.

Использование метода data для javaScript-объектов

Возможно, вы будете удивлены, но метод data также можно использовать для обычных объектов javaScript. Эта функциональность официально появилась в jQuery 1.4.3.

var myObj = {}; $(myObj).data("city","Springfield");

Приведённый пример, в действительности создаёт свойство city для заданного объекта. Почему бы в таком случае не написать просто myObj.city = "Springfield"? А отличие в том, что метод data добавляет объекту несколько полезных событий, упрощающих работу с этим объектом. Например:

var progressBar = {}; $(progressBar).bind('setData',function(e,key,value){ switch(key){ case "percent": $("#progress").width(value+"%"); $("#percentText").text(value+"%"); break; case "color": $("#progress").css("color",value); break; case "enabled": $('#progress').toggleClass("active",value); break; } }); $(progressBar).data("enabled",true).data("percent",21).data("color","green"); console.log(progressBar.enabled);

В приведённом примере мы используем метод data чтобы создать простейший API с помощью которого мы можем обновлять элемент.

Существует ещё два события, которые могут использоваться для объекта javaScript:

  • getData – срабатывает перед чтением данных. Вы можете использовать его для предобработки получаемых данных. Например, для пересчёта значения.
  • changeData – срабатывает когда данные устанавливаются или изменяются. Это событие используется в плагине jQuery datalink. С его помощью можно связать данные формы с объектом javaScript и работать с полями формы как со свойствами объекта.

За кулисами

jQuery создаёт пустой объект (для любопытных, он называется $.cache), который и является хранилищем всех значений, которые вы сохраняете с помощью метода data. Каждому элементу из DOM, который используется с методом data, присваивается уникальный идентификатор, который затем является ключом для доступа к данным в объекте $.cache.

jQuery хранит в этом кэше не только пользовательские данные, туда попадают также внутренние данные, обработчики событий, которые вы навешиваете с помощью функций live(), bind() и delegate(). Использование центрального хранилища делает jQuery более надёжным.

Заключение

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

Опубликовано: 16.11.2010 Просмотров 41538 Ссылка на оригинал Tweet it!
6 comments  

Чистяков Денис

2010.11.16 09:19

 Спасибо за подробный обзор, про работу с уттрибутами знал, а вот про «навешивание» событий на объекты — нет.
Очень полезный метод.
 

Blush

2010.11.19 14:39

 Спасибо, интересный аспект использования jQuery
 

mustang

2010.12.03 06:48

 Чета я ваще не понял зачем он. Реальный пример бы.
 

basilkot

2010.12.03 07:45

  • значит эта возможность вам ещё не была нужна :)

Slava

2012.07.30 15:56

 Похоже что при использовании этого метода, Firefox кеширует эти данные и вставляет их при следующем посещении страницы в рамках своей функции "кеширование содержимого веб страниц", в результате чего мои скрипты ведут себя неадекватно, т.к. ещё до запуска в этом объекте data появляются не ожидаемые данные. Как это исправить со стороны веб страницы?
 

Руслан

2013.04.05 17:08

 попробуйте при загрузке страници задать для $.data пустой масив
 

Николай

2013.12.07 20:43

 Какая удобная штука. Я правильно понял, мы передаем любому узлу так сказать "скрытую" информацию, которую можем впоследствии использовать?
 

basilkot

2013.12.07 22:48

  • да, Николай, именно так)

Оставить после себя комментарий

user

2016.09.15

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!