jQuery attr vs prop?

103

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 />');
Hailwood
źródło

Odpowiedzi:

71

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

Rich Bradshaw
źródło
Link do testu był na "zrobiłem kilka testów" powyżej, uczynię go bardziej widocznym, ale tutaj i tak jest: jsfiddle.net/ZC3Lf
Hailwood
Znajduję pytanie, jeśli atrybut jest dostosowany, a nie właściwości DOM, funkcja prop () zwraca undefined, a attr () działa dobrze.
hiway
3

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]
SmasherHell
źródło
1

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.

Haocheng
źródło
Nie sądzę, ponieważ w przeciwnym razie wyjście w 2)byłoby znormalizowane!
Hailwood
@Hailwood Nie zrobi tego, ponieważ uzyskałeś /test/dostęp do attr, a następnie ustawiłeś /test/1na attr, co jest attr elementu. Nie ma procedury, która wyzwala normalizację.
Haocheng
Jestem zdezorientowany, co masz na myśli, 2)powyższy test brzmi: element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); Gdyby był znormalizowany podczas odczytu, czy ostatnia linia nie wyświetla znormalizowanej wersji?
Hailwood
Zmienne:property = 'action'; body = $('body'); element = $('form');
Hailwood
Normalizacja będzie tylko spust kiedy prop jest dostępne, a dostęp attr nie będzie.
Haocheng
1

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/

Martin Abraham
źródło