it-swarm.com.de

.prop () vs .attr ()

Also jQuery 1.6 hat die neue Funktion prop() .

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

oder machen sie in diesem Fall dasselbe?

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

UPDATE

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});
<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 diese Geige: http://jsfiddle.net/maniator/JpUF2/ )

Die Konsole protokolliert die getAttribute als Zeichenfolge und die attr als Zeichenfolge, aber die prop als CSSStyleDeclaration. Warum? Und wie wirkt sich das in Zukunft auf meine Codierung aus?

2219
Neal

Update 1. November 2012

Meine ursprüngliche Antwort bezieht sich speziell auf jQuery 1.6. Mein Rat bleibt derselbe, aber jQuery 1.6.1 hat die Dinge ein wenig verändert: Angesichts des prognostizierten Stapels kaputter Websites hat das jQuery-Team auf attr() zurückgesetzt) ​​zu etwas ähnlichem (aber nicht genau dem gleichen) wie sein altes Verhalten für Boolesche Attribute . John Resig auch darüber gebloggt . Ich kann die Schwierigkeiten sehen, in denen sie sich befanden, kann aber seiner Empfehlung, attr() vorzuziehen, nicht zustimmen.

Ursprüngliche Antwort

Wenn Sie bisher nur jQuery und nicht das DOM direkt verwendet haben, kann dies eine verwirrende Änderung sein, obwohl es sich konzeptionell definitiv um eine Verbesserung handelt. Nicht so gut für die Unmengen von Sites, die jQuery verwenden und aufgrund dieser Änderung nicht mehr funktionieren.

Ich werde die wichtigsten Punkte zusammenfassen:

  • Normalerweise möchten Sie prop() anstatt attr().
  • In den meisten Fällen macht prop() das, was attr() getan hat. Das Ersetzen von Aufrufen von attr() durch prop() in Ihrem Code funktioniert im Allgemeinen.
  • Eigenschaften sind im Allgemeinen einfacher zu handhaben als Attribute. Ein Attributwert kann nur eine Zeichenfolge sein, während eine Eigenschaft von einem beliebigen Typ sein kann. Beispielsweise ist die checked -Eigenschaft ein Boolescher Wert, die style -Eigenschaft ist ein Objekt mit individuellen Eigenschaften für jeden Stil, die size -Eigenschaft ist eine Zahl.
  • Wenn sowohl eine Eigenschaft als auch ein Attribut mit demselben Namen vorhanden sind, wird in der Regel eine Aktualisierung der anderen durchgeführt. Dies gilt jedoch nicht für bestimmte Attribute von Eingaben, z. B. value und checked: für diese Attribute Die Eigenschaft stellt immer den aktuellen Status dar, während das Attribut (außer in früheren IE-Versionen) dem Standardwert/der Überprüfbarkeit der Eingabe entspricht (entsprechend der Eigenschaft defaultValue/defaultChecked).
  • Durch diese Änderung wird ein Teil der magischen jQuery-Ebene entfernt, die vor Attributen und Eigenschaften steckt. Dies bedeutet, dass jQuery-Entwickler etwas über den Unterschied zwischen Eigenschaften und Attributen lernen müssen. Das ist eine gute Sache.

Wenn Sie ein jQuery-Entwickler sind und von diesem ganzen Geschäft über Eigenschaften und Attribute verwirrt sind, müssen Sie einen Schritt zurücktreten und ein wenig darüber lernen, da sich jQuery nicht mehr so ​​sehr bemüht, Sie vor diesen Dingen zu schützen. Für das maßgebliche, aber etwas trockene Wort zu diesem Thema gibt es die folgenden Spezifikationen: DOM4 , HTML DOM , DOM Level 2 , DOM Stufe . Die DOM-Dokumentation von Mozilla ist für die meisten modernen Browser gültig und einfacher zu lesen als die technischen Daten. Sie finden daher möglicherweise deren DOM-Referenz hilfreich. Es gibt ein Abschnitt über Elementeigenschaften .

Ein Beispiel dafür, wie Eigenschaften einfacher zu handhaben sind als Attribute, ist ein Kontrollkästchen, das anfangs aktiviert ist. Hier sind zwei mögliche Teile eines gültigen HTML-Codes:

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

