.prop () vs. attr()

Myślę, że Tim powiedział to całkiem dobrze , ale cofnijmy się:

Element DOM jest obiektem, rzeczą w pamięci. Podobnie jak większość obiektów w OOP, posiada właściwości . Ponadto, oddzielnie, posiada mapę atrybutów zdefiniowanych na elemencie (Zwykle pochodzącą ze znaczników, które przeglądarka odczytała, aby utworzyć element). Niektóre z właściwości pobierają swoje początkowe wartości z atrybutów o tych samych lub podobnych nazwach (value otrzymuje swoje wartość początkowa z atrybutu "value"; href pobiera wartość początkową z atrybutu "href", ale nie jest to dokładnie ta sama wartość; {[5] } z atrybutu "class"). Inne właściwości otrzymują swoje początkowe wartości w inny sposób: na przykład właściwość parentNode otrzymuje swoją wartość na podstawie tego, czym jest jej element nadrzędny; element zawsze ma właściwość style, niezależnie od tego, czy ma atrybut "style", czy nie.

Rozważmy tę kotwicę na stronie w http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Niektóre darmowe ASCII Sztuka (i pomijając wiele rzeczy):

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             HTMLAnchorElement             |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| href:       "http://example.com/foo.html" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

Zauważ, że właściwości i atrybuty są różne.

Teraz, chociaż są one różne, ponieważ wszystkie te ewoluowały, a nie były projektowane od podstaw, wiele właściwości odpisuje do atrybutu, z którego pochodzą, jeśli je ustawisz. Ale nie wszyscy tak robią i jak widać z href powyżej, mapowanie nie zawsze jest prostą "przekaż wartość", czasami wymagana jest interpretacja.

Kiedy mówię o właściwościach będących właściwościami obiektu, nie mówię abstrakcyjnie. Oto jakiś kod nie-jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(te wartości są zgodne z większością przeglądarek; istnieje pewna zmienność.)

Obiekt link jest rzeczywistością i widać, że istnieje prawdziwa różnica między uzyskaniem dostępu do właściwości na nim, a uzyskaniem dostępu do atrybutu.

Jak powiedział Tim, zdecydowana większość czasu, chcemy pracować z właściwościami. Częściowo dzieje się tak, ponieważ ich wartości (nawet nazwy) są bardziej spójne w różnych przeglądarkach. Najczęściej chcemy pracować z atrybutami tylko wtedy, gdy nie ma właściwości z nią związanej (niestandardowe atrybuty), lub gdy wiemy, że dla tego konkretnego atrybutu, atrybut i właściwość nie są 1: 1 (Jak w href i "href" powyżej).

Standardowe właściwości są określone w różnych specyfikacjach DOM:

• DOM2 HTML (w większości przestarzałe, zobacz HTML spec zamiast)
• rdzeń DOM2 (przestarzałe)
• DOM3 Core (przestarzałe)
• DOM4

Te specyfikacje mają doskonałe indeksy i zalecam trzymanie linków do nich pod ręką; używam ich cały czas.

Atrybuty niestandardowe obejmują na przykład atrybuty data-xyz, które możesz umieścić na elementach, aby dostarczyć metadane do kodu (teraz, gdy jest to ważne od HTML5, o ile trzymasz się data- prefiks). (Najnowsze wersje jQuery dają dostęp do elementów data-xyz za pomocą funkcji data, ale ta funkcja jest , a nie tylko accessorem dla atrybutów data-xyz [robi to zarówno więcej, jak i mniej]; jeśli nie potrzebujesz jej funkcji, użyłbym funkcji attr do interakcji z atrybutem data-xyz.)

Funkcja attr kiedyś miała zawiłą logikę wokół uzyskania tego, co myśleli, że chcesz, zamiast dosłownie uzyskać atrybut. Połączyło koncepcje. Przeniesienie do prop i attr miało na celu ich oddzielić. Krótko w wersji 1.6.0 jQuery poszło za daleko pod tym względem, ale funkcjonalność została szybko dodana z powrotem do attr, aby poradzić sobie z typowymi sytuacjami, w których ludzie używają attr, kiedy technicznie powinni używać prop.

