Teraz to nie jest tylko kolejne pytanie , jaka jest różnica , zrobiłem kilka testów (http://jsfiddle.net/ZC3Lf/), modyfikując propand attrof, <form action="/test/"></form>​ z wynikiem:

1) Rekwizyt Test modyfikacji
Prop: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Test modyfikacji atr.
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr, a następnie Test modyfikacji
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop, potem Attr Test modyfikacji
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Teraz jestem zdezorientowany co do kilku rzeczy, o ile wiem:
Prop: Wartość w obecnym stanie po wszelkich modyfikacjach za pomocą JavaScript
Attr: Wartość taka, jaka została zdefiniowana w html podczas ładowania strony.

Jeśli to prawda,

• Dlaczego modyfikowanie propwydaje się powodować, żeaction modyfikacja atrybutu pełni kwalifikowana i odwrotnie, dlaczego modyfikacja atrybutu nie?
• Dlaczego modyfikowanie pliku propin1) modyfikuje atrybut, który nie ma dla mnie sensu?
• Dlaczego modyfikacja attrin 2)modyfikuje właściwość, czy mają być w ten sposób połączone?

Kod testowy

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 />');

Niestety żaden z twoich linków nie działa :(

Jednak pewien wgląd attrdotyczy wszystkich atrybutów. propdotyczy nieruchomości.

W starszych wersjach jQuery (<1.6) po prostu mieliśmy attr. Aby dostać się do właściwości DOM, takich jak nodeName, selectedIndexczy defaultValuetrzeba było zrobić coś takiego:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

To było do niczego, więc propdodano:

index = $("#foo").prop("selectedIndex");

To było świetne, ale irytująco nie było to kompatybilne wstecz, ponieważ:

<input type="checkbox" checked>

nie ma atrybutu checked, ale ma właściwość o nazwie checked.

Tak więc w ostatecznej wersji 1.6 attr też to robiprop że nic się nie zepsuło. Niektórzy chcieli, aby to była czysta przerwa, ale myślę, że podjęto właściwą decyzję, ponieważ nie wszędzie się zepsuło!

Jeżeli chodzi o:

Prop: Wartość w obecnym stanie po wszelkich modyfikacjach za pomocą JavaScript

Attr: wartość taka, jaka została zdefiniowana w html podczas ładowania strony.

Nie zawsze jest to prawdą, ponieważ często atrybut jest faktycznie zmieniany, ale w przypadku właściwości takich jak sprawdzone nie ma atrybutu do zmiany, więc musisz użyć właściwości.

Bibliografia:

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

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

Istnieje wyraźny przypadek, aby zobaczyć różnice między .prop i .attr

rozważ poniższy kod HTML:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

a poniżej JS przy użyciu 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);
});

tworzy następujący wynik:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

Próbowałem tego

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

i wyprowadza jak poniżej

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

Może to oznacza, że actionnormalizuje się tylko wtedy, gdy jest on odczytać z prop.

ponieważ jquery 1.6.1+ attr () zwraca / zmienia właściwość jak przed 1.6. więc twoje testy nie mają większego sensu.

uważaj na drobne zmiany w zwracanych wartościach.

na przykład

attr ('zaznaczone'): przed 1.6 prawda / fałsz jest zwrotem, od 1.6.1. Zwracane jest „zaznaczone” / niezdefiniowane.

attr ('selected'): przed 1.6 zwracane jest prawda / fałsz, ponieważ zwracane jest 1.6.1 "wybrane" / niezdefiniowane

szczegółowy przegląd tego tematu w języku niemieckim można znaleźć tutaj:

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