Wie stellen Sie fest, ob das Kontrollkästchen mit jQuery aktiviert ist? Schauen Sie sich Stack Overflow an und Sie werden häufig die folgenden Vorschläge finden:

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

Dies ist tatsächlich die einfachste Sache der Welt, die mit der booleschen Eigenschaft checked zu tun hat, die seit 1995 in allen wichtigen skriptfähigen Browsern einwandfrei existiert und funktioniert:

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

Die Eigenschaft macht auch das Aktivieren oder Deaktivieren des Kontrollkästchens trivial:

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

In jQuery 1.6 wird dies eindeutig

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

Die Idee, das Attribut checked für die Skripterstellung eines Kontrollkästchens zu verwenden, ist nicht hilfreich und nicht erforderlich. Das Anwesen ist was Sie brauchen.

  • Es ist nicht offensichtlich, wie das Kontrollkästchen mit dem Attribut checked richtig aktiviert oder deaktiviert werden kann
  • Der Attributwert gibt den Standardwert und nicht den aktuellen sichtbaren Status wieder (mit Ausnahme einiger älterer IE-Versionen, wodurch die Dinge noch schwieriger werden). Das Attribut sagt nichts darüber aus, ob das Kontrollkästchen auf der Seite aktiviert ist. Siehe http://jsfiddle.net/VktA6/49/ .
1839
Tim Down

Ich denke Tim hat es ganz gut gesagt , aber lass uns zurücktreten:

Ein DOM-Element ist ein Objekt, ein Gegenstand im Gedächtnis. Wie die meisten Objekte in OOP hat es Eigenschaften . Es enthält außerdem separat eine Zuordnung der für das Element definierten Attribute (normalerweise aus dem Markup, das der Browser zum Erstellen des Elements gelesen hat). Einige der Eigenschaften des Elements erhalten ihre Anfangswerte aus Attributen mit denselben Werten oder ähnliche Namen (value erhält seinen Anfangswert vom Attribut "value"; href erhält seinen Anfangswert vom Attribut "href", aber es ist nicht genau der gleiche Wert; className von das Attribut "Klasse"). Andere Eigenschaften erhalten ihre Anfangswerte auf andere Weise: Beispielsweise erhält die Eigenschaft parentNode ihren Wert basierend auf dem übergeordneten Element. Ein Element hat immer eine style -Eigenschaft, unabhängig davon, ob es ein "style" -Attribut hat oder nicht.

Betrachten wir diesen Anker auf einer Seite unter http://example.com/testing.html:

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

Ein wenig unentgeltliche ASCII Kunst (und viele Dinge weglassen):

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

Beachten Sie, dass die Eigenschaften und Attribute unterschiedlich sind.

Nun, obwohl sie sich unterscheiden, weil all dies sich entwickelt hat und nicht von Grund auf neu entworfen wurde, schreiben eine Reihe von Eigenschaften auf das Attribut zurück, von dem sie abgeleitet wurden, wenn Sie sie festlegen. Aber nicht alle tun dies, und wie Sie aus href oben sehen können, ist das Mapping nicht immer ein direktes "Weitergeben des Werts", manchmal ist eine Interpretation erforderlich.

Wenn ich davon spreche, dass Eigenschaften Eigenschaften eines Objekts sind, spreche ich nicht abstrakt. Hier ist ein Code, der nicht von jQuery stammt:

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

(Diese Werte gelten für die meisten Browser. Es gibt einige Abweichungen.)

Das link -Objekt ist eine echte Sache, und Sie können sehen, dass es einen echten Unterschied zwischen dem Zugriff auf eine Eigenschaft und dem Zugriff auf ein Attribut gibt .

Wie Tim sagte, wollen wir die überwiegende Mehrheit der Zeit mit Eigenschaften arbeiten. Dies liegt zum Teil daran, dass ihre Werte (auch ihre Namen) in allen Browsern konsistenter sind. Wir wollen meistens nur mit Attributen arbeiten, wenn es keine dazugehörige Eigenschaft gibt (benutzerdefinierte Attribute) 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).

Die Standardeigenschaften sind in den verschiedenen DOM-Spezifikationen aufgeführt:

Diese Spezifikationen verfügen über ausgezeichnete Indizes, und ich empfehle, Links zu ihnen griffbereit zu halten. Ich benutze sie die ganze Zeit.