Ta zmiana już dawno nadchodziła dla jQuery. Od lat są zadowoleni z funkcji o nazwie attr(), która najczęściej pobiera właściwości DOM, a nie wynik, którego można oczekiwać od nazwy. Segregacja attr() oraz prop() powinno pomóc złagodzić pewne nieporozumienia między atrybutami HTML i właściwościami DOM. $.fn.prop() chwyta określoną właściwość DOM, podczas gdy $.fn.attr() chwyta określony atrybut HTML.

Aby w pełni zrozumieć, jak działają, oto rozszerzone wyjaśnienie różnicy między atrybutami HTML a właściwościami DOM.:

Atrybuty HTML

Składnia:

<body onload="foo()">

Cel: Umożliwia przypisanie do znaczników danych do zdarzeń, renderowania i innych celów.

Wizualizacja: Atrybut klasy jest pokazany tutaj na ciele. Jest dostępny za pomocą następującego kodu:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Atrybuty są zwracane w postaci ciągu znaków i mogą być niespójne z przeglądarki do przeglądarki. Jednak w niektórych sytuacjach mogą być istotne. Jak pokazano powyżej, IE 8 Quirks Mode (i poniżej) oczekuje nazwy właściwości DOM w get / set / removeAttribute zamiast nazwy atrybutu. Jest to jeden z wielu powodów, dla których ważne jest, aby znać różnicę.

Właściwości DOM

Składnia:

document.body.onload = foo;

Cel: Daje dostęp do właściwości, które należą do węzłów elementu. Właściwości te są podobne do atrybutów, ale są dostępne tylko przez JavaScript. Jest to ważna różnica, która pomaga wyjaśnić rolę właściwości DOM. proszę zauważyć, że atrybuty są zupełnie inne niż właściwości , ponieważ to przypisanie obsługi zdarzenia jest bezużyteczne i nie otrzyma zdarzenia (ciało nie ma zdarzenia onload, tylko atrybut onload).

Wizualizacja:

Tutaj zobaczysz listę właściwości w zakładce" DOM " w Firebug. To są Nieruchomości DOM. Będziesz natychmiast zauważcie sporo z nich, ponieważ użyliście ich wcześniej, nie wiedząc o tym. Ich wartości są tym, co otrzymasz za pośrednictwem JavaScript.

Dokumentacja

• JavaScript: the Definitive Guide by David Flanagan
• atrybuty HTML, Mozilla Dev Center
• Dom element Właściwości, Mozilla Dev Center

Przykład

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

Wcześniej wersji jQuery, zwraca pusty ciąg znaków. W 1.6 zwraca właściwą wartość foo.

Bez spojrzenia na nowy kod dla którejkolwiek z funkcji, mogę z pewnością powiedzieć, że zamieszanie ma więcej wspólnego z różnicą między atrybutami HTML i właściwościami DOM, niż z samym kodem. Mam nadzieję, że to wyjaśniło ci pewne rzeczy.

- Matt

Właściwość jest w DOM; atrybut jest w HTML, który jest parsowany do DOM.

Dalsze szczegóły

Jeśli zmienisz atrybut, zmiana zostanie odzwierciedlona w DOM (czasami z inną nazwą).

Przykład: zmiana atrybutu class znacznika spowoduje zmianę właściwości className tego znacznika w DOM. Jeśli nie masz atrybutu na znaczniku, nadal masz odpowiednią właściwość DOM z pustą lub domyślną wartością.

Przykład: While Twój tag nie posiada atrybutu class, właściwość DOM className Istnieje z pustą wartością łańcuchową.

Edit

Jeśli zmienisz jeden, drugi zostanie zmieniony przez kontroler i vice versa. Ten kontroler nie jest w jQuery, ale w natywnym kodzie przeglądarki.

Rozróżnienie między atrybutami HTML i obiektami DOM powoduje zamieszanie. Dla tych, którzy są komfortowe działając na elementy Dom natywne właściwości takie this.src this.value this.checked etc, .prop to bardzo ciepłe powitanie w rodzinie. Dla innych jest to tylko dodatkowa warstwa zamieszania. Wyjaśnijmy to sobie.

