jQuery attr vs prop?

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

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

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

3) Атрибут, затем тест модификации опоры
Опора: http://fiddle.jshell.net/test/11
Атрибут: http://fiddle.jshell.net/test/11

4) Пропорция, затем проверка модификации атрибута
Проповедь: http://fiddle.jshell.net/test/11
Атрибут: http://fiddle.jshell.net/test/11

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

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

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

javascript jquery prop attr
person Hailwood    schedule 06.11.2012    source источник
comment
Возможный дубликат stackoverflow.com/questions/5874652/prop-vs-attr   -  person goodeye    schedule 23.05.2013

Ответы (4)


arrow_upward
71
arrow_downward

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

Некоторое понимание, хотя 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

person Rich Bradshaw    schedule 06.11.2012
comment
Ссылка на тестирование была на выполненных некоторых тестах выше. Я сделаю ее более заметной, но все равно здесь: jsfiddle.net/ ZC3Lf - person Hailwood; 06.11.2012
comment
Я нахожу вопрос, если настраивается атрибут, а не свойства DOM, prop () возвращает undefined, а attr () работает хорошо. - person hiway; 28.06.2013

arrow_upward
3
arrow_downward

Различия между .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]
person SmasherHell    schedule 11.04.2013

arrow_upward
1
arrow_downward

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

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

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

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

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

person Haocheng    schedule 06.11.2012
comment
Я так не думаю, иначе результат в 2) был бы нормализован! - person Hailwood; 06.11.2012
comment
@Hailwood Не будет, потому что вы получили /test/ при доступе к attr, а затем установите /test/1 в attr, что является атрибутом элемента. Нет никакой процедуры, запускающей нормализацию. - person Haocheng; 06.11.2012
comment
Я не понимаю, что вы имеете в виду, тест 2) выше - это element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />');. Если бы он был нормализован при чтении, не будет ли последняя строка там выводить нормализованную версию? - person Hailwood; 06.11.2012
comment
Переменные: property = 'action'; body = $('body'); element = $('form'); - person Hailwood; 06.11.2012
comment
Нормализация сработает только при доступе к prop, а доступ attr - нет. - person Haocheng; 06.11.2012

arrow_upward
1
arrow_downward

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

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

e.g.

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/

person Martin Abraham    schedule 27.07.2014