.prop () vs .attr ()

Daher hat jQuery 1.6 eine neue Funktion prop() .

 $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) 

oder in diesem Fall machen sie dasselbe?

Und wenn ich zu prop() wechseln muss, werden alle alten attr() -Aufrufe attr() , wenn ich auf 1.6 attr() ?

UPDATE

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <div id='id' style="color: red;background: orange;">test</div> 

(Siehe auch dieses Skript: http://jsfiddle.net/maniator/JpUF2/ )

Die Konsole registriert getAttribute als String und attr - als String, aber als CSSStyleDeclaration . Warum? Und wie wird sich dies auf meine Kodierung in der Zukunft auswirken?

2141
03 мая '11 в 22:33 2011-05-03 22:33 Neal am 3. Mai 11 um 10:33 am 2011-05-03 22:33 eingestellt
@ 18 Antworten

Update 1. November 2012

Meine erste Antwort bezieht sich speziell auf jQuery 1.6. Mein Rat bleibt derselbe, aber jQuery 1.6.1 hat die Situation leicht verändert: Angesichts des vorhergesagten Haufens gebrochener Websites hat das jQuery-Team attr() etwas in der Nähe (aber nicht genau das gleiche) zu seinem alten Verhalten für logische Attribute zurückgebracht , John Resig berichtete dies auch in einem Blog . Ich sehe die Schwierigkeiten, denen sie gegenüberstehen, stimme aber immer noch nicht seiner Empfehlung zu, attr() zu bevorzugen.

Ursprüngliche Antwort

Wenn Sie immer nur jQuery und nicht direkt DOM verwendet haben, kann dies eine verwirrende Änderung sein, auch wenn dies konzeptionell sicherlich besser ist. Nicht so gut für die Bazillionen von jQuery-Sites, die durch diese Änderung kaputt gehen.

Ich werde die wichtigsten Themen zusammenfassen:

  • Normalerweise benötigen Sie prop() und nicht attr() .
  • In den meisten Fällen macht prop() das, was attr() zuvor getan hat. Das Ersetzen von attr() Aufrufen durch prop() in Ihrem Code wird normalerweise funktionieren.
  • Eigenschaften lassen sich normalerweise leichter mit Attributen umgehen. Ein Attributwert kann nur eine Zeichenfolge sein, während eine Eigenschaft einen beliebigen Typ haben kann. Die checked Eigenschaft ist beispielsweise eine logische Eigenschaft, die Stileigenschaft ist ein Objekt mit individuellen Eigenschaften für jeden Stil, die size ist eine Zahl.
  • Wenn eine Eigenschaft und ein Attribut mit demselben Namen vorhanden sind, wird die Aktualisierung der jeweils anderen Eigenschaft normalerweise aktualisiert. Dies gilt jedoch nicht für einige Attribute der Eingabedaten, z. B. value und checked . Bei diesen Attributen stellt die Eigenschaft immer den aktuellen Status dar, während das Attribut (für Mit Ausnahme älterer Versionen von IE entspricht es dem Wert / der Validierung der Standardeingabe (in defaultValue / defaultChecked ).
  • Durch diese Änderung wird eine Ebene von magischem jQuery entfernt, die vor Attributen und Eigenschaften hängen bleibt. Dies bedeutet, dass die Entwickler von jQuery ein wenig über den Unterschied zwischen Eigenschaften und Attributen lernen müssen. Das ist eine gute Sache.

Wenn Sie ein Entwickler von jQuery sind und über Eigenschaften und Attribute in diesem Geschäft verwirrt sind, müssen Sie einen Schritt zurückgehen und ein wenig darüber lernen, da jQuery Sie nicht mehr so ​​sehr vor diesem Zeug zu schützen versucht. Für maßgebliche, aber einige echte Worte zu diesem Thema gibt es Spezifikationen: DOM4 , HTML-DOM , DOM-Level 2 , DOM-Level 3 . Die Mozilla DOM-Dokumentation ist für die meisten modernen Browser gültig und einfacher zu lesen als die technischen Daten, sodass Sie ihre DOM-Referenzinformationen finden können . Es gibt einen Abschnitt über die Eigenschaften des Elements .

Als Beispiel dafür, wie Eigenschaften einfacher zu verarbeiten sind als Attribute, sollten Sie das Kontrollkästchen berücksichtigen, das ursprünglich aktiviert wurde. Hier sind zwei mögliche Teile von gültigem HTML:

 <input id="cb" type="checkbox" checked> <input id="cb" type="checkbox" checked="checked"> 

Woher wissen Sie, ob das Kontrollkästchen mit jQuery gesetzt ist? Schauen Sie sich den Stapelüberlauf an und Sie werden normalerweise die folgenden Sätze finden:

  • if ( $("#cb").attr("checked") === true ) {...}
  • if ( $("#cb").attr("checked") == "checked" ) {...}
  • if ( $("#cb").is(":checked") ) {...}

In der Tat ist dies die einfachste Sache der Welt, die mit einer checked booleschen Eigenschaft verbunden ist, die in jedem größeren Browser fehlerfrei vorhanden ist und seit 1995 einwandfrei funktioniert:

if (document.getElementById("cb").checked) {...}

Die Eigenschaft macht auch das Überprüfen oder Löschen einer Flagge trivial:

document.getElementById("cb").checked = false

In jQuery 1.6 wird dies definitiv

$("#cb").prop("checked", false)

Die Idee, das checked Attribut für ein Skript-Kontrollkästchen zu verwenden, ist nutzlos und unnötig. Eigentum ist was Sie brauchen.

  • Es ist unklar, auf welche Weise eine Prüfung mit dem checked Attribut korrekt überprüft oder deaktiviert werden kann
  • Der Attributwert spiegelt den Standardwert wider, nicht den aktuellen sichtbaren Status (mit Ausnahme einiger älterer IE-Versionen, was die Sache noch komplizierter macht). Das Attribut gibt nicht an, ob das Kontrollkästchen auf der Seite aktiviert ist. Siehe http://jsfiddle.net/VktA6/49/ .
1790
04 мая '11 в 2:06 2011-05-04 02:06 Die Antwort gibt Tim Down am 04. Mai '11 um 2:06 2011-05-04 02:06

Ich denke, Tim hat es ziemlich gut gesagt , aber lass ihn zurück:

Das DOM-Element ist ein Objekt, ein Element im Speicher. Wie die meisten Objekte in OOP verfügt es über Eigenschaften. Für das Element ist außerdem eine Attributzuordnung definiert (normalerweise wird dies durch das Markup verursacht, das der Browser liest, um das Element zu erstellen). Einige Eigenschaften eines Elements erhalten ihre Anfangswerte von Attributen mit gleichen oder ähnlichen Namen ( value erhält seinen Anfangswert vom Attribut "value"; href erhält seinen Anfangswert vom Attribut "href"), aber dies ist nicht genau derselbe Wert; className vom Attribut " Klasse "). Andere Eigenschaften erhalten ihre Anfangswerte auf andere Weise: Die parentNode erhält ihren Wert beispielsweise basierend auf ihrem übergeordneten Element. Ein Element hat immer eine Stileigenschaft, unabhängig davon, ob es ein Stilattribut hat oder nicht.

Betrachten Sie diesen Anker auf der Seite unter http://example.com/testing.html :

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

Einige kostenlose ASCII-Grafiken (und viele Dinge hinterlassen):

 + +––––––––––––––––––– |  HTMLAnchorElement | + +––––––––––––––––––––––––––––– |  href: "http://example.com/foo.html" | |  name: "fooAnchor" | |  id: "fooAnchor" | |  className: "test one" | |  Attribute: | |  href: "foo.html" | |  name: "fooAnchor" | |  id: "fooAnchor" | |  Klasse: "Test eins" | + +–––––––––––––––––––––––––––––

Bitte beachten Sie, dass sich Eigenschaften und Attribute unterscheiden.

Obwohl sie unterschiedlich sind, werden einige Eigenschaften in das Attribut zurückgeschrieben, von dem sie abgerufen wurden, da sich dies alles entwickelt und nicht von Grund auf neu entwickelt hat. Aber nicht jeder macht es, und wie Sie der href oben href , ist das Mapping nicht immer direkt, um "die Bedeutung zu vermitteln", manchmal wird Interpretation verwendet.

Wenn ich über Eigenschaften spreche, die Eigenschaften eines Objekts sind, spreche ich nicht abstrakt. Hier ist ein nicht-jQuery-Code:

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

(Diese Werte entsprechen den meisten Browsern, es gibt einige Optionen.)

Das link Objekt ist die reale Sache, und Sie können sehen, dass es einen echten Unterschied gibt, wenn Sie darauf zugreifen und darauf zugreifen.

Wie Tim sagte, wollen wir den Großteil dieser Zeit mit Immobilien arbeiten. Dies ist zum Teil darauf zurückzuführen, dass ihre Werte (sogar ihre Namen) normalerweise zwischen Browsern konsistenter sind. Wir möchten hauptsächlich nur mit Attributen arbeiten, wenn ihm keine Eigenschaft zugeordnet ist (Benutzerattribute), oder wenn wir wissen, dass das Attribut und die Eigenschaft für dieses bestimmte Attribut nicht 1: 1 sind (wie bei href und "href" oben).

Standardeigenschaften sind in verschiedenen DOM-Spezifikationen festgelegt:

Diese Spezifikationen weisen ausgezeichnete Indizes auf, und ich empfehle, sie bequem zu benutzen. Ich benutze sie die ganze Zeit.

Zu den benutzerdefinierten Attributen gehören beispielsweise alle data-xyz Attribute, die Sie in Elemente einfügen könnten, um Metadaten für Ihren Code bereitzustellen (jetzt gilt dies für HTML5, wenn Sie dem data- folgen). (Die neuesten jQuery-Versionen geben Ihnen Zugriff auf data-xyz verwendet die data Funktion, aber diese Funktion ist nicht nur für Zubehör für data-xyz Attribute [dies und mehr und weniger als das]. Wenn Sie die Funktionen wirklich nicht benötigen, würde ich die Funktion attr verwenden, um mit dem data-xyz Attribut zu interagieren data-xyz .)

Die attr Funktion verwendete eine verwirrende Logik, um das zu bekommen, was sie attr , anstatt das Attribut buchstäblich zu erhalten. Er kombinierte das Konzept. Der attr auf prop und attr für ihre Dekonfiguration gedacht. In v1.6.0 war jQuery kurz gesagt in dieser Hinsicht zu weit gegangen, aber die Funktionalität wurde schnell wieder zum attr , um häufige Situationen zu bewältigen, in denen Leute attr wenn sie technisch prop .

639
04 мая '11 в 17:27 2011-05-04 17:27 Die Antwort wird von TJ Crowder am 04. Mai '11 um 17:27 2011-05-04 17:27 gegeben

Diese Änderung kam für jQuery vor >attr() zufrieden, die im Wesentlichen die Eigenschaften des attr() abruft und nicht das Ergebnis, das Sie vom Namen erwarten. Die Trennung von attr() und prop() sollte dazu beitragen, die Verwirrung zwischen HTML-Attributen und DOM-Eigenschaften zu verringern. $.fn.prop() erfasst die angegebene DOM-Eigenschaft und $.fn.attr() erfasst das angegebene HTML-Attribut.

Um zu verstehen, wie sie funktionieren, finden Sie hier eine ausführliche Erklärung der Unterschiede zwischen HTML-Attributen und DOM-Eigenschaften.

HTML-Attribute

Syntax:

<body onload="foo()">

Zweck: Mit Markup können Daten für Ereignisse, für das Rendern und für andere Zwecke zugeordnet werden.

Visualisierung: 2019

242
03 мая '11 в 23:05 2011-05-03 23:05 Die Antwort wird von user1385191 03 Mai '11 am 23:05 2011-05-03 23:05 gegeben

Die Eigenschaft befindet sich im DOM. Das Attribut befindet sich in HTML, das im DOM analysiert wird.

Weitere Informationen

Wenn Sie ein Attribut ändern, wird diese Änderung im DOM (manchmal mit einem anderen Namen) angezeigt.

Beispiel: className das class eines Tags ändern, wird die className Eigenschaft dieses Tags im DOM className . Wenn Sie im Tag kein Attribut haben, haben Sie immer noch die entsprechende DOM-Eigenschaft mit einem leeren oder Standardwert.

Ein beispiel Obwohl Ihr Tag kein class , ist die DOM- class className mit einem leeren Zeichenfolgenwert vorhanden.

zu ändern

Wenn Sie eines ändern, wird das andere vom Controller geändert und umgekehrt. Dieser Controller befindet sich nicht in jQuery, sondern im nativen Code des Browsers.

237
27 сент. Antwort gegeben yunzen 27. September 2011-09-27 19:55 '11 am 19:55 2011-09-27 19:55

Es ist nur der Unterschied zwischen HTML-Attributen und verwirrenden DOM-Objekten. Für diejenigen, die mit den Eigenschaften von DOM-Eigenschaften this.src , z. B. this.src this.value this.checked usw., ist .prop ein sehr herzliches Willkommen in der Familie. Für andere ist dies nur zusätzliche Verwirrung. Lass es klar sein.

Der einfachste Weg, um den Unterschied zwischen .attr und .prop ist das folgende Beispiel:

 <input blah="hello"> 
  • $('input').attr('blah') : gibt erwartungsgemäß 'hello' . Es gibt keine Überraschungen.
  • $('input').prop('blah') : gibt undefined weil versucht wird, [HTMLInputElement].blah zu machen - und dieses DOM-Objekt enthält keine solche Eigenschaft. Es existiert nur in der Domäne als Attribut dieses Elements, d. H. [HTMLInputElement].getAttribute('blah')

Jetzt ändern wir ein paar Dinge wie folgt:

 $('input').attr('blah', 'apple'); $('input').prop('blah', 'pear'); 
  • $('input').attr('blah') : $('input').attr('blah') 'apple' eh? Warum nicht "Birne", weil es das letzte für dieses Element war. Da die Eigenschaft in ein Eingabeattribut und nicht in ein DOM-Eingabeelement geändert wurde, arbeiten sie im Wesentlichen nahezu unabhängig voneinander.
  • $('input').prop('blah') : gibt 'pear'

Worauf Sie wirklich achten müssen, ist , die Verwendung dieser Eigenschaft für die gleiche Eigenschaft in der gesamten Anwendung aus dem oben genannten Grund nicht zu mischen .

Die Violine zeigt den Unterschied: http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop :

Runde 1: Stil

 <input style="font:arial;"/> 
  • .attr('style') - gibt Inline-Stile für das übereinstimmende Element zurück, z. B. "font:arial;"
  • .prop('style') - gibt das CSSStyleDeclaration , dh CSSStyleDeclaration

Runde 2: Bedeutung

 <input value="hello" type="text"/> $('input').prop('value', 'i changed the value'); 
  • .attr('value') - gibt 'hello' *
  • .prop('value') - gibt 'i changed the value'

* Hinweis: jQuery hat aus diesem Grund eine .val() -Methode, die intern äquivalent zu .prop('value')

134
19 мая '11 в 13:18 2011-05-19 13:18 antwortete Gary Green am 19. Mai 11 um 13:18 2011-05-19 13:18

Tl; DR

Verwenden attr() in den meisten Fällen prop() over attr() .

Die Eigenschaft ist der aktuelle Status des Eingabeelements. Attribut ist der Standardwert.

Eine Eigenschaft kann verschiedene Arten von Objekten enthalten. Das Attribut kann nur Zeichenfolgen enthalten.

49
16 июля '14 в 12:45 2014-07-16 12:45 Die Antwort wird von agjmills am 16. Juli 14 um 12:45 Uhr 2014-07-16 12:45 gegeben

Dirty Check

Dieses Konzept dient als Beispiel, bei dem der Unterschied zu beobachten ist: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Versuchen Sie:

  • Klicken Sie auf die Schaltfläche. Beide Kontrollkästchen wurden markiert.
  • Deaktivieren Sie beide Kästchen.
  • Drücken Sie die Taste erneut. Nur die prop wird geprüft. BANG!

 <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> 

Bei einigen Attributen, z. B. für das disabled einer button , ist das Hinzufügen oder Entfernen des Inhaltsattributs disabled="disabled" eine Eigenschaft (in HTML5 als IDL-Attribut bezeichnet) immer umgeschaltet, weil http://www.w3.org/TR/html5/forms.html #attr -fe-disabled sagt:

Das deaktivierte IDL-Attribut muss das Attribut des deaktivierten Inhalts widerspiegeln.

So können Sie davon wegkommen, obwohl es hässlich ist, da es den HTML-Code unnötig ändert.

Bei anderen Attributen, wie zum Beispiel checked="checked" bei input type="checkbox" , ist alles kaputt. Sobald Sie darauf klicken, wird es fehlerhaft. Das Hinzufügen oder Löschen des checked="checked" -Attributs wird nicht checked="checked" , um die Prüfung abzubrechen .

Aus diesem Grund sollten Sie meistens .prop , da dies die effektive Eigenschaft direkt beeinflusst, anstatt sich auf die komplexen Nebeneffekte der HTML-Änderung zu verlassen.

35
06 июля '14 в 14:43 2014-07-06 14:43 Antwort von Ciro Santilli am 6. Juli 14 um 14:43 Uhr 2014-07-06 14:43

Alle Dockingstation :

Der Unterschied zwischen Attributen und Eigenschaften kann in bestimmten Situationen wichtig sein. Vor jQuery 1.6 hat die .attr () - Methode beim Extrahieren bestimmter Attribute manchmal Eigenschaftswerte berücksichtigt, was zu inkonsistentem Verhalten führen kann. Ab jQuery 1.6 bietet die Methode .prop () die Möglichkeit, Eigenschaftswerte explizit abzurufen, während .attr () Attribute zurückgibt.

Verwenden Sie also eine Requisite!

32
03 мая '11 в 22:35 2011-05-03 22:35 Die Antwort wird von Arnaud F gegeben. 03. Mai '11 um 10:35 2011-05-03 22:35

Attribute befinden sich in Ihrer Textdokument- / HTML-Datei (== Stellen Sie sich vor, dass dies das Ergebnis der Analyse der Markierung von HTML-Markup ist), während sich die Eigenschaften im HTML-Baum-DOM befinden (== im Wesentlichen die tatsächliche Eigenschaft eines Objekts im JS-Sinn).

Es ist wichtig zu wissen, dass viele von ihnen synchronisiert werden (wenn Sie die class aktualisieren und das class in html ebenfalls aktualisiert wird, aber ansonsten). Einige Attribute können jedoch mit unerwarteten Eigenschaften synchronisiert werden. Das checked Attribut entspricht beispielsweise der Eigenschaft defaultChecked

  • Durch das manuelle .prop('checked') des Kontrollkästchens wird der Wert von .prop('checked') geändert, die Werte von .attr('checked') und .prop('defaultChecked')
  • $('#input').prop('defaultChecked', true) einstellen, ändert sich auch .attr('checked') , dies wird jedoch auf dem Element nicht sichtbar.

Die Daumenregel : Die .prop() -Methode sollte für logische Attribute / Eigenschaften und für Eigenschaften verwendet werden, die in html nicht vorhanden sind (z. B. window.location). Alle anderen Attribute (die Sie in html sehen können) können und sollten weiterhin mit der .attr() -Methode .attr() werden. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

Und hier ist eine Tabelle, die zeigt, wo .prop() bevorzugt wird (obwohl .attr() immer noch verwendet werden kann).

2019

26
12 июня '15 в 8:56 2015-06-12 08:56 Die Antwort wird von Lakesare am 12. Juni 15 um 8:56 2015-06-12 08:56 gegeben

.attr() :

  • Attributwert abrufen für das erste Element in der Menge der übereinstimmenden Elemente.
  • Gibt Ihnen den Wert des Elements wie in der HTML-Datei beim Laden der Seite definiert.

.prop() :

  • Eigenschaftswert abrufen für das erste Element in der Menge der übereinstimmenden Elemente.
  • Gibt aktualisierte Werte von Elementen zurück, die mit Javascript / Jquery geändert wurden
18
08 дек. Die Antwort lautet Kgn-web 08 Dez. 2015-12-08 12:14 '15 am 12:14 2015-12-08 12:14

Normalerweise möchten Sie Eigenschaften verwenden. Verwenden Sie Attribute nur für:

  • Benutzerdefiniertes HTML-Attribut abrufen (da es nicht mit der DOM-Eigenschaft synchronisiert ist).
  • So erhalten Sie beispielsweise ein HTML-Attribut, das nicht mit der DOM-Eigenschaft synchronisiert wird. Ruft den "ursprünglichen Wert" des Standard-HTML-Attributs ab, z. B. <input value="abc">.
13
02 февр. Die Antwort ist na oder 02 Feb. gegeben. 2014-02-02 23:36 '14 um 23:36 Uhr 2014-02-02 23:36

attributes → HTML

properties → DOM

7
26 дек. Die Antwort ist NkS 26. Dezember gegeben. 2014-12-26 16:28 '14 am 16:28 2014-12-26 16:28

Vor jQuery 1.6 hat die attr() Methode beim Extrahieren von Attributen manchmal Eigenschaftswerte berücksichtigt, was zu einem widersprüchlichen Verhalten führte.

Die Einführung der prop() -Methode bietet eine Möglichkeit, Eigenschaftswerte explizit abzurufen, während .attr() Attribute extrahiert.

Dokumente:

jQuery.attr() den Attributwert für das erste Element in der Menge der übereinstimmenden Elemente.

jQuery.prop() den Eigenschaftswert für das erste Element in der Menge der übereinstimmenden Elemente ab.

6
25 окт. Antwort von Gothburz am 25. Oktober. 2015-10-25 03:05 '15 am 3:05 2015-10-25 03:05

Erinnern Sie uns sorgfältig daran, prop() , zum Beispiel:

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

Вышеприведенная функция используется для проверки флажка checkbox1 или нет, если отмечено: return 1; if not: return 0. Функция prop() используется здесь как функция GET.

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

Вышеуказанная функция используется для установки checkbox1 для проверки и возврата ALWAY 1. Теперь функция prop() используется как функция SET.

Не испортите.

P/S: Когда я проверяю свойство src . Если src пуст, prop возвращает текущий URL-адрес страницы (неверно) и attr возвращает пустую строку (справа). p>

2
ответ дан user2657778 17 окт. '15 в 19:12 2015-10-17 19:12

jQuery 1.6 вводит функцию.prop() и разделяет атрибуты и свойства DOM, она поднимает много вопросов о различии между функциями.attr и.prop.

см. ниже примеры:

Пример: 1)

 <input id="demo" type="text" dbvalue="Kansagara" /> $("#demo").attr("dbvalue"); // returns Kansagara $("#demo").prop("dbvalue"); // returns undefined 