Zu benutzerdefinierten Attributen gehören beispielsweise alle data-xyz Attribute, die Sie möglicherweise Elementen zuweisen, um Ihrem Code Metadaten bereitzustellen (jetzt, da dies ab HTML5 gültig ist, solange Sie das Präfix data- einhalten) ). (In neueren Versionen von jQuery können Sie über die Funktion data auf data-xyz -Elemente zugreifen. Diese Funktion ist jedoch nicht nur ein Accessor für data-xyz. Attribute [es macht mehr und weniger als das]; es sei denn, Sie benötigen tatsächlich seine Funktionen, würde ich die attr -Funktion verwenden, um mit dem data-xyz -Attribut zu interagieren.)

Die Funktion attr hatte eine verworrene Logik, um das zu bekommen, was sie für gewünscht hielten, anstatt das Attribut buchstäblich zu bekommen. Es verschmolz die Konzepte. Der Umzug zu prop und attr sollte sie aus dem Zusammenhang bringen. Kurz gesagt, in v1.6.0 ging jQuery in dieser Hinsicht zu weit, aber die Funktionalität wurde schnell wieder hinzugefügt zu attr, um die allgemeinen Situationen zu handhaben, in denen Leute attr verwenden, wenn sie dies technisch sollten prop.

652
T.J. Crowder

Diese Änderung hat für jQuery lange gedauert. Seit Jahren begnügen sie sich mit einer Funktion mit dem Namen attr(), die hauptsächlich DOM-Eigenschaften abruft und nicht das Ergebnis, das Sie vom Namen erwarten würden. Die Trennung von attr() und prop() sollte dazu beitragen, die Verwechslung zwischen HTML-Attributen und DOM-Eigenschaften zu verringern. $.fn.prop() erfasst die angegebene DOM-Eigenschaft, während $.fn.attr() das angegebene HTML-Attribut erfasst.

Im Folgenden finden Sie eine ausführliche Erläuterung zum Unterschied zwischen HTML-Attributen und DOM-Eigenschaften:

HTML-Attribute

Syntax:

<body onload="foo()">

Zweck: Ermöglicht dem Markup, Daten für Ereignisse, Rendering und andere Zwecke zuzuordnen.

Visualisierung:  HTML Attributes Das Klassenattribut wird hier im Hauptteil angezeigt. Der Zugriff erfolgt über den folgenden Code:

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

Attribute werden in Form von Zeichenfolgen zurückgegeben und können von Browser zu Browser inkonsistent sein. In manchen Situationen können sie jedoch von entscheidender Bedeutung sein. Wie oben dargestellt, erwartet IE 8 Quirks Mode (und darunter) den Namen einer DOM-Eigenschaft in get/set/removeAttribute anstelle des Attributnamens. Dies ist einer von vielen Gründen, warum es wichtig ist, den Unterschied zu kennen.

DOM-Eigenschaften

Syntax:

document.body.onload = foo;

Zweck: Ermöglicht den Zugriff auf Eigenschaften, die zu Elementknoten gehören. Diese Eigenschaften ähneln Attributen, sind jedoch nur über JavaScript zugänglich. Dies ist ein wichtiger Unterschied, der die Rolle von DOM-Eigenschaften verdeutlicht. Beachten Sie, dass sich Attribute von den Eigenschaften vollständig unterscheiden, da diese Event-Handler-Zuweisung unbrauchbar ist und das Ereignis nicht empfängt (body hat kein Onload) Ereignis, nur ein Onload-Attribut).

Visualisierung:  DOM Properties

Hier sehen Sie eine Liste der Eigenschaften unter der Registerkarte "DOM" in Firebug. Dies sind DOM-Eigenschaften. Sie werden sofort einige von ihnen bemerken, da Sie sie vorher benutzt haben, ohne es zu wissen. Ihre Werte erhalten Sie über JavaScript.

Dokumentation

Beispiel

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

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

In früheren jQuery-Versionen wird eine leere Zeichenfolge zurückgegeben. In 1.6 wird der richtige Wert foo zurückgegeben.

Ohne einen Blick auf den neuen Code für eine der beiden Funktionen zu werfen, kann ich mit Zuversicht sagen, dass die Verwirrung mehr mit dem Unterschied zwischen HTML-Attributen und DOM-Eigenschaften zu tun hat als mit dem Code selbst. Hoffentlich hat dies einige Dinge für Sie geklärt.

