jQuery .prop() против .attr(): Полное руководство

Основное различие между .prop() и .attr() в jQuery заключается в том, что они манипулируют разными сущностями: свойствами (свойствами DOM-элементов) и атрибутами (HTML-атрибутами). Метод .prop() был введен в jQuery 1.6 для обеспечения более четкого различия и лучшей обработки свойств DOM-элементов, которые могут не иметь соответствующих HTML-атрибутов.

Содержание

• Понимание различия между свойствами и атрибутами
• Когда использовать .prop()
• Когда использовать .attr()
• Особый случай со стилевым атрибутом
• Рекомендации по миграции
• Практические примеры
• Лучшие практики

Понимание различия между свойствами и атрибутами

Свойства — это динамические значения, принадлежащие DOM-элементам, которые могут меняться со временем. Они представляют текущее состояние элемента, включая значения, установленные с помощью JavaScript или в результате взаимодействия с пользователем.

Атрибуты — это статические значения, определенные в HTML-разметке. Они представляют начальное состояние, указанное в HTML.

Например, рассмотрим флажок:

<input type="checkbox" checked id="myCheckbox">

Здесь checked — это атрибут, но у элемента также есть свойство checked, которое отражает текущее состояние флажка.

Когда использовать .prop()

Используйте .prop() при работе с:

• Булевыми свойствами, такими как checked, selected, disabled
• Свойствами элемента, такими как tagName, nodeName, nodeType
• Значениями формы, такими как value, selectedIndex
• Стилевыми свойствами (возвращает объект CSSStyleDeclaration)
• Любым свойством, которое не имеет прямого эквивалента в HTML-атрибутах

// Проверить, установлен ли флажок
if ($('#myCheckbox').prop('checked')) {
    // Флажок установлен
}

// Получить имя тега элемента
var tagName = $('div').prop('tagName');

Когда использовать .attr()

Используйте .attr() при работе с:

• HTML-атрибутами, такими как id, class, src, href
• Пользовательскими атрибутами данных, такими как data-*
• Атрибутами, которые напрямую соответствуют HTML-разметке
• Строковыми значениями, представляющими характеристики элемента

// Получить ID элемента
var elementId = $('#myElement').attr('id');

// Установить пользовательский атрибут данных
$('#myElement').attr('data-custom', 'value');

// Получить источник изображения
var imageUrl = $('img').attr('src');

Особый случай со стилевым атрибутом

Ваш пример прекрасно иллюстрирует ключевое различие:

$(selector).click(function() {
    var getAtt = this.getAttribute('style');  // Строка
    var thisProp = $(this).prop('style');     // Объект CSSStyleDeclaration
    var thisAttr = $(this).attr('style');     // Строка
    
    console.log(getAtt, thisProp, thisAttr);
});

• .attr('style') возвращает исходное строковое значение из HTML-атрибута
• .prop('style') возвращает фактический объект CSSStyleDeclaration, который дает доступ к отдельным CSS-свойствам

Это значительно влияет на ваши практики программирования:

// Использование .attr() - манипуляция строками
var styleString = $('#element').attr('style');
var newStyle = styleString + 'color: red;';
$('#element').attr('style', newStyle);

// Использование .prop() - манипуляция объектами
var styleObject = $('#element').prop('style');
styleObject.color = 'red';
styleObject.backgroundColor = 'blue';

Рекомендации по миграции

Не нарушит ли переключение существующий код? Это зависит от того, что вы делаете:

• Безопасно переключить: Для булевых атрибутов, таких как checked, disabled, selected
• Потенциально нарушающее работу: Для других атрибутов, где поведение меняется

Рекомендации по миграции из документации jQuery 1.6:

1. Используйте .prop() для:

   • состояния checked флажков и радиокнопок
   • состояния disabled элементов формы
   • состояния selected элементов option
   • любого свойства, которое не имеет прямого HTML-атрибута

2. Продолжайте использовать .attr() для:

   • class (вместо этого используйте .addClass(), .removeClass(), .toggleClass())
   • value (для значений полей ввода используйте .val())
   • style (если вам нужна манипуляция строками)
   • src, href, id и т.д.

Пример миграции:

// До jQuery 1.6
if ($('#checkbox').attr('checked')) {
    // Это было ненадежно - атрибут checked мог отсутствовать
}

// После jQuery 1.6 (рекомендуется)
if ($('#checkbox').prop('checked')) {
    // Это правильно проверяет фактическое состояние checked
}

Практические примеры

Работа с формами:

// Получение значений элементов формы
var inputValue = $('#myInput').val();           // Всегда используйте .val() для значений полей формы
var isChecked = $('#myCheckbox').prop('checked'); // Используйте .prop() для булевых свойств
var selectedIndex = $('#mySelect').prop('selectedIndex');

// Установка значений элементов формы
$('#myInput').val('новое значение');
$('#myCheckbox').prop('checked', true);
$('#mySelect').prop('selectedIndex', 2);

Работа с изображениями:

// Получение размеров изображения
var img = $('#myImage');
var naturalWidth = img.prop('naturalWidth');
var naturalHeight = img.prop('naturalHeight');

// Получение/установка источника изображения
var src = img.attr('src');
img.attr('src', 'new-image.jpg');

Пользовательские данные:

// Установка пользовательского атрибута данных
$('#element').attr('data-user-id', '12345');

// Получение пользовательского атрибута данных
var userId = $('#element').attr('data-user-id');

// Альтернативно, используйте метод .data() (jQuery 1.4.3+)
$('#element').data('userId', '12345');
var userId = $('#element').data('userId');

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

1. Используйте .prop() для булевых состояний и свойств DOM
2. Используйте .attr() для HTML-атрибутов и пользовательских данных
3. Используйте .val() для значений полей ввода формы
4. Используйте .data() для хранения произвольных данных, связанных с элементами
5. Будьте последовательны во всем коде

Схема принятия решений:

Вам нужно работать с:
├─ Булевым состоянием (checked, disabled, selected)? → Используйте .prop()
├─ HTML-атрибутом (id, class, src, href, data-*)? → Используйте .attr()
├─ Значением поля ввода формы? → Используйте .val()
├─ Произвольными данными для хранения? → Используйте .data()
└─ Стилевой манипуляцией? → Рассмотрите .prop('style') для доступа к объекту или .attr('style') для работы со строкой

Распространенные ошибки, которых следует избегать:

// Не смешивайте .attr() и .prop() для одного и того же свойства
// Неконсистентно:
$('#checkbox').attr('checked', true);  // Устанавливает атрибут
if ($('#checkbox').prop('checked')) {   // Проверяет свойство
    // Это может работать не так, как ожидается
}

// Делайте так вместо этого:
$('#checkbox').prop('checked', true);  // И установка, и проверка с помощью .prop()
if ($('#checkbox').prop('checked')) {
    // Это работает правильно
}

Заключение

Введение .prop() в jQuery 1.6 предоставило необходимое различие между HTML-атрибутами и свойствами DOM-элементов. Вот основные выводы:

1. Используйте .prop() для булевых состояний, свойств DOM и когда вам нужно текущее состояние элемента
2. Используйте .attr() для HTML-атрибутов и при работе со значениями, основанными на разметке
3. Стилевой атрибут ведет себя иначе - .prop('style') дает вам объект CSSStyleDeclaration, а .attr('style') - строку
4. Миграция с .attr() на .prop() для булевых свойств безопасна и рекомендуется
5. Последовательность - ключ к успеху - выберите один метод и придерживайтесь его для подобных операций

Понимание этого различия поможет вам писать более надежный и поддерживаемый код jQuery, который правильно отражает фактическое состояние ваших DOM-элементов.

Источники

1. jQuery 1.6 Release Notes - .prop() Method Introduction
2. jQuery Documentation - .prop() vs .attr()
3. jQuery Documentation - .attr()
4. MDN Web Docs - HTML Attributes vs DOM Properties