suchen

Heim >Web-Frontend >js-Tutorial >jquery ermittelt den aktivierten Status des Kontrollkästchens und unterscheidet attr und prop_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:25:001956Durchsuche

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

3bf9641bf4d128c196981f801f852009Baidu5db79b134e9f6b82c0b36e0489ee08ed
In diesem Beispiel umfassen die DOM-Attribute des 3499910bf9dac5ae3c52d5ede7383485-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.

ddec45da1f9fc3d73ad4ec9e6cfd94cbLöschen5db79b134e9f6b82c0b36e0489ee08ed
In diesem Beispiel umfassen die DOM-Attribute des 3499910bf9dac5ae3c52d5ede7383485-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>

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lernen Sie den Trick „return false_javascript“ in jQueyNächster Artikel：Lernen Sie den Trick „return false_javascript“ in jQuey

In Verbindung stehende Artikel

Mehr sehen