-Matt

246
user1385191

Eine Eigenschaft befindet sich im DOM. Ein Attribut befindet sich in dem HTML-Code, der in das DOM geparst wird.

Weitere Details

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

Beispiel: Durch Ändern des Attributs class eines Tags wird die Eigenschaft className dieses Tags im DOM geändert. Wenn Sie kein Attribut für ein Tag haben, haben Sie immer noch die entsprechende DOM-Eigenschaft mit einem leeren oder einem Standardwert.

Beispiel: Während Ihr Tag kein class -Attribut hat, ist die DOM-Eigenschaft className mit einem leeren Zeichenfolgenwert vorhanden.

bearbeiten

Wenn Sie den einen ändern, wird der andere von einem Controller geändert und umgekehrt. Dieser Controller befindet sich nicht in jQuery, sondern im nativen Code des Browsers.

239
yunzen

Es ist nur die Unterscheidung zwischen HTML-Attributen und DOM-Objekten, die Verwirrung stiftet. Für diejenigen, die sich mit den nativen Eigenschaften von DOM-Elementen wie this.srcthis.valuethis.checked usw. wohl fühlen, ist .prop ein herzliches Willkommen in der Familie. Für andere ist es nur eine zusätzliche Verwirrungsebene. Lassen Sie uns das klären.

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

<input blah="hello">
  1. $('input').attr('blah'): Gibt wie erwartet 'hello' zurück. Keine Überraschungen hier.
  2. $('input').prop('blah'): Gibt undefined zurück, da versucht wird, [HTMLInputElement].blah auszuführen, und für dieses DOM-Objekt ist keine solche Eigenschaft vorhanden. Es existiert nur im Gültigkeitsbereich 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');
  1. $('input').attr('blah'): gibt 'Apple' wie? Warum nicht "Birne", da dies zuletzt auf dieses Element gesetzt wurde. Da die Eigenschaft für das Eingabeattribut und nicht für das DOM-Eingabeelement selbst geändert wurde, funktionieren sie im Grunde genommen fast unabhängig voneinander.
  2. $('input').prop('blah'): gibt 'pear' zurück

Das, womit Sie wirklich vorsichtig sein müssen, ist, dass Sie aus dem oben genannten Grund nicht die Verwendung derselben Eigenschaft in Ihrer gesamten Anwendung mischen.

Sehen Sie sich eine Geige an, die den Unterschied demonstriert: 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, d. h. "font:arial;"
  • .prop('style') - gibt ein Style-Deklarationsobjekt zurück, d. h. CSSStyleDeclaration

Runde 2: Wert

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

$('input').prop('value', 'i changed the value');
  • .attr('value') - gibt 'hello' zurück *
  • .prop('value') - gibt 'i changed the value' zurück

* Hinweis: Aus diesem Grund verfügt jQuery über eine Methode .val(), die intern der Methode .prop('value') entspricht.

138
Gary Green

TL; DR

Verwenden Sie in den meisten Fällen prop() über attr().

Eine Eigenschaft ist der aktuelle Zustand des Eingabeelements. Ein Attribut ist der Standardwert.

Eine Eigenschaft kann verschiedene Arten von Dingen enthalten. Ein Attribut kann nur Zeichenfolgen enthalten

52
agjmills

Schmutzige Kontrolle

Dieses Konzept bietet ein Beispiel, bei dem der Unterschied erkennbar ist: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Versuch es:

  • drück den Knopf. Beide Ankreuzfelder wurden angekreuzt.
  • deaktivieren Sie beide Kontrollkästchen.
  • klicken Sie erneut auf die Schaltfläche. Nur das Kontrollkästchen prop wurde aktiviert. KNALL!
