jQuery attr vs prop?

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

1) prop Modification test
Опора:http://fiddle.jshell.net/test/1
М: http://fiddle.jshell.net/test/1

2) Attr Modification test
Опора:http://fiddle.jshell.net/test/1
М: /test/1

3) Attr затем Prop Modification test
Опора:http://fiddle.jshell.net/test/11
М: http://fiddle.jshell.net/test/11

4) Prop затем Attr Modification test
Опора:http://fiddle.jshell.net/test/11
М: http://fiddle.jshell.net/test/11

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

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

  • почему изменения prop по-видимому,action полностью квалифицированный, и наоборот, почему изменение атрибута не происходит?
  • почему изменения prop in 1) изменить атрибут, что один не имеет смысла для меня?
  • почему изменения attr на 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 />');
4 96
javascript jquery attributes dependency-properties

4 ответа:

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

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

в старых версиях jQuery (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, нет атрибута для изменения, поэтому вам нужно использовать прислонить.

ссылки:

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

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

70

существует четкий случай, чтобы увидеть различия между ними .опора и. аттр

рассмотрим 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);
});

$('формы').prop ('действие') вернет документ.форма.узел действия = > HTMLInputElement
$('форма').attr ('action') вернет атрибут action => #

3

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

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

и он выводит как ниже

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

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

1

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

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

например

attr (’checked'): до 1.6 true/false является returend, начиная с 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/

1