Метод data в jQuery

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

Основы

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

// Использование метода:
$("#myDiv").data("key","произвольное значение");

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

Функция data – это низкоуровневая реализация, которая в действительности используетсясайт источник http://yapro.ru Tue Nov 16 2010 10:25:58 GMT+0300 при вызове метода. Метод объекта 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-данные, хранимые в атрибутах. Этосайт источник http://yapro.ru Tue Nov 16 2010 10:26:08 GMT+0300 означает, что если у вас есть элемент, объявленный следующим образом:

<img 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), который исайт источник http://yapro.ru Tue Nov 16 2010 10:26:23 GMT+0300 является хранилищем всех значений, которые вы сохраняете с помощью метода data. Каждому элементу из DOM, который используется с методом data, присваивается уникальный идентификатор, который затем является ключом для доступа к данным в объекте $.cache.

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

Заключение

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

Источник: css-tricks.ru

Оцени публикацию:
  • 4,20
Оценили человек: 4
Теги : jQuery, jQuery data, jQuery setData, jQuery onchange data

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » JavaScript »