Najprostszym sposobem, aby zobaczyć różnicę między .attr i .prop jest następujący przykład:

<input blah="hello">

1. $('input').attr('blah'): zwraca 'hello' zgodnie z oczekiwaniami. Żadnych niespodzianek.
2. $('input').prop('blah'): zwraca undefined -- ponieważ próbuje wykonać [HTMLInputElement].blah -- i żadna taka właściwość na tym obiekcie DOM nie istnieje. Istnieje tylko w zakresie jako atrybut tego elementu, tj. [HTMLInputElement].getAttribute('blah')

Teraz zmieniamy kilka rzeczy w ten sposób:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah'): returns 'apple' eh? Dlaczego nie "gruszka", bo to było ustawione na końcu tego elementu. Ponieważ właściwość została zmieniona na atrybucie wejściowym, a nie na samym elemencie wejściowym DOM -- one zasadniczo prawie działają niezależnie od siebie.
2. $('input').prop('blah'): returns 'pear'

Rzecz, z którą naprawdę musisz być ostrożny, to po prostu nie mieszaj ich użycia dla tej samej właściwości w całej aplikacji Z powyższego powodu.

Zobacz skrzypek demonstrujący różnicę: http://jsfiddle.net/garreh/uLQXc/

.attr vs .prop:

Runda 1: styl

<input style="font:arial;"/>

• .attr('style') -- zwraca style inline dla dopasowanego elementu, tzn. "font:arial;"
• .prop('style') -- zwraca obiekt deklaracji stylu, tzn. CSSStyleDeclaration

Runda 2: Wartość

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value') -- zwraca 'hello' *
• .prop('value') -- zwraca 'i changed the value'

* Uwaga: jQuery z tego powodu ma metodę .val(), która wewnętrznie jest równoważna .prop('value')

TL; DR

Użyj prop() nad attr() w większości przypadków.

A właściwość jest bieżącym stanem elementu wejściowego. Atrybut jest wartością domyślną.

Właściwość może zawierać rzeczy różnego typu. Atrybut może zawierać tylko ciągi znaków

Dirty check

Pojęcie to stanowi przykład, w którym różnica jest obserwowalna: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Wypróbuj:

• kliknij przycisk. Oba pola zostały sprawdzone.
• odznacz oba pola.
• kliknij przycisk ponownie. Tylko pole prop zostało zaznaczone. BANG!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Dla niektórych atrybutów jak disabled na button, dodanie lub usunięcie atrybutu content {[5] } zawsze włącza właściwość (zwaną atrybutem IDL w HTML5), ponieważ http://www.w3.org/TR/html5/forms.html#attr-fe-disabled says:

Atrybut disabled IDL musi odzwierciedlać atrybut disabled content.

Więc może ujdzie ci to na sucho, chociaż jest brzydkie, ponieważ modyfikuje HTML bez potrzeby.

Dla innych atrybutów, takich jak checked="checked" na input type="checkbox", rzeczy się psują, ponieważ po kliknięciu na nie, to staje się brudny, a następnie dodanie lub usunięcie atrybutu checked="checked" content nie włącza już sprawdzania.

Dlatego powinieneś używać głównie .prop, ponieważ wpływa to bezpośrednio na właściwość effective, zamiast polegać na złożonych efektach ubocznych modyfikacji HTML.

Wszystko jest w doc:

Różnica między atrybutami i właściwościami może być ważna w określonych sytuacjach. Przed jQuery 1.6,metoda attr () czasami bierze pod uwagę wartości właściwości podczas pobierania niektórych atrybutów, co może powodować niespójne zachowanie. Od jQuery 1.6,metoda prop() zapewnia sposób jawnego pobierania wartości właściwości while .attr() pobiera tylko atrybuty.

Więc użyj prop !

