Отличие $.data и $.attr в jQuery: хранение данных и HTML5 атрибуты

Быстрый ответ

Функция .data() обеспечивает хранение пользовательских данных вне DOM, что идеально подходит для данных, которые требуются только скриптам. Напротив, .attr() меняет атрибуты HTML-элементов, влияя на их представление и поведение.

$("#myElement").data("key", value); // Используется только на внутреннем уровне
$("#myElement").attr("key", "value"); // Видно всем

Пользуйтесь .data() для хранения внутренних данных и .attr(), когда вам необходимо изменить разметку. Запомните, что .data() не виден для DOM-дерева, в то время как .attr() явно модифицирует его.

Основные понятия подробно

[AsideBanner]

Глубже о .data()

Служба .data() маскирует информацию за интерфейсом элемента, отлично подходя для обработки сложной информации и ссылок. jQuery умело сохраняет данные в специальном кэше, избегая циклических ссылок и утечек памяти, вместо их непосредственного размещения в DOM.

Способности .data() включают:

• Сохранение нестроковых значений, таких как массивы и объекты.
• Хранение данных, которые не предназначены для посылки на сервер.
• Управление информацией, которая часто меняется и не влияет на внешний вид страницы.

Достаточно практично, не так ли?

$("#safe").data("combinations", { secret_code: [1, 2, 3, 4] });
// Извлекаем информацию, словно из хранилища
$("#safe").data("combinations"); // { secret_code: [1, 2, 3, 4] }

Разбираемся с .attr()

В отличие от .data(), .attr() работает открыто и прямолинейно, обращаясь к HTML-атрибутам как к строковым значениям и напрямую модифицируя DOM. Этот метод идеально подходит для:

• Получения первоначальных значений атрибутов.
• Внесения изменений, которые должны быть визуально отображены в DOM для последующего анализа.
• Управления атрибутами состояния или настройки, которые изменяют поведение элементов.

И, что немаловажно, его синтаксис прост и ясен:

// Устанавливаем кодовое сообщение
$("#msg").attr("data-message", "Встреча в полночь");
// Извлекаем кодовое сообщение
$("#msg").attr("data-message"); // "Встреча в полночь"

Для управления обычными атрибутами, критическими для отображения и отправки данных на сервер, .attr() — это то, что вам потребуется.