.prop() возвращает значение только атрибута HTML DOM, он не возвращает значение настраиваемого атрибута, в то время как.attr() также возвращает значение пользовательского атрибута, показанное выше.

Пример: 2)

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

Теперь я изменил текст "Kansagara" на "Hitesh" в текстовом поле.

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

Теперь у вас есть идея, что это значит. Изменяется только свойство элементов, поскольку оно находится в DOM и динамическом. Но атрибут элементов находится в тексте HTML и не может быть изменен. В широком смысле свойство всегда представляет текущее состояние, в то время как атрибут (за исключением старых версий IE) представляет начальное состояние или предназначен для атрибутов html, поскольку они строго определены. атрибут ничего не сообщает о текущем состоянии.

для флажка (jquery 1. 6+)

 <input id="check1" checked="checked" type="checkbox" /> .attr('checked') //returns checked .prop('checked') //returns true .is(':checked') //returns true 

prop возвращает значение Boolean для отмеченного, выбранного, отключенного, readOnly..etc, в то время как attr возвращает определенную строку. Таким образом, вы можете напрямую использовать.prop('checked) в условии if.

.attr() вызывает.prop() внутри, поэтому метод.attr() будет немного медленнее, чем доступ к ним непосредственно через.prop().

Для jQuery 1. 6+, prop будет использоваться в основном потому, что он прост и шире, чем attr. В большинстве старых проектов attr используется для получения текущей информации о состоянии элемента. Но теперь опора заняла эту работу, и атр будет заменен опорой.

Hoffnung wird helfen.

2
ответ дан Hitesh Kansagara 08 апр. '18 в 18:31 2018-04-08 18:31

1) Свойство находится в DOM; атрибут находится в HTML, который анализируется в DOM.

