jQuery attr vs prop?

102

Dies ist nicht nur eine andere Frage. Was ist der Unterschied? Ich habe einige Tests (http://jsfiddle.net/ZC3Lf/) durchgeführt, bei denen das propund attrvon geändert wurde,<form action="/test/"></form>​ wobei die Ausgabe wie folgt lautet :

1) Stütze Modifikationstest
Stütze: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Attr Modifikationstest
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr dann Prop Modifikationstest
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop dann Attr Modifikationstest
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Jetzt bin ich meines Wissens über ein paar Dinge verwirrt:
Prop: Der Wert in seinem aktuellen Zustand nach Änderungen über JavaScript
Attr: Der Wert, wie er beim Laden der Seite im HTML definiert wurde.

Wenn dies nun richtig ist,

  • Warum scheint das Ändern des Attributs propdas actionvollqualifizierte zu machen , und warum nicht das Ändern des Attributs?
  • Warum Modifizieren der propin 1)das Attribut ändern, dass man keinen Sinn für mich macht?
  • Warum Modifizieren der attrin 2)der Eigenschaft ändern, sind sie verbunden werden soll auf diese Weise?


Testcode

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 />');
Hagelholz
quelle
3
Mögliches Duplikat von stackoverflow.com/questions/5874652/prop-vs-attr
goodeye

Antworten:

71

Leider funktioniert keiner Ihrer Links :(

Einige Einsichten gelten jedoch attrfür alle Attribute. propist für Eigenschaften.

In älteren jQuery-Versionen (<1.6) hatten wir gerade attr. Um zu DOM-Eigenschaften wie nodeName, zu gelangen selectedIndex, mussten defaultValueSie Folgendes tun:

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

Das saugte, so propwurde hinzugefügt:

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

Das war großartig, aber ärgerlicherweise war dies nicht abwärtskompatibel, da:

<input type="checkbox" checked>

hat kein Attribut von checked, aber es hat eine Eigenschaft namens checked.

Im letzten Build von 1.6 wird attrdies auch getan, propdamit die Dinge nicht kaputt gehen. Einige Leute wollten, dass dies eine saubere Pause ist, aber ich denke, dass die richtige Entscheidung getroffen wurde, da die Dinge nicht überall kaputt gingen!

Hinsichtlich:

Prop: Der Wert im aktuellen Status nach Änderungen über JavaScript

Attr: Der Wert, wie er beim Laden der Seite im HTML definiert wurde.

Dies ist nicht immer der Fall, da das Attribut häufig geändert wird. Für Eigenschaften wie "Aktiviert" muss jedoch kein Attribut geändert werden. Daher müssen Sie prop verwenden.

Verweise:

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

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

Rich Bradshaw
quelle
Der Link zum Test war oben auf "Einige Tests durchgeführt". Ich werde ihn besser sichtbar machen, aber hier ist er trotzdem: jsfiddle.net/ZC3Lf
Hailwood
Ich finde eine Frage, wenn das Attribut angepasst ist, nicht DOM-Eigenschaften, prop () gibt zurück undefinedund attr () funktioniert gut.
Hiway
3

Es gibt einen klaren Fall, um Unterschiede zwischen .prop und .attr zu erkennen

Betrachten Sie den folgenden HTML-Code:

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

und die JS unten mit 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);
});

erstellt die folgende Ausgabe:

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

Ich habe es versucht

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

und es wird wie folgt ausgegeben

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

Dies kann darauf hinweisen , dass das actionnur normiert ist , wenn sie liest mit prop.

Haocheng
quelle
Ich denke nicht, da sonst die Ausgabe in 2)normalisiert würde!
Hailwood
@Hailwood Es wird nicht, weil du hast , /test/wenn der Zugang zu attr, und legen Sie /test/1auf attr, die attr des Elements ist. Es gibt kein Verfahren, das die Normalisierung auslöst.
Haocheng
Ich bin verwirrt darüber, was Sie meinen. Der 2)obige Test lautet: element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); Wenn es beim Lesen normalisiert wurde, würde die letzte Zeile dort nicht die normalisierte Version ausgeben?
Hailwood
Variablen:property = 'action'; body = $('body'); element = $('form');
Hailwood
Die Normalisierung wird nur ausgelöst, wenn auf prop zugegriffen wird, und der Zugriff von attr nicht.
Haocheng
1

da jquery 1.6.1+ attr () die Eigenschaft wie vor 1.6 zurückgibt / ändert. Daher sind Ihre Tests nicht sehr sinnvoll.

Beachten Sie geringfügige Änderungen der Rückgabewerte.

z.B

attr ('geprüft'): vor 1.6 ist wahr / falsch wieder da, seit 1.6.1. "Checked" / undefined wird zurückgegeben.

attr ('selected'): Bevor 1.6 true / false zurückgegeben wird, wird 1.6.1 „selected“ / undefined zurückgegeben

Eine ausführliche Übersicht zu diesem Thema auf Deutsch finden Sie hier:

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

Martin Abraham
quelle