adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Метод data в jQuery

Метод 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-запросах.

В догонку

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

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

Итог

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

Последние из рубрики

Комментарии(0)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению