В чем отличие между attr и data?

Приветствую. В чём разница между attr("my_attr", "10") и data("my_attr", "10" )?
  • Вопрос задан
  • 836 просмотров
Решения вопроса 1
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Метод jQuery.fn.attr служит для работы с атрибутами DOM-элемента.

А метод jQuery.fn.data тут даже не рядом. Он позволяет сохранить какие-то данные в памяти jQuery, привязав их к конкретной js-сущности (DOM-элементу/другому объекту). А то, что jQuery для хранения значений простых типов по возможности использует data-атрибуты - это уже другая история. Иными словами - данный метод не предназначен для работы с атрибутами.

Дополнение по технической части от пользователя @kurtov

kurtov
Важная особенность. В момент первого обращения к элементу, все атрибуты data-* будут считаны в память jQuery и доступны через метод jQuery.fn.data, но если добавить еще один атрибут (data-second-attr) то он не будет доступен через данный метод.


Например элемент:
<div attr="first" data-name1="second"></div>

//Все доступно сразу
$('div').attr('attr'); // 'first'
$('div').attr('data-name1'); // 'second'
$('div').data('name1'); // 'second'


//Если добавить атрибут методом jQuery.fn.attr (изменение DOM)
$('div').attr('data-name2', 'third');
//то
$('div').attr('data-name2'); // 'third'
$('div').data('name2'); // undefined


//Если 'добавить' атрибут методом jQuery.fn.data (нет изменений DOM)
$('div').data('name3', 'four');
//то
$('div').attr('data-name3'); // undefined
$('div').data('name3'); // 'four'


Ответ написан
Пригласить эксперта
Ответы на вопрос 2
romy4
@romy4
Exception handler
в результате:
my-attr=10
data-my-attr=10
Ответ написан
@denny911
.attr() - получает или устанавливает значение атрибутов выбранных элементов,
.data() - позволяет прикрепить/получить данные к элементу DOM с data-атрибутом .
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы