Тепер це не просто якась різниця питання , я зробив деякі тести (http://jsfiddle.net/ZC3Lf/) , що змінює propі attrз <form action="/test/"></form>​ з вихідним бути:

1) Підтримка тесту на модифікацію
Підтримка: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Тест модифікації Attr
Реквізит: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr, а потім тест модифікації
Prop Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Реквізит, потім тест модифікації
Attr. http://fiddle.jshell.net/test/11
Підтримка: Attr:http://fiddle.jshell.net/test/11

Тепер я розгублений у кількох речах, наскільки я знаю:
Реквізит: значення в його поточному стані після будь-яких модифікацій через 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так, щоб все не зламалось. Деякі люди хотіли, щоб це було чистою перервою, але я думаю, що було прийнято правильне рішення, оскільки справи не ламалися всюди!

Щодо:

Реквізит: значення в його поточному стані після будь-яких модифікацій через JavaScript

Attr: Значення, визначене в html на завантаженні сторінки.

Це не завжди відповідає дійсності, оскільки атрибут багато разів фактично змінюється, але для таких властивостей, як перевірена, атрибут не змінюється, тому вам потрібно використовувати опору.

Список літератури:

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 ("перевірено"): до 1.6 true / false є поверненням, оскільки 1.6.1. "Позначено" / невизначено повертається.

attr ("вибрано"): до повернення 1.6 true / false, оскільки повертається 1.6.1 "selected" / undefined

Детальний огляд цієї теми німецькою мовою можна знайти тут:

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