jquery ermittelt den aktivierten Status des Kontrollkästchens und unterscheidet attr und prop

jquery ermittelt den aktivierten Status des Kontrollkästchens und unterscheidet attr und prop_jquery

WBOY

Freigeben： 2016-05-16 15:25:00

Original

1957 Leute haben es durchsucht

In einem aktuellen Projekt musste ich jquery verwenden, um festzustellen, ob das Kontrollkästchen in der Eingabe aktiviert war. Ich habe festgestellt, dass mit attr() der geänderte Status des Kontrollkästchens nicht ermittelt werden konnte jQuery 1.6 hat eine prop()-Methode hinzugefügt, die von der offiziellen Methode übernommen wurde. Eine Beschreibung davon lautet:

Der Unterschied zwischen Attributen und Eigenschaften kann in bestimmten Situationen wichtig sein. Vor jQuery 1.6 berücksichtigte die Methode .attr() beim Abrufen einiger Attribute manchmal Eigenschaftswerte, was zu inkonsistentem Verhalten führen konnte . Ab jQuery 1.6 bietet die Methode .prop() eine Möglichkeit, Eigenschaftswerte explizit abzurufen, während .attr() Attribute abruft.
Die Übersetzung des oben Gesagten lautet wahrscheinlich: prop() verarbeitet die Attribute, die vom Knotenobjekt stammen, das viele native Eigenschaften enthält, und attr() stammt von den Attributen des Objekts, was bei uns der Fall sein kann Fügen Sie Attribute zum Elementknoten hinzu. Es werden nur Knoten vorhanden sein. Natürlich stellt die vorherige Übersetzung nur meinen eigenen Standpunkt dar. Wenn es Fehler gibt, können Sie darauf hinweisen ~~

Um es einfach auszudrücken:

Für die inhärenten Attribute des HTML-Elements selbst verwenden Sie bei der Verarbeitung die prop-Methode.
Für unsere eigenen benutzerdefinierten DOM-Attribute von HTML-Elementen verwenden wir bei der Verarbeitung die Methode attr.
Die obige Beschreibung ist möglicherweise etwas vage. Ich werde einige Blog-Inhalte von Experten zitieren und meine Tests hinzufügen, um einige Beispiele zu nennen.

Erstes Beispiel: Inhärente Attribute und benutzerdefinierte Attributbeschreibungen des Elements

http://www.baidu.com" target="_self" class="btn">Baidu
In diesem Beispiel umfassen die DOM-Attribute des -Elements „href, target“ und „class“. Diese Attribute sind auch im W3C-Standard enthalten Mit anderen Worten: Die Eigenschaften, die in der IDE intelligent angefordert werden können, werden als intrinsische Eigenschaften bezeichnet. Beim Umgang mit diesen Eigenschaften wird die Verwendung der Prop-Methode empfohlen.

Löschen
In diesem Beispiel umfassen die DOM-Attribute des -Elements offensichtlich die ersten beiden Attribute, während das letztere „action“-Attribut von uns angepasst wird Es selbst verfügt nicht über dieses Attribut. Dies ist ein benutzerdefiniertes DOM-Attribut. Beim Umgang mit diesen Attributen empfiehlt sich die Verwendung der attr-Methode. Wenn Sie die Prop-Methode verwenden, um Werte abzurufen und Eigenschaftswerte festzulegen, werden undefinierte Werte zurückgegeben.

Zweites Beispiel: Der Unterschied zwischen prop() und attr() in Formularanwendungen

Sehen wir uns zunächst einen Codeabschnitt an, der die attr()-Methode verwendet:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").attr("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").attr("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

Nach dem Login kopieren

Das Testergebnis des oben genannten Programms ist:

Wie aus dem dynamischen Diagramm ersichtlich ist, kann die Verwendung von attr() den ausgewählten Status des Benutzers nicht abrufen. Es wird nur der Anfangswert des Formulars zurückgegeben.

Schauen wir uns einen Codeabschnitt mit der prop()-Methode an:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").prop("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").prop("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

Nach dem Login kopieren

Das Testergebnis des oben genannten Programms ist:

Wie aus dem dynamischen Diagramm ersichtlich ist, kann prop() verwendet werden, um den Auswahl- und Abbruchvorgangsstatus des Benutzers in Echtzeit abzurufen.

Der Unterschied, den ich zusammenfasse, ist: Der von der Eigenschaft aufgezeichnete Wert wird in Echtzeit entsprechend der Aktion des Benutzers aktualisiert, während der vom Attribut aufgezeichnete Wert der Anfangswert ist, der nur meine eigene Meinung darstellt.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.