jQuery Academy · Урок

Использование атрибутов данных HTML5

«Использование атрибутов данных HTML5» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Знакомство с атрибутами данных HTML5

HTML5 представил атрибуты данных, позволяющие хранить пользовательские данные непосредственно внутри стандартных элементов HTML.

Представьте их как скрытые отсеки в тегах HTML, содержащие дополнительную информацию, не предназначенную для отображения. Благодаря этому HTML становится более семантичным, а JavaScript — мощнее: данные можно напрямую связывать с элементами.

Почему атрибуты данных удобны

До появления атрибутов данных разработчики часто использовали классы, идентификаторы или даже скрытые поля ввода для хранения данных, относящихся к конкретному элементу. Однако у этих методов есть недостатки:

Классы и идентификаторы: часто используются не по назначению — для оформления или выбора элементов, а не для хранения данных.
Скрытые поля ввода: загромождают DOM и предназначены для отправки данных формы.

Атрибуты данных предоставляют чистый и стандартный способ встраивать пользовательские данные непосредственно туда, где им место.

Правило именования `data-`

Все атрибуты данных должны начинаться с префикса data-. После префикса атрибут можно назвать как угодно, используя строчные буквы, цифры, дефисы и символы подчёркивания.

data-id="123"
data-status="active"
data-item-price="9.99"

Этот стандартный префикс гарантирует, что пользовательские атрибуты не будут конфликтовать с существующими или будущими атрибутами HTML.

Встраивание данных в HTML

Вы можете легко добавлять атрибуты данных непосредственно в HTML-разметку. Как и любой другой атрибут, они имеют имя и значение.

Вот пример: добавим к кнопке атрибуты data-product-id и data-category.

<button id="buyButton" data-product-id="456" data-category="electronics">
  Buy Now
</button>

<script>
  // JavaScript goes here later
</script>

Получение данных с помощью jQuery

jQuery предоставляет очень удобный метод .data() для получения значений атрибутов данных. Он автоматически обрабатывает префикс data-.

Чтобы получить конкретный атрибут, передайте его имя без data- в метод .data().

<button id="myButton" data-user-id="101" data-role="admin">
  User Profile
</button>

<script>
  $(document).ready(function() {
    const userId = $('#myButton').data('user-id');
    const userRole = $('#myButton').data('role');
    
    console.log("User ID:", userId);
    console.log("User Role:", userRole);
  });
</script>

Изменение данных на лету

Метод .data() предназначен не только для чтения: с его помощью также можно динамически обновлять или добавлять новые атрибуты данных.

Передайте два аргумента: имя атрибута без data- и новое значение. Это обновляет внутренний кэш данных jQuery, а для атрибутов данных HTML5 также обновляет сам атрибут в DOM.

<div id="statusBox" data-status="pending">
  Current Status
</div>

<script>
  $(document).ready(function() {
    console.log("Initial status:", $('#statusBox').data('status'));
    
    // Update the status
    $('#statusBox').data('status', 'complete');
    
    console.log("Updated status:", $('#statusBox').data('status'));
  });
</script>

Интеллектуальная обработка типов данных

Одна из полезных особенностей .data() в jQuery — автоматическое преобразование типов. При получении атрибутов данных jQuery пытается преобразовать строковые значения в более подходящие типы JavaScript.

"true" и "false" становятся логическими значениями.
"123" становится числом.
"[1,2]" и "{name:'X'}" становятся массивами или объектами (если это корректный JSON).

Это избавляет Вас от необходимости выполнять разбор вручную!

Практическое применение: переключение состояния

Атрибуты данных идеально подходят для управления состоянием элементов пользовательского интерфейса. Создадим простую кнопку переключения, которая изменяет свой текст и состояние на основе атрибута data-active.

Нажмите кнопку, чтобы увидеть изменение её состояния!

<button id="toggleBtn" data-active="false">
  Activate Feature
</button>

<script>
  $(document).ready(function() {
    $('#toggleBtn').on('click', function() {
      let isActive = $(this).data('active');
      
      if (isActive) {
        $(this).data('active', false);
        $(this).text('Activate Feature');
        $(this).css('background-color', '#f0f0f0');
      } else {
        $(this).data('active', true);
        $(this).text('Deactivate Feature');
        $(this).css('background-color', '#d4edda');
      }
      console.log("Active state:", $(this).data('active'));
    });
  });
</script>

Советы по использованию атрибутов данных

Помните об этих рекомендациях, чтобы использовать атрибуты данных чисто и эффективно:

Используйте для состояния интерфейса: они идеально подходят для хранения временного состояния интерфейса, настроек или ссылок.
Избегайте больших объёмов данных: не храните в них огромные наборы данных; значения должны быть краткими.
Выбирайте семантичные имена: используйте понятные описательные имена (например, data-user-id, а не data-u).
Не заменяйте данные серверной части: сложные данные по-прежнему следует получать с сервера, а не встраивать целиком.

Тест по атрибутам данных

Рассмотрим следующий HTML и JavaScript:

<div id="item" data-price="25.50" data-available="true">
  Product Info
</div>

<script>
  $(document).ready(function() {
    const itemDiv = $('#item');
    const price = itemDiv.data('price');
    const available = itemDiv.data('available');
    
    itemDiv.data('stock', 100);
    const stock = itemDiv.data('stock');
    
    console.log(typeof price);
    console.log(typeof available);
    console.log(stock);
  });
</script>

Что будет выведено в консоль?

Итоги: раскрываем возможности атрибутов данных

Поздравляем! Вы научились использовать возможности атрибутов данных HTML5 с jQuery.

Они позволяют удобным способом встраивать пользовательские данные непосредственно в HTML.
Метод jQuery .data() значительно упрощает получение и обновление этих данных.
Автоматическое преобразование типов упрощает обработку данных.
Они отлично подходят для управления состоянием интерфейса и создания динамических интерфейсов.

Продолжайте практиковаться, и Вы найдёте бесчисленное множество способов сделать веб-приложения более интеллектуальными и интерактивными!

Часто задаваемые вопросы

Урок «Использование атрибутов данных HTML5» бесплатный?

Да — полный текст урока «Использование атрибутов данных HTML5» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Использование атрибутов данных HTML5»?

Научитесь хранить и получать данные приложения непосредственно из элементов HTML с помощью атрибутов данных, создавая динамические пользовательские интерфейсы, управляемые данными. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Использование атрибутов данных HTML5»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Использование атрибутов данных HTML5
Динамическая генерация содержимого с помощью данных
Основы интеграции шаблонов на стороне клиента

← Назад к jQuery Academy