Почему метод jQuery 1.9+ attr() не устарел?

.attr() не устарела, потому что это полезно для того, для чего она создана, и это единственный правильный способ сделать то, для чего она создана (за исключением использования функции getAttribute каждого элемента, которая делает то же самое... или разбор HTML самостоятельно). Единственная причина, по которой мы вообще ведем это обсуждение, заключается в том, что jQuery (и некоторые старые браузеры (кашель IE кашель)) неправильно объединяли атрибуты и свойства, и что путаница — это то, что они, по-видимому, исправили в версии 1.9.

.attr() извлекает атрибуты, а .prop() извлекает свойства. Это разные вещи, и всегда официально так было (хотя DOM часто имеет свойство, соответствующее атрибуту). Если у вас есть <p whatever="value">, где whatever не является атрибутом, распознаваемым браузером, вы должны использовать .attr() для получения значения атрибута. .prop() даже не сможет увидеть его в большинстве браузеров.

Если вас интересует результирующее свойство DOM, используйте .prop(). Если вам важен фактический атрибут HTML, используйте .attr(). На самом деле это не вопрос «или/или»; вы можете использовать оба в одном и том же коде, и вселенная не взорвется ни разу (при условии, что вы все равно использовали их правильно). :) Просто используйте тот, который подходит для работы, которую вы выполняете в данный момент, и перестаньте пытаться «осудить» вещи, которые не сломаны.

Я взял на себя смелость приготовить для вас скрипку:

http://jsfiddle.net/5REVP/

Особенно эта часть:

<div id="example" style="padding:10px"></div>

console.log("style");
var styleAttr = $("#example").attr("style");
console.log(styleAttr); // You get "padding:10px"
var styleProp = $("#example").prop("style");
console.log(styleProp); // You get a CSSStyleDeclaration object

Пример со стилем ясно показывает, что атрибут — это не то же самое, что свойство (проверьте консоль).

Для удобочитаемости, ремонтопригодности и обратной (а также прямой) совместимости вы всегда должны использовать правильные методы для данной задачи, в противном случае есть шанс, что метод может перестать вести себя так, как вы хотели бы, метод .attr() является пример тому.

Метод .attr() используется для получения атрибутов элементов, атрибуты представляют собой SGML, относящийся к информации, содержащейся внутри тегов элементов, вы можете легко прочитать эту информацию, просмотрев элементы.

• Если вы получите атрибут «стиль» элемента, вы не получите никакой информации, кроме того, что конкретно написано в этом атрибуте.
• Если вы получите атрибут «checked» флажка, вы получите либо «checked», либо «».

Метод .prop() используется для получения свойств DOM элементов.

• Если вы получаете свойство «стиль», вы не получаете то, что дизайнер написал в атрибуте стиля, вы получаете все фактические свойства css элемента.
• Если вы получите свойство «checked» флажка, вы получите true или false.

.attr() обращается только к атрибутам HTML, тогда как .prop() извлекает свойства не элементов HTML. См. документацию:

Например, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected должны быть получены и установлены с помощью метода .prop(). До jQuery 1.6 эти свойства можно было получить с помощью метода .attr(), но это не входило в область действия attr. Они не имеют соответствующих атрибутов и являются только свойствами.

http://api.jquery.com/prop/

Моя домашняя работа ... После прочтения хороших объяснений @cHao и @cernunnos и после нескольких месяцев использования ... Я думаю, что нам нужна другая концепция, чтобы решить, как программист, когда использовать или не использовать prop и attr:

• Исходный HTML-код и его представление: браузер загружает HTML-страницу в пространство памяти браузера. Что ж, в браузере памяти остается представление DOM, но DOM сохраняет некоторые оригинальные вещи, такие как атрибуты и свойство cssText, которое "иногда является постоянным представлением".
  PS: атрибуты, которые не определены в "стандартной модели DOM", не имеют сопоставления с свойствами модели DOM. При изменении одного (не только для чтения) атрибута, если есть соответствующее (сопоставленное) свойство, его можно изменить автоматически.

• Состояние DOM: динамические страницы требуют изменений непосредственно в DOM, именно это видят конечные пользователи. Таким образом, если на странице есть какие-либо действия «щелкнуть и изменить», каждый раз, когда DOM переходит к новому представлению страницы, то есть каждый раз, когда DOM имеет новый состояние.
  При изменении одного свойства DOM все остальные свойства DOM (при необходимости) изменяются последовательно.

Имея в виду эти концепции, мы можем составить «эмпирическое правило (для attr и prop использования)»:

1. Используйте prop, у вас есть 90% шансов, что это сработает... 99%, если вы используете jQuery для изменения состояний DOM (и стандартной гипотезы DOM).
2. Если вам нужно изменить или получить доступ к data-* атрибутам, используйте метод .data().
3. В противном случае (не DOM, не данные или нестандартные вещи) проверьте, есть ли случай использования .attr(), и зарезервируйте время для его изучения (см. ответы выше).