Теперь это не просто еще один вопрос , в чем разница , я провел несколько тестов (http://jsfiddle.net/ZC3Lf/), изменив propи attrof, <form action="/test/"></form>​ с выводом:

1) Тест модификации опоры
Опора: http://fiddle.jshell.net/test/1
Аттр:http://fiddle.jshell.net/test/1

2) Attr Modification test
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr, затем Prop Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop, затем Attr Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Насколько мне известно, меня смущает пара вещей:
Prop: значение в его текущем состоянии после любых изменений с помощью JavaScript
Attr: значение, определенное в html при загрузке страницы.

Теперь, если это правильно,

• Почему изменение атрибута, propпохоже, делает его actionполностью определенным, и, наоборот, почему изменение атрибута нет?
• Почему изменение propin 1)изменяет атрибут, который для меня не имеет смысла?
• Почему изменение attrin 2)изменяет свойство, должны ли они быть связаны таким образом?

Код теста

HTML

JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

К сожалению, ни одна из ваших ссылок не работает :(

Некоторое понимание, однако, attrотносится ко всем атрибутам. propдля свойства.

В более старых версиях jQuery (<1.6) у нас просто было attr. Чтобы добраться до свойств DOM , такие как nodeName, selectedIndexили defaultValueвы должны были сделать что - то вроде:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

Это отстой, поэтому propбыло добавлено:

index = $("#foo").prop("selectedIndex");

Это было здорово, но, к сожалению, не было обратной совместимости, например:

<input type="checkbox" checked>

не имеет атрибута checked, но имеет свойство с именем checked.

Итак, в финальной сборке 1.6 attrэто тоже сделано, propчтобы ничего не сломалось. Некоторые люди хотели, чтобы это был полный перерыв, но я думаю, что было принято правильное решение, так как все ломалось не сразу!

Что касается:

Prop: значение в текущем состоянии после любых изменений через JavaScript.

Attr: значение, определенное в HTML при загрузке страницы.

Это не всегда верно, так как часто атрибут фактически изменяется, но для таких свойств, как checked, нет атрибута для изменения, поэтому вам нужно использовать prop.

Ссылки:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr

Разница между .prop и .attr очевидна.

рассмотрите HTML-код ниже:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

и приведенный ниже JS с использованием jQuery:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

создает следующий вывод:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

Я пробовал это

console.log(element.prop(property));
console.log(element.attr(property));

и он выводит, как показано ниже

http://fiddle.jshell.net/test/
/test/ 

это может указывать на то, что actionнормализуется только при чтении с помощью prop.

поскольку jquery 1.6.1+ attr () возвращает / изменяет свойство, как до 1.6. таким образом, ваши тесты не имеют особого смысла.

помните о незначительных изменениях возвращаемых значений.

например

attr ('checked'): до 1.6 true / false повторяется, начиная с 1.6.1. Возвращается значение «checked» / undefined.

attr ('selected'): до 1.6 возвращается true / false, так как 1.6.1 возвращается «selected» / undefined

подробный обзор этой темы на немецком языке можно найти здесь:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/