Урок - Работа с атрибутами-данных. Метод jQuery.data().

Главная » Курсы » Курс jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) » Урок - Работа с атрибутами-данных. Метод jQuery.data().
Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод 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>