Detaillierte Erklärung des Unterschieds zwischen prop und attr in js

Der Hauptzweck dieses Artikels besteht darin, dass attr den Elementwert aus der Seitensuche erhält. Daher muss die Seite das Element klar definieren, um den Wert zu erhalten, was relativ langsam ist.
Zum Beispiel:

<input name=&#39;test&#39; type=&#39;checkbox&#39;> 
$(&#39;input:checkbox&#39;).attr(&#39;type&#39;); 返回checkbox. 
$(&#39;input:checkbox&#39;).attr(&#39;checked&#39;); 返回undefined。

, weil in 3973a548d6b6c02de6ba3f6191e59f0a kein geprüftes Schlüsselwort vorhanden ist.

• Prop übernimmt den Wert aus dem Attributobjekt. Sie können so viele Werte abrufen, wie Attribute im Attributobjekt vorhanden sind die Definition auf der Seite.
  Beispiel:
  

• $('input:checkbox').prop('checked'); 返回false
  。

Hier tritt ein Problem auf: Wenn es sich um ein benutzerdefiniertes Attribut handelt, dann Es gibt kein solches Attribut im Attributobjekt. Prop gibt also undefiniert zurück. Dieses Attribut kann jedoch von der Seite abgerufen werden, sodass attr erhalten werden kann.

Zweitens

• attr erhält den Initialisierungswert, sofern er nicht durch attr('name', 'value') geändert wird. Der Wert des Requisitenattributs ist dynamisch, z. B. das Kontrollkästchen. Nachdem es ausgewählt wurde, wird die Option „true“ und der Requisitenwert ändert sich ebenfalls.

Zusammenfassung

Es gibt also eine Erfahrung:

• Für die inhärenten Attribute des HTML-Elements selbst bei der Verarbeitung von When unter Verwendung der Prop-Methode. Schnell und genau.

• Für unsere eigenen benutzerdefinierten DOM-Attribute von HTML-Elementen verwenden Sie bei der Verarbeitung die Methode attr.

Die obige Beschreibung mag etwas vage sein, geben Sie einfach ein paar Beispiele.

<a id="first" href="#" target="_self">超链接</a>

In diesem Beispiel umfassen die DOM-Attribute des Elements c6c96f5e3e389d70f7aaeb98d4f95fc8 id, href und target >>-Element selbst. Es gibt einige Attribute, die im W3C-Standard enthalten sind oder die in der IDE intelligent abgefragt werden können. Beim Umgang mit diesen Eigenschaften wird die Verwendung von prop empfohlen.

In diesem Beispiel umfassen die DOM-Attribute des Elements 474289e0c0329b3340390d99725d3905 id, href, target und uuu. Die ersten drei sind inhärente Attribute und das letzte „uuu“-Attribut ist Unser angepasstes c6c96f5e3e389d70f7aaeb98d4f95fc8-Element selbst hat dieses Attribut nicht. Dies ist ein angepasstes DOM-Attribut. Beim Umgang mit diesen Attributen wird die Verwendung von attr empfohlen. Lesen Sie die inhärenten Attribute von HTML-Elementen (zugewiesen)

<a href="#" target="_self">超链接</a>
//attr和prop都读取成功
//attr("href")的值是：#//prop("href")的值是：http://localhost:4590/AttributeHandle/Index#alert($("a").attr("href"));alert($("a").prop("href"));

• 
  

Lesen Sie inhärente HTML-Elemente Attribute (nicht zugewiesen)

Die inhärenten Attribute verschiedener HTML-Tags sind nicht genau gleich. Beispiel: Das aktivierte Attribut ist ein inhärentes Attribut des Checkbox-Tags, aber nicht das inhärente Attribut des a-Tags. Obwohl das Klassenattribut ein inhärentes Attribut des a-Tags ist, kann es nicht mit attr() gelesen werden, wenn dem Attribut im Element kein Wert zugewiesen ist.

<a href="#" target="_self">超链接</a>
<input type="checkbox" id="testCheckBox" value="测试CheckBox"/>
alert($("a").attr("id"));//输出：undefine
alert($("a").prop("id"));//输出：默认值""alert($("a").attr("checked"));//输出：undefine
alert($("a").prop("checked"));//输出：undefine
alert($("#testCheckBox").attr("checked"));//输出：undefine
alert($("#testCheckBox").prop("checked"));//输出：默认值falsealert($("a").attr("class"));//输出：undefine
alert($("a").prop("class"));//输出：默认值""

读取HTML元素自定义属性（已赋值）

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("uuu"));//输出：guoguoalert($("a").prop("uuu"));//输出：undefine

读取HTML元素自定义属性（未赋值）

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("abc"));//输出：undefinealert($("a").prop("abc"));//输出：undefine

设置HTML元素固有属性

<a href="#" target="_self" uuu="guoguo">超链接</a>
$("a").attr("id","link");//id属性添加成功$("a").prop("id","link");//id属性添加成功

设置HTML元素自定义属性

<a href="#" target="_self" uuu="guoguo">超链接</a>$("a").attr("abc", "myself");//成功添加属性abc="myself"$("a").prop("abc", "myself");//添加abc属性失败$("a").attr("action", "addAttribute");//成功添加属性action="addAttribute"$("a").prop("action", "addAttribute");//添加action属性失败

总结

prop读取属性值：读取已赋值的固有属性会得到属性值，读取未赋值的固有属性会得到属性默认值，读取自定义属性时无论是否赋值均得到undefine。 
prop设置属性值：prop只能设置固有属性值。 
attr读取属性值：无论是固有属性还是自定义属性，attr只能读取元素中已有的属性值，读取元素中没有的属性值会返回undefine。 
attr设置属性值：attr可以对任意属性设置属性值。

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen prop und attr in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!