JQuery attr vs prop?

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

1) prop Тест модификации
Prop: http://fiddle.jshell.net/test/1
Attr: http://fiddle.jshell.net/test/1

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

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

4) Проповедь теста модификации Аттра
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

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

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

Почему изменение prop похоже на то, чтобы сделать action полностью доступным, и, наоборот, почему это не изменяет атрибут?
Почему модификация prop in 1) изменяет атрибут, который мне не имеет смысла?
Почему изменение attr in 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 />');

Ответ 1

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

Некоторая проницательность, 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 на загрузке страницы.

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

Литература:

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

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

Ответ 2

Есть ясный случай увидеть различия между .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') вернет document.form.action node = > HTMLInputElement
$ ('form'). attr ('action') вернет атрибут action = > #

Ответ 3

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

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

и он выводится ниже

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

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

Ответ 4

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

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

например.

attr ('checked): до 1.6 true/false returend, так как 1.6.1. "checked" /undefined.

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

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

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