Атрибуты, свойства и data-*

Атрибут — то, что записано в HTML-теге: href, src, disabled. Свойство — текущее значение в объекте элемента, которое меняется, пока пользователь работает со страницей. jQuery даёт для них отдельные методы: attr() и prop().

attr: атрибуты тега

<a id="help" href="/help">Справка</a>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#help').attr('href')); // /help
 
  $('#help').attr('href', '/faq');
  $('#help').attr({ title: 'Частые вопросы', target: '_blank' });
</script>

Ссылка теперь ведёт на /faq и открывается в новой вкладке. Объектом можно задать несколько атрибутов сразу.

Удаляет атрибут метод removeAttr('title').

prop: текущее состояние

Для флажков, выбранных пунктов списка и выключенных кнопок нужен prop(): он возвращает true или false и показывает состояние прямо сейчас.

<label><input type="checkbox" id="done" checked> Выполнено</label>
<button id="save">Сохранить</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#done').prop('checked')); // true
  console.log($('#done').attr('checked')); // checked
 
  $('#done').prop('checked', false);
  $('#save').prop('disabled', true);
</script>

Флажок снят, кнопка выключена. Атрибут checked при этом остался в разметке — он хранит только начальное состояние.

data: данные в разметке

Атрибуты, которые начинаются с data-, хранят ваши данные: номер задачи, приоритет. Метод data() читает их без приставки:

<ul>
  <li data-id="7" data-priority="high" data-done="false">Написать отчёт</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $task = $('li');
 
  console.log($task.data('id'));       // 7
  console.log(typeof $task.data('id')); // number
  console.log($task.data('done'));     // false
  console.log($task.data('priority')); // high
</script>

data() сам превращает строки в числа и логические значения, поэтому data('id') возвращает число 7, а не строку.

Запись через data

<ul>
  <li data-id="7">Написать отчёт</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('li').data('id', 8);
 
  console.log($('li').data('id'));      // 8
  console.log($('li').attr('data-id')); // 7
</script>

jQuery хранит записанное значение у себя в памяти, а атрибут в разметке не трогает.

То же на обычном JavaScript

attr() соответствует getAttribute() и setAttribute(), prop('checked') — свойству element.checked, data('id') — element.dataset.id (оно всегда возвращает строку).

Частая ошибка

Записать значение через data(), а искать элемент по атрибуту: $('[data-id="8"]'). Селектор смотрит на разметку, а там по-прежнему 7. Если значение нужно в селекторах или в CSS, меняйте его через attr('data-id', 8).