Atrybuty znajdują się w dokumencie HTML / pliku tekstowym (==wyobraź sobie, że jest to wynik analizy znaczników html), podczas gdy
właściwości są w HTML drzewo DOM (==zasadniczo rzeczywistą właściwością jakiegoś obiektu w sensie JS).

Co ważne, wiele z nich jest zsynchronizowanych (jeśli zaktualizujesz Właściwość class, atrybut class w html również zostanie zaktualizowany; i w innych przypadkach). Ale niektóre atrybuty mogą być zsynchronizowane z nieoczekiwanymi właściwościami-np., atrybut checked odpowiada właściwość defaultChecked, tak, że

• ręczne zaznaczenie pola wyboru zmieni wartość .prop('checked'), ale nie zmieni wartości .attr('checked') i .prop('defaultChecked')
• ustawienie $('#input').prop('defaultChecked', true) również zmieni .attr('checked'), ale nie będzie to widoczne na elemencie.

Zasada jest: .prop() metoda powinna być używana dla boolowskich atrybutów/właściwości oraz dla właściwości, które nie istnieją w html (takie jak okno.miejsce). Wszystkie inne atrybuty (te, które można zobaczyć w html) może i powinien być nadal manipulowany za pomocą .attr() metoda. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

I oto tabela, która pokazuje, gdzie .prop() jest preferowana (mimo że .attr() może być nadal używana).

Dlaczego czasami chcesz użyć .prop() zamiast .attr ()

1. .prop() może zwrócić dowolny typ - string, integer, boolean; while .attr() zawsze zwraca łańcuch.
2. .prop() mówi się, że jest około 2,5 razy szybszy niż .attr().

.attr():

• uzyskaj wartość atrybutu dla pierwszego elementu w zestawie dopasowanych elementów.
• daje wartość elementu, jak została zdefiniowana w html podczas ładowania strony

.prop():

• uzyskaj wartość właściwości dla pierwszego elementu w zbiorze dopasowanych elementów.
• podaje zaktualizowane wartości elementów, które są modyfikowane za pomocą javascript / jquery

Zazwyczaj będziesz chciał użyć właściwości. Użyj atrybutów tylko dla:

1. uzyskanie niestandardowego atrybutu HTML (ponieważ nie jest on zsynchronizowany z właściwością DOM).
2. uzyskanie atrybutu HTML, który nie jest zsynchronizowany z właściwością DOM, np. uzyskanie "oryginalnej wartości" standardowego atrybutu HTML, np. <input value="abc">.

attributes -> HTML

properties -> DOM

Przed jQuery 1.6 metoda attr() czasami biorąc pod uwagę wartości właściwości podczas pobierania atrybutów, spowodowało to raczej niespójne zachowanie.

Wprowadzenie metody prop() zapewnia sposób jawnego pobierania wartości właściwości, podczas gdy .attr() pobiera atrybuty.

Docs:

jQuery.attr() Pobiera wartość atrybutu dla pierwszego elementu w zestawie dopasowanych elementów.

jQuery.prop() Get the value of a property for the pierwszy element w zestawie dopasowanych elementów.

Delikatnie przypomnij o użyciu prop(), przykład:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

Powyższa funkcja służy do sprawdzenia, czy checkbox1 jest zaznaczone, jeśli jest zaznaczone: return 1; jeśli nie: return 0. Funkcja prop () używana tutaj jako funkcja GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

Powyższa funkcja służy do Ustawienia checkbox1 jako checked i zawsze zwraca 1. Teraz funkcja prop () używana jako funkcja SET.

Nie Nawal.

P / S: kiedy sprawdzam Obraz src własność. Jeśli src jest pusty, prop zwraca bieżący adres URL strony (źle), a attr zwraca pusty łańcuch (po prawej).

1) właściwość jest w DOM; atrybut jest w HTML, który jest parsed into the DOM.

2) $( elem ).attr ("checked") (1.6.1+)" checked " (String) Will Zmień za pomocą stanu checkbox

3) $ (elem).attr ("checked") (pre-1.6) True (Boolean) Changed ze stanem checkbox

• Głównie chcemy używać dla obiektu DOM a nie niestandardowego atrybutu jak data-img, data-xyz.