$('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>

Bei einigen Attributen wie disabled in button wird beim Hinzufügen oder Entfernen des Inhaltsattributs disabled="disabled" immer die Eigenschaft (in HTML5 IDL-Attribut genannt) umgeschaltet, da http: //www.w3 .org/TR/html5/forms.html # attr-fe-disabled sagt:

Das deaktivierte IDL-Attribut muss das deaktivierte Inhaltsattribut widerspiegeln.

sie könnten damit davonkommen, obwohl es hässlich ist, da es HTML ohne Notwendigkeit modifiziert.

Bei anderen Attributen wie checked="checked" auf input type="checkbox" kommt es zu Fehlern, da sie beim Klicken verschmutzen und dann das Inhaltsattribut checked="checked" hinzufügen oder entfernen schaltet die Überprüfung nicht mehr um .

Aus diesem Grund sollten Sie zumeist .prop verwenden, da dies sich direkt auf die effektive Eigenschaft auswirkt, anstatt sich auf komplexe Nebenwirkungen beim Ändern des HTML-Codes zu verlassen.

Alles ist in das Dokument :

Der Unterschied zwischen Attributen und Eigenschaften kann in bestimmten Situationen wichtig sein. Vor jQuery 1.6 berücksichtigte die Methode .attr () manchmal Eigenschaftswerte beim Abrufen einiger Attribute, was zu inkonsistentem Verhalten führen konnte. Ab jQuery 1.6 bietet die .prop () -Methode eine Möglichkeit, Eigenschaftswerte explizit abzurufen, während .attr () Attribute abruft.

Also benutze Stütze!

32
Arnaud F.

Attribute befinden sich in Ihrem HTML Textdokument/Ihrer HTML-Datei (== Stellen Sie sich vor, dies ist das Ergebnis Ihres HTML-Codes Markup geparst), wohingegen
Eigenschaften sind in HTML DOM-Baum (== im Grunde genommen eine tatsächliche Eigenschaft einiger Objekt im Sinne von JS).

Wichtig ist, dass viele von ihnen synchronisiert werden (wenn Sie die Eigenschaft class aktualisieren, wird auch das Attribut class in HTML aktualisiert; andernfalls). Aber einige Attribute können mit unerwarteten Eigenschaften synchronisiert werden - zB Attribut checked entspricht der Eigenschaft defaultChecked, damit

  • durch manuelles Aktivieren eines Kontrollkästchens wird der Wert von .prop('checked') geändert, die Werte von .attr('checked') und .prop('defaultChecked') werden jedoch nicht geändert
  • wenn Sie $('#input').prop('defaultChecked', true) einstellen, wird auch .attr('checked') geändert, dies ist jedoch für ein Element nicht sichtbar.

Die Faustregel lautet : .prop() Methode sollte für boolesche Attribute/Eigenschaften und für Eigenschaften verwendet werden, die in HTML nicht vorhanden sind (z. B. Fenster) .Standort). Alle anderen Attribute (die Sie im HTML-Code sehen können) können und sollten weiterhin mit der Methode .attr() bearbeitet 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() noch verwendet werden kann).

table with preferred usage


Warum möchten Sie manchmal .prop () anstelle von .attr () verwenden, wenn letzteres offiziell empfohlen wird?

  1. .prop() kann einen beliebigen Typ zurückgeben - string, integer, boolean; während .attr() immer einen String zurückgibt.
  2. .prop() soll etwa 2,5-mal schneller sein als .attr().
27
lakesare

.attr():

  • Ruft den Wert eines Attributs für das erste Element in der Menge der übereinstimmenden Elemente ab.
  • Gibt den Wert des Elements an, wie er im HTML-Code beim Laden der Seite definiert wurde

.prop():

  • Rufen Sie den Wert von a Eigenschaft für das erste Element in der Menge der übereinstimmenden Elemente ab.
  • Gibt die aktualisierten Werte von Elementen an, die über Javascript/jquery geändert wurden
18
Kgn-web

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

  1. Abrufen eines benutzerdefinierten HTML-Attributs (da es nicht mit einer DOM-Eigenschaft synchronisiert ist).
  2. Abrufen eines HTML-Attributs, das nicht mit einer DOM-Eigenschaft synchronisiert werden kann, z. Ermittelt den "ursprünglichen Wert" eines Standard-HTML-Attributs wie <input value="abc">.
13
naor

attributes -> HTML

properties -> DOM

7
NkS

Vor jQuery 1.6 hat die attr() -Methode manchmal Eigenschaftswerte beim Abrufen von Attributen berücksichtigt Dies verursachte ein eher inkonsistentes Verhalten.

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

Die Dokumente:

jQuery.attr() Ermittelt den Wert eines Attributs für das erste Element in der Menge der übereinstimmenden Elemente.

jQuery.prop() Ruft den Wert einer Eigenschaft für das erste Element in der Gruppe übereinstimmender Elemente ab.

