Quelle est la différence entre attr() et prop() dans jquery

La différence entre attr() et prop() dans jquery est la suivante : la fonction attr opère sur les attributs du nœud de document, et la valeur de l'attribut définie ne peut être qu'un type de chaîne ; attributs de l'objet js. L'ensemble de valeurs de propriété peut être de n'importe quel type, y compris des tableaux et des objets.

Environnement :

Cet article s'applique à toutes les marques d'ordinateurs.

Introduction à la différence :

Dans jQuery, la fonction attr() et la fonction prop() sont toutes deux utilisées pour définir ou obtenir des attributs spécifiés, et leurs paramètres et leur utilisation sont presque identiques. Mais force est de constater que les usages de ces deux fonctions ne sont pas les mêmes.

(Tutoriel recommandé : Tutoriel vidéo jquery )

Les différences spécifiques sont les suivantes :

1 Les objets d'opération sont différents

É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 du document HTML et la propriété représente l'attribut de l'objet JS.

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age是Person的property
var Person = { name: "小明", age: 18};
</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 Le but est de définir ou d'obtenir l'attribut sur le nœud du document correspondant à l'élément DOM spécifié.

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és pour le réglage sont différents.

Étant donné que la fonction attr() opère sur les attributs du nœud de document, l'ensemble de valeurs d'attribut ne peut être que de type chaîne, si ce n'est pas un type String de caractère, sa méthode toString() sera également appelée pour le convertir en type string.

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().

<button>按钮</button>
    <input type="checkbox" name="" id="" checked="checked">
    <script src="jquery.js"></script>
    <script>
        // $(&#39;button&#39;).on(&#39;click&#39;,function(){

        // });
        // var r = $(&#39;input&#39;);
        $(&#39;button&#39;).on(&#39;click&#39;,function(){
            console.log(11)
            if ($(&#39;input&#39;).prop(&#39;checked&#39;)) {
                $(&#39;input&#39;).prop(&#39;checked&#39;,false);
            }else{
                $(&#39;input&#39;).prop(&#39;checked&#39;,true);
            }
        })
    </script>
   // attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作 自定义的属性，对于DOM对象自身的布尔值类型的属性，只能
// 通过这个两个方法来设置或者读取默认值，而不能动态改变值
// 
// prop ==> dom.checked = true;
// 对于 布尔值的属性（selected/checked/diabled） 都需要通过直接访问属性
// 方式来操作（点语法、[]）

Tout le monde sait que le js natif peut obtenir le HTML interne et le HTML externe des éléments correspondants. L'intérieur est innerHTML et l'extérieur est externalHTML. L'objet dom du js natif a ces deux attributs.
document.getElementById("linkType").outerHTML;

Comment obtenir les éléments correspondants (y compris le html de son propre élément) en utilisant jQuery ?

Puisque cet attribut existe, nous pouvons utiliser $("#linkType").prop("outerHTML") pour l'obtenir

peut utiliser $("#linkType").prop( "outerHTML", externalHTML) pour modifier le contenu de externalHTML ;

Il convient de noter que l'attr de jQuery ne peut pas obtenir la valeur de cet attribut.

Recommandations associées :

Tutoriel js

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!