2) $(elem).attr( "checked" ) (1.6.1+) "checked" (String) Будет изменение с состоянием флажка

3) $(elem).attr( "checked" ) (pre-1.6) true (Boolean) Изменено с состоянием флажка

  • В основном мы хотим использовать для объекта DOM вместо пользовательского атрибута например data-img, data-xyz .

  • Также некоторые различия при доступе к значению checkbox и href с attr() и prop() по мере изменения вещи с выходом DOM с prop() в качестве полной ссылки из origin и Boolean значение для флажка (pre-1.6)

  • Мы можем получить доступ только к элементам DOM с помощью prop other, а затем undefined

.prop()

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

Метод.prop() получает значение свойства только для первого элемента в согласованном наборе. Он возвращает undefined для значения свойства, которое не было задано, или если согласованный набор не имеет элементов. Чтобы получить значение для каждого элемента отдельно, используйте конструкцию цикла, такую как метод jQuery.each() или.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. 

Метод.attr() получает значение атрибута только для первого элемента в согласованном наборе. Чтобы получить значение для каждого элемента отдельно, используйте конструкцию цикла, такую как метод jQuery.each() или.map().

Использование метода jQuery.attr() для получения значения атрибута элемента имеет два основных преимущества:

Удобство: он может быть вызван непосредственно на объект jQuery и привязан к другим методам jQuery. Совместимость между браузерами: значения некоторых атрибутов сообщаются непоследовательно в браузерах и даже в версиях одного браузера. Метод.attr() уменьшает такие несоответствия.

 <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> 
0
ответ дан Alireza 27 мая '18 в 8:02 2018-05-27 08:02

Ответ Gary Hole очень важен для решения проблемы, если код написан таким образом

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

Так как функция prop возвращает объект CSSStyleDeclaration , код выше не работает должным образом в каком-либо браузере (в моем случае тестируется с IE8 with Chrome Frame Plugin ).

Таким образом, изменяя его на следующий код

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

решил проблему.

-2
ответ дан zawhtut 15 окт. '15 в 11:38 2015-10-15 11:38

Другие вопросы по меткам или Задайте вопрос