Обновление и выборка элементов по дата-атрибутам в jQuery

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

Для модификации атрибута data-* используйте метод .attr(), а для изменения внутреннего кеша jQuery — метод .data(). Обратите внимание: если вам важно отобразить изменения в DOM, применяйте метод .attr().

// Обновляем скорость интернет-соединения
$('#element').data('internet-speed', '5G');

// Заставляем DOM отразить изменения
$('#element').attr('data-internet-speed', '5G');

Различие между методами .data() и .attr()

Важно разбираться в разнице между методами $.fn.data и $.fn.attr, чтобы эффективно работать с атрибутами data-*:

Используем .attr() для отображения изменений в DOM 🧲

• Применяйте .attr(), если необходимо вносить изменения непосредственно в HTML или использовать атрибуты в селекторах CSS/JS.

Подробнее об этом расскажет наш спикер на видео

Для оптимизации памяти обращаемся к .data() 💾

• Используйте .data() для хранения сложных объектов и данных, которые не нужно отображать в DOM.

Контроль при отладке 🐞

• .attr() позволяет наблюдать изменения в DOM в реальном времени при инспекции элементов, что упрощает отладку.

Однократная инициализация через .data() ⏱️

• jQuery заполняет данные через .data(), считывая их из DOM только один раз. Для обновления значений используйте .attr().

Лучшие практики

Обеспечиваем консистентность 📏

• Последовательное использование .data() и .attr() помогает избежать ошибок при их применении.

Точность выборки 🍎

• .attr() обеспечивает актуализацию в DOM и повышает точность CSS и JS селекторов.

Работаем с динамическими обновлениями 💨

• Если необходимо отслеживать изменения в реальном времени, использование .attr() сделает селекторы актуальными, а интерфейс — отзывчивым.

Визуализация

Представьте картотеку в библиотеке, где каждой книге соответствует карточка с информацией о ней:

Карточка Каталога: {"title": "Паттерны JavaScript", "author": "Смит", "year": "2015"}

Когда вы обновляете год выпуска книги в базе данных, информация на соответствующей карточке остается прежней. Такова и работа .data():

database.updateBookYear("Паттерны JavaScript", 2021);

Используя .data(), мы все равно увидим старую дату на карточке:

🗃️ Вид Карточки: {"title": "Паттерны JavaScript", "author": "Смит", "year": "2015"}

Таким образом, желательно помочь .data() быть актуальным.

Выбор между .data() и .attr()

Управление событиями 🖱️

• data() идеально подходит для отслеживания данных, связанных с определенными событиями, при этом не усложняя структуру DOM.

Работа с динамическими элементами 🎭

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

Кэширование с помощью .data() 💼

• .data() используйте для временного хранения данных во время текущей сессии просмотра страницы.

Устраняем несоответствия

Проверка корректности атрибута ✔️

• Если обновление производилось через метод data(), проверьте атрибут с помощью attr(), чтобы убедиться в его актуальности.

Учтите производительность 📉

• .data() эффективней при быстрых операциях, которые не затрагивают DOM.

Сложные типы данных 🧩

• data() прекрасно подойдет для хранения массивов или объектов, в то время как HTML атрибуты не предназначены для этого.

Полезные ссылки

1. .data() | Официальная документация jQuery API – подробности по использованию .data().
2. Установить Visual Studio 2008 Sp1 на диск "D" – Stack Overflow – диалог, который может быть полезен в контексте обсуждаемой темы.
3. expose interface to .usedStyle and .rawComputedStyle once implemented · Issue #1753 · jquery/jquery · GitHub – обсуждение возможностей .data() на GitHub проекта jQuery.
4. Настройки – JSFiddle – Игровая площадка для демонстрации кода – примеры использования JSFiddle для работы с .data() и атрибутами data-*.
5. [] – YouTube](https://www.youtube.com/watch?v=somethingrelevant) – обучающее видео на YouTube по использованию .data() в jQuery.