Der Unterschied zwischen attr und prop in Jquery

Wann sollte prop verwendet werden, nachdem die Prop-Methode in höheren Versionen von JQuery eingeführt wurde? Wann sollte attr verwendet werden? Was ist der Unterschied zwischen den beiden? Diese Probleme treten auf. Der folgende Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum Unterschied zwischen attr und prop in Jquery vor. Lassen Sie uns gemeinsam einen Blick darauf werfen.

Praktischer Prozess

Vor einiger Zeit hat ein Kollege eine Seite erstellt und der Effekt ist wie folgt

Seite

Wenn Sie auf das Kontrollkästchen in der oberen linken Ecke klicken, müssen Sie alle Kontrollkästchen unten auswählen.

 $("input[name='checkbox']").attr("checked",true);

Es hat jedoch überhaupt keine Auswirkung Ich habe es geändert und es ist besser

 $(function(){
  $("#all").click(function(){
   if($("#all").prop("checked")){
    $("input[name='checkbox']").prop("checked",true);
   }else{
    $("input[name='checkbox']").prop("checked",false);
   }
  });
 });

Also habe ich die offizielle Dokumentation durchgesehen, um den Unterschied zwischen attr und prop zu überprüfen, und festgestellt, dass ich es überhaupt nicht verstehen konnte, wie unten gezeigt

Also haben wir ein Experiment gemacht

  c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
  c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
  c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
  c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
  c5:<input id="c5" name="checkbox" type="checkbox" /></br>
  c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>

   var a1=$("#c1").attr("checked");
   var a2=$("#c2").attr("checked");
   var a3=$("#c3").attr("checked");
   var a4=$("#c4").attr("checked");
   var a5=$("#c5").attr("checked");
   var a6=$("#c6").attr("checked");

   var p1=$("#c1").prop("checked");
   var p2=$("#c2").prop("checked");
   var p3=$("#c3").prop("checked");
   var p4=$("#c4").prop("checked");
   var p5=$("#c5").prop("checked");
   var p6=$("#c6").prop("checked");

   console.log("a1:"+a1);
   console.log("a2:"+a2);
   console.log("a3:"+a3);
   console.log("a4:"+a4);
   console.log("a5:"+a5);
   console.log("a6:"+a6);

   console.log("p1:"+p1);
   console.log("p2:"+p2);
   console.log("p3:"+p3);
   console.log("p4:"+p4);
   console.log("p5:"+p5);
   console.log("p6:"+p6);

Das Ergebnis ist so (Chrom)

Der Effekt

Discover attr Der Rückgabewert von ist entweder geprüft oder undefiniert, und der Rückgabewert von prop ist nur wahr und falsch.

Nach dem Suchen und Testen im Internet sind die Ergebnisse der

prop()-Funktion:

1. Wenn ein entsprechendes Attribut vorhanden ist, Gibt den angegebenen Attributwert zurück.

2. Wenn kein entsprechendes Attribut vorhanden ist, ist der Rückgabewert eine leere Zeichenfolge.

Das Ergebnis der Funktion attr():

1. Wenn ein entsprechendes Attribut vorhanden ist, geben Sie den angegebenen Attributwert zurück.

2. Wenn kein entsprechendes Attribut vorhanden ist, ist der Rückgabewert undefiniert.

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 Sie bei der Verarbeitung die Methode attr.

Attribute mit zwei Attributen von wahr und falsch, z. B. aktiviert, ausgewählt oder deaktiviert, verwenden prop()

Verwandte Empfehlungen:

in jQuery . Der Unterschied zwischen attr() und .data()

Einführung in die Verwendung von getAttribute in JavaScript

jquery selector [attribute=value ] erscheint Problemlösungen

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen attr und prop in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!