Explication détaillée de la différence entre attr et prop dans jquery avec exemples et utilisation

Après l'introduction de la méthode prop dans les versions supérieures de jquery, quand faut-il utiliser prop ? Quand utiliser attr ? Quelle est la différence entre les deux ? Ces problèmes surviennent.

Il existe de nombreuses réponses en ligne sur la différence entre les deux. Voici une expérience très simple :

Pour les attributs inhérents à l'élément HTML lui-même, utilisez la méthode prop lors du traitement.

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

Dans jQuery, la fonction attr() et la fonction prop() sont utilisées pour définir ou obtenir des attributs spécifiés, et leurs paramètres et leur utilisation sont presque identiques.

Mais il faut dire que les usages de ces deux fonctions ne sont pas les mêmes. Présentons en détail la différence entre ces deux fonctions.

1. Différents objets d'opération

Évidemment, attr et prop sont respectivement les abréviations des mots attribut et propriété, et ils signifient tous deux « attribut ».

Cependant, dans jQuery, l'attribut et la propriété sont deux concepts différents. L'attribut représente l'attribut du nœud Document HTML et la propriété représente l'attribut de l'objet JS.

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.php.cn/" };
</script>

Dans jQuery, l'objectif de conception de la fonction prop() est de définir ou d'obtenir l'attribut (propriété) sur l'élément DOM spécifié (en référence à l'objet JS, le type d'élément ); ) fonction L'objectif de la conception est de définir ou d'obtenir l'attribut sur le nœud de document correspondant à l'élément DOM spécifié.

<!-- attr()函数针对的是该文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

Bien sûr, dans l'implémentation sous-jacente de jQuery, les fonctions des fonctions attr() et prop() sont implémentées via des objets Element natifs JS (tels que msg dans le code ci-dessus). La fonction attr() s'appuie principalement sur les méthodes getAttribute() et setAttribute() de l'objet Element. La fonction prop() s'appuie principalement sur les méthodes natives d'acquisition et de définition des propriétés d'objet dans JS.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */
// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);
// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145
/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */
// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");
// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

Bien sûr, jQuery encapsule ces opérations, ce qui les rend plus pratiques à utiliser (comme la définition de plusieurs propriétés en même temps sous forme d'objets) et permet d'obtenir une compatibilité entre navigateurs.

De plus, bien que prop() cible la propriété de l'élément DOM, pas l'attribut du nœud de l'élément. Cependant, les modifications apportées à certains attributs des éléments DOM affecteront également les attributs correspondants sur les nœuds des éléments. Par exemple, l'identifiant de la propriété correspond à l'identifiant de l'attribut et le className de la propriété correspond à la classe de l'attribut.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

2. Différentes versions de l'application

attr() est une fonction qui existe dans la version 1.0 de jQuery, et prop() est une nouvelle fonction dans la version 1.6 de jQuery. Il ne fait aucun doute qu'avant la 1.6, vous ne pouvez utiliser que la fonction attr() ; dans les versions 1.6 et ultérieures, vous pouvez choisir la fonction correspondante en fonction des besoins réels.

3. Les types de valeurs d'attribut utilisées pour le réglage sont différents

Étant donné que la fonction attr() opère sur les attributs du nœud de document, la valeur d'attribut définie ne peut être que stringType, s'il ne s'agit pas d'un type chaîne, sa méthode toString() sera également appelée pour le convertir en type chaîne.

La fonction prop() opère sur les propriétés des objets JS, de sorte que les valeurs de propriété définies peuvent être de n'importe quel type, y compris des tableaux et des objets.

4. Autres détails

Avant jQuery 1.6, seule la fonction attr() était disponible. Cette fonction s'occupe non seulement de définir et d'obtenir les attributs, mais également de définir et d'obtenir les propriétés. Par exemple : avant jQuery 1.6, attr() pouvait également définir ou obtenir les propriétés des éléments DOM tels que tagName, className, nodeName, nodeType, etc.

Jusqu'à ce que jQuery 1.6 ajoute la fonction prop() et soit utilisée pour définir ou obtenir des propriétés, attr() n'était utilisé que pour définir et obtenir des attributs.

De plus, pour les attributs vérifiés, sélectionnés, désactivés et autres de l'élément de formulaire, avant jQuery 1.6, attr() obtenait la valeur de retour de ces attributs en type booléen : s'il est sélectionné (ou désactivé) , il renvoie vrai, sinon renvoie faux.

Mais à partir de la version 1.6, utilisez attr() pour obtenir la valeur de retour de ces attributs sous forme de type String. S'il est sélectionné (ou désactivé), il renvoie coché, sélectionné ou désactivé, sinon (c'est-à-dire, le nœud d'élément n'a pas cet attribut). De plus, dans certaines versions, ces valeurs d'attribut représentent la valeur de l'état initial lors du chargement du document. Même si l'état sélectionné (ou désactivé) de ces éléments est modifié par la suite, les valeurs d'attribut correspondantes ne changeront pas.

Parce que jQuery estime que : les attributs cochés, sélectionnés et désactivés représentent la valeur de l'état initial de l'attribut, et les attributs cochés, sélectionnés et désactivés de la propriété représentent la valeur de l'état en temps réel de la propriété (la valeur est vraie ou faux).

Par conséquent, dans jQuery 1.6 et versions ultérieures, veuillez utiliser la fonction prop() pour définir ou faire vérifier, sélectionner, désactiver et autres attributs. Pour les autres opérations pouvant être implémentées avec prop(), essayez d'utiliser la fonction prop().

<input id="uid" type="checkbox" checked="checked" value="1">
<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);
document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true
// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);
// attr()获取的是初始状态的值，即使取消了选中，也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>

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!