Отличие $.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() — это то, что вам потребуется.