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/