Обновление атрибутов данных в HTML через jQuery: data vs attr

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

Data-атрибуты в HTML добавляются при помощи notации data-*="значение". Пример:

<div data-user-id="12345"></div> <!-- Уникальный идентификатор пользователя. Именно, он может быть вашим, кто знает? 😁 -->

Для доступа к таким атрибутам в JavaScript используется синтаксис element.dataset.*:

let userId = document.querySelector('div').dataset.userId; // И вот userId у вас в руках.

Чтобы изменить data-атрибут в HTML с использованием jQuery применяется метод .attr():

$('#mydiv').attr('data-myval', '60'); // И вот myVal мгновенно становится равным 60.

Простой способ с JavaScript

Для добавления data-* атрибутов через jQuery рекомендуется использовать метод .attr():

$('#dynamicElement').attr('data-role', 'button'); // И вот вы становитесь кнопкой. Как быстро приходят перемены.

Выполнив данную операцию с использованием чистого JavaScript, вы применяете свойство dataset:

document.getElementById('dynamicElement').dataset.role = 'button'; // И вы теперь тоже кнопка!

Не забывайте следовать соглашениям по именованию: data-* атрибуты конвертируются в camelCase в свойстве dataset.

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

Вообразите работу с data-атрибутами в HTML-элементах как процесс красочного оформления большого полотна:

<canvas data-color="blue" data-size="large"></canvas> <!-- Кто сказал, что полотна не могут быть синими и большими? 🎨 -->

Каждый data-атрибут как бы представляет собой уникальный значок:

Полотно:    [🖼]
Значки: data-color ➡️ [🌈], data-size ➡️ [📏]

И вот мы накладываем значки на полотно:

До: [🖼]
После: [🖼🌈📏] <!-- Глядите, перед вами шедевр! 🖼🌈📏 -->

Таким образом HTML-элемент преобразуется в уникальное произведение искусства со своими собственными уникальными индикаторами данных!

Основы: синхронизация между DOM и jQuery

Согласованная работа между DOM и внутренним кешом jQuery при использовании data-атрибутов требует синхронизации:

$('#mydiv').data('myval', 20) // Обновляется кеш, а HTML ничего не понимает: ээ, что? 🤔
$('#mydiv').attr('data-myval', 20) // Обновляется HTML. Вуаля, ясно понял! 🙌

Сочетание обоих методов выглядит так:

$('#mydiv').data('myval', 20).attr('data-myval', 20); // Это по-настоящему командная работа! 🤝

Практикум: получение и удаление data-атрибутов

Для получения значения data-атрибута в jQuery используется метод .data():

let myVal = $('#mydiv').data('myval'); // Вот и myVal вернулся обратно! 🎩🐇

Для удаления data-атрибута применяются следующие методы:

В JavaScript:

delete element.dataset.myval; // Прощай, MyVal, мы всегда будем тебя помнить...
element.removeAttribute('data-myval'); // Это другой способ сказать "до свидания"

В контексте jQuery помощником будет .removeAttr():

$('#myElement').removeAttr('data-myval'); // MyVal, пришло время прощаться! 👉

Путешествие в неизвестность: конфликты имен

Конфликты имен возникают как внезапные неприятности. В jQuery избегайте имен, которые начинаются с нижнего подчеркивания — они зарезервированы для внутреннего использования 🥳:

$('#mydiv').data('_myval', 20); // Берегитесь попадания в VIP-зону 😉

Чистый JavaScript или jQuery? Выбор за вами

Выбор между чистым JavaScript dataset и jQuery остается за вами. Если вы хотите быть в тренде и оставаться в курсе последних технологий, dataset идеален для вас. Нужда в дополнительной удобности? Обратитесь к jQuery!

Полезные материалы

1. MDN Web Docs — полезный источник знаний о веб-технологиях. Пираты кода, в бой! 🏴‍☠️
2. Web Standards | W3C — чтобы всегда быть в курсе актуальных веб-стандартов. Держите руку на пульсе!
3. CSS-Tricks — узнайте, как добавить волшебства в ваш CSS. 🪄
4. Stack Overflow — центральный командный пункт разработчиков всего мира!
5. Can I use... — ваша шпоргалка по совместимости браузеров. Все мы разные, не правда ли? 🤷
6. Smashing Magazine — источник модных трендов в мире веб-разработки и дизайна.