Отличия между .prop() и .attr() в jQuery

Часто при разработке на jQuery возникает недопонимание разницы между методами .prop() и .attr(). Это особенно актуально после обновления jQuery до версии 1.6, в которой был добавлен метод prop().

Пример проблемы

Рассмотрим типичную ситуацию. Пусть имеется HTML-элемент, например, кнопка:

<button id="myButton" disabled>Click me</button>

И есть код на jQuery, который работает с этой кнопкой:

$('#myButton').attr('disabled'); // Возвращает "disabled"
$('#myButton').prop('disabled'); // Возвращает true

Оба метода возвращают значения, но они разные. Почему? И какой метод следует использовать в конкретной ситуации?

Отличие .attr() от .prop()

Метод .attr() в jQuery предназначен для работы с атрибутами HTML-элемента. В представленном выше примере атрибут disabled присутствует в коде HTML, поэтому метод .attr() возвращает его значение — строку «disabled».

Метод .prop(), в свою очередь, предназначен для работы с свойствами JavaScript-объекта, которым является HTML-элемент. В JavaScript атрибут disabled элемента button превращается в булево свойство, поэтому метод .prop() возвращает true.

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

В большинстве случаев предпочтительно использовать метод .prop(), так как он работает быстрее и возвращает более предсказуемые значения.

Однако есть исключения. Если нужно получить исходное значение атрибута, указанное в коде HTML (например, для атрибута value у элемента input), следует использовать метод .attr().

Важно помнить, что методы .attr() и .prop() работают по-разному и результат их работы может отличаться. Это следует учитывать при разработке на jQuery.