Ambos perfazem as mesmas funções.
A diferença é que o método .prop()
está no DOM
e o método .attr()
está no HTML
.
Um exemplo, mais claro e genérico, é quando tenta acessar um atributo inexistente num elemento, poderá acessar esse atributo no DOM (usando o .prop()
), porém, esse atributo está sempre vazio por padrão. Se acessa pelo método .attr()
, retorna como undefined
.
Exemplo:
v = $("#foo").prop("class");
console.debug("prop retorna vazio: "+v);
v = $("#foo").attr("class");
console.debug("attr retorna indefinido: "+v);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">bar</div>
Veja o resultado pelo console no developer tools. No chrome, pressione Ctrl+Shift+I e clique na guia "console".
Resultará nisso:
prop retorna vazio:
attr retorna indefinido: undefined