• Również niektóre różnice przy dostępie checkbox wartość i href z attr() i prop() jako zmiana rzeczy z wyjściem DOM z prop() jako pełny link z origin i Boolean wartość dla checkboxa (pre-1.6)

• Możemy uzyskać dostęp tylko do elementów DOM z prop inne wtedy daje undefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

.prop()

.prop( propertyName )
propertyName
Type: String
The name of the property to get.

The .metoda prop() pobiera wartość właściwości tylko dla pierwszego elementu w dopasowanym zestawie. Zwraca undefined dla wartości właściwości który nie został ustawiony lub jeśli dopasowany zestaw nie zawiera elementów. Aby uzyskać wartości dla każdego elementu indywidualnie, użyj pętli takiej jako jQuery .each () lub .metoda map ().

<html>
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>

</body>
</html>

.attr()

.attr( attributeName )
attributeName
Type: String
The name of the attribute to get.

The .metoda attr() pobiera wartość atrybutu tylko dla pierwszego elementu w dopasowanym zestawie. Aby uzyskać wartość dla każdego elementu indywidualnie, użyj konstrukcji pętli, takiej jak jQuery .each () lub .metoda map ().

Używanie jQuery ' s .metoda attr () do uzyskania wartości elementu atrybut ma dwie główne zalety:

Wygoda: może być wywołana bezpośrednio na obiekcie jQuery i przykuta do innych metod jQuery. Spójność między przeglądarkami: wartości niektórych atrybuty są zgłaszane niezgodnie w różnych przeglądarkach, a parzyste w różnych wersjach jednej przeglądarki. The .metoda attr () redukuje takie niespójności.

<html>
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>

The title of the emphasis is:<div></div>

<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>

</body>
</html>

JQuery 1.6 wprowadza .funkcja prop() i oddziela atrybuty i właściwości DOM, wywołała wiele pytań dotyczących różnicy między nimi .attr i .funkcje rekwizytów.

Zobacz poniższe przykłady:

Przykład:1)

<input id="demo" type="text" dbvalue="Kansagara" />

$("#demo").attr("dbvalue");   // returns Kansagara
$("#demo").prop("dbvalue");   // returns undefined

.prop () Zwraca wartość tylko atrybutu HTML DOM, nie zwraca wartości niestandardowego atrybutu while .attr () zwraca również niestandardową wartość atrybutu pokazaną powyżej.

Przykład:2)

<input id="demo" type="text" value="Kansagara" />

Teraz zmieniłem tekst 'Kansagara' na 'Hitesh' w textbox.

$("#demo").attr("value");   // returns Kansagara
$("#demo").prop("value");   // returns Hitesh

Dla checkbox (jquery 1.6+)

<input id="check1" checked="checked" type="checkbox" />

.attr('checked') //returns  checked
.prop('checked') //returns  true
.is(':checked') //returns true

Metoda Prop Zwraca wartość logiczną dla checked, selected, disabled, readOnly..etc podczas gdy attr zwraca zdefiniowany łańcuch. Możesz więc użyć bezpośrednio .prop ('checked') w warunku if.

.attr () wzywa .prop ()metoda attr () będzie nieco wolniejsza od bezpośredniego dostępu do nich .prop ().

Dla jQuery 1.6+, prop będzie najczęściej używany, ponieważ jest prosty i szerszy niż attr. W większości starych projektów, attr jest używany do uzyskania informacji o aktualnym stanie element. Ale teraz prop podjął tę pracę i attr zostałby zastąpiony prop.

Odpowiedź Gary 'ego Hole' a jest bardzo istotna dla rozwiązania problemu, jeśli kod jest napisany w taki sposób]}

obj.prop("style","border:1px red solid;")

Ponieważ funkcja prop zwraca obiekt CSSStyleDeclaration, powyższy kod nie będzie działał poprawnie w niektórych przeglądarkach (testowane z IE8 with Chrome Frame Plugin w moim przypadku).

W ten sposób zmieniając go na następujący kod

obj.prop("style").cssText = "border:1px red solid;"