6
Gothburz

Erinnern Sie sich vorsichtig an die Verwendung von prop(), Beispiel:

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

Die obige Funktion wird verwendet, um zu überprüfen, ob Checkbox1 aktiviert ist oder nicht, wenn aktiviert: return 1; Wenn nicht: 0 zurückgeben. Funktion prop () wird hier als GET-Funktion verwendet.

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

Die obige Funktion wird verwendet, um Checkbox1 zu aktivieren und IMMER 1 zurückzugeben. Jetzt wird die Funktion prop () als SET-Funktion verwendet.

Versaut es nicht.

P/S: Wenn ich die Eigenschaft Image src überprüfe. Wenn das src leer ist, prop die aktuelle URL der Seite zurückgeben (falsch), und attr gibt eine leere Zeichenkette zurück (rechts).

2
user2657778

jQuery 1.6 führt die Funktion .prop () ein und trennt DOM-Attribute und -Eigenschaften. Dabei wurden viele Fragen zum Unterschied zwischen den Funktionen .attr und .prop aufgeworfen.

siehe unten Beispiele:

Beispiel 1)

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

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

.prop () gibt nur den Wert des HTML-DOM-Attributs zurück. Der Wert des benutzerdefinierten Attributs wurde nicht zurückgegeben, während .attr () auch den oben gezeigten Wert des benutzerdefinierten Attributs zurückgibt.

Beispiel: 2)

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

Jetzt habe ich den Text "Kansagara" in "Hitesh" im Textfeld geändert.

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

Jetzt haben Sie eine Vorstellung davon, was es bedeutet. Nur die Eigenschaft des Elements wird geändert, da sie sich im DOM befindet und dynamisch ist. Das Attribut des Elements befindet sich jedoch im HTML-Text und kann nicht geändert werden. Im weitesten Sinne stellt die Eigenschaft immer den aktuellen Status dar, während das Attribut (außer in früheren IE-Versionen) den ursprünglichen Status darstellt oder für HTML-Attribute gedacht ist, da diese genau definiert sind. Das Attribut sagt nichts über den aktuellen Status aus.

für ein Ankreuzfeld (jquery 1.6+)

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

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

die prop-Methode gibt einen Booleschen Wert für checked, selected, disabled, readOnly..etc zurück, während attr eine definierte Zeichenfolge zurückgibt. Sie können also direkt .prop ("markiert") in der if-Bedingung verwenden.

.attr () ruft intern .prop () auf, sodass die .attr () -Methode etwas langsamer ist als der direkte Zugriff über .prop ().

Für jQuery 1.6+ wird hauptsächlich prop verwendet, da es einfach und breiter als attr ist. In den meisten alten Projekten wird attr verwendet, um Informationen zum aktuellen Status des Elements abzurufen. Aber jetzt hat Stütze diesen Job genommen und attr würde durch Stütze ersetzt.

Ich hoffe es hilft.

2

Eine Sache, die .attr() tun kann .prop() nicht: CSS-Selektoren beeinflussen

Hier ist ein Problem, das ich in den anderen Antworten nicht gesehen habe.

CSS-Auswahl _[name=value]_

  • wird auf .attr('name', 'value') antworten
  • aber nicht immer zu .prop('name', 'value')

.prop() betrifft nur wenige Attributselektoren

.attr() wirkt sich auf alle Attributselektoren aus

0
Bob Stein

1) Eine Eigenschaft befindet sich im DOM. Ein Attribut befindet sich in dem HTML-Code, der in das DOM geparst wird.

2) $ (elem) .attr ("checked") (1.6.1+) "checked" (String) Ändert sich mit dem Status des Kontrollkästchens

3) $ (elem) .attr ("checked") (vor 1.6) true (Boolean) Geändert mit Checkbox-Status

  • Meistens möchten wir für DOM-Objekte anstelle von benutzerdefinierten Attributen wie data-img, data-xyz verwenden.

  • Auch einige Unterschiede beim Zugriff auf checkbox value und href mit attr() und prop(), da sich das Ding mit der DOM-Ausgabe mit prop() als vollständiger Link von Origin und Boolean value für das Kontrollkästchen (pre-1.6) ändert.

  • Wir können nur mit prop auf DOM-Elemente zugreifen, außer es gibt 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>
0
Parth Trivedi