Explication détaillée de la différence entre prop et attr dans js

L'objectif principal de cet article est que attr obtient la valeur de l'élément à partir de la recherche sur la page, la page doit donc définir clairement l'élément pour obtenir la valeur, ce qui est relativement lent.
Par exemple :

<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。

car il n'y a pas de mot-clé coché dans <input name=&#39;test&#39; type=&#39;checkbox&#39;>.

• Prop prend la valeur de l'objet attribut. Vous pouvez obtenir autant de valeurs qu'il y a d'attributs dans l'objet attribut. Il n'est pas nécessaire de l'afficher. la définition sur la page.
  Par exemple,
  

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

Vous rencontrerez un problème ici : S'il s'agit d'un attribut personnalisé, alors il n'y a pas un tel attribut dans l'objet attribut. Donc prop renvoie undefined. Mais cet attribut peut être récupéré à partir de la page, donc attr peut être obtenu.

Deuxièmement

• attr obtient la valeur d'initialisation À moins qu'elle ne soit modifiée par attr('name', 'value'), la valeur ne changera pas. La valeur de l'attribut prop est dynamique, comme la case à cocher. Une fois cochée, cochée devient vraie et la valeur de la prop changera également.

Résumé

Il y a donc une expérience :

• Pour les attributs inhérents à l'élément HTML lui-même, lors du traitement Quand en utilisant la méthode des accessoires. Rapide et précis.

• Pour nos propres attributs DOM personnalisés des éléments HTML, lors du traitement, utilisez la méthode attr.

La description ci-dessus est peut-être un peu vague, donnez juste quelques exemples.

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

Dans cet exemple, les attributs DOM de l'élément <a> incluent id, href et target. Ces attributs sont <a<🎜. >> lui-même. Certains attributs sont inclus dans la norme W3C ou des attributs qui peuvent être intelligemment demandés dans l'EDI. Ils sont appelés attributs intrinsèques. Lorsqu'il s'agit de ces propriétés, il est recommandé d'utiliser prop.

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

Dans cet exemple, les attributs DOM de l'élément <

a> incluent id, href, target et uuu. Les trois premiers sont des attributs inhérents et le dernier. L'attribut "uuu" est Notre élément <a> personnalisé lui-même n'a pas cet attribut. Il s'agit d'un attribut DOM personnalisé. Lorsqu'il s'agit de ces attributs, il est recommandé d'utiliser attr.

Lire les attributs inhérents des éléments HTML (attribués)

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

• 
  

Lire les éléments HTML inhérents attributs (non attribués)

Les attributs inhérents aux différentes balises HTML ne sont pas exactement les mêmes. Par exemple : l'attribut coché est un attribut inhérent de la balise checkbox, mais pas l'attribut inhérent de la balise a. Bien que l'attribut class soit un attribut inhérent à la balise a, si aucune valeur n'est attribuée à l'attribut dans l'élément, il ne peut pas être lu à l'aide de attr().

<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可以对任意属性设置属性值。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!