La différence entre les attributs attr et prop dans JS et une introduction aux exemples de sélection de priorité_Connaissances de base

Par rapport à attr, prop est nouveau dans la version 1.6.1. Les deux sont compris dans le sens chinois, et ce sont tous deux des méthodes pour obtenir/définir des attributs (attributs et propriétés). Cependant, la méthode .attr() utilisée dans une fenêtre ou un document ne peut pas s'exécuter correctement avant jQuery 1.6, car il ne peut pas y avoir d'attributs dans une fenêtre ou un document. accessoire est né.

Puisque nous voulons connaître la différence entre eux, il est préférable de regarder leur code source. Ne soyez pas effrayé par la longueur du code. Regardons simplement quelques phrases clés :
.

attr: function( elem, name, value, pass ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set attributes on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { 
return jQuery( elem )[ name ]( value ); 
} 
// Fallback to prop when attributes are not supported 
if ( typeof elem.getAttribute === "undefined" ) { 
return jQuery.prop( elem, name, value ); 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
// All attributes are lowercase 
// Grab necessary hook if one is defined 
if ( notxml ) { 
name = name.toLowerCase(); 
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); 
} 
if ( value !== undefined ) { 
if ( value === null ) { 
jQuery.removeAttr( elem, name ); 
return; 
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
elem.setAttribute( name, value + "" ); 
return value; 
} 
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
ret = elem.getAttribute( name ); 
// Non-existent attributes return null, we normalize to undefined 
return ret === null ? 
undefined : 
ret; 
} 
}

Code de la méthode prop (jQuery version 1.8.3)

prop: function( elem, name, value ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set properties on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
if ( notxml ) { 
// Fix name and attach hooks 
name = jQuery.propFix[ name ] || name; 
hooks = jQuery.propHooks[ name ]; 
} 
if ( value !== undefined ) { 
if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
return ( elem[ name ] = value ); 
} 
} else { 
if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
return elem[ name ]; 
} 
} 
}

Dans la méthode attr, les deux lignes de code les plus critiques sont elem.setAttribute(name, value "") et ret = elem.getAttribute(name). Il est évident que les opérations des méthodes setAttribute et getAttribute de l'API DOM sont utilisées. .nœud d'élément d'attribut.
Dans la méthode prop, les deux lignes de code les plus critiques sont return (elem[ name ] = value ) et return elem[ name ]. Vous pouvez le comprendre comme ceci : document.getElementById(el)[name] = value, qui est converti en JS Une propriété de l'objet.

Maintenant que nous avons compris le principe, regardons un exemple :

<input type="checkbox" id="test" abc="111" />

$(function(){ 
el = $("#test"); 
console.log(el.attr("style")); //undefined 
console.log(el.prop("style")); //CSSStyleDeclaration对象 
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象 
});

el.attr("style") génère un résultat indéfini, car attr est la valeur du nœud d'attribut de cet objet obtenu. De toute évidence, il n'existe pas de tel nœud d'attribut pour le moment, il génère donc naturellement un résultat indéfini
. el.prop("style") génère un objet CSSStyleDeclaration Pour un objet DOM, il a des attributs d'objet de style natifs, donc l'objet de style
est généré. Quant à document.getElementById("test").style est le même que celui ci-dessus

Continuer à lire :

el.attr("abc","111") 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //undefined

Tout d'abord, utilisez la méthode attr pour ajouter l'attribut de nœud abc à cet objet, avec une valeur de 111. Vous pouvez voir que la structure du html a également changé

Le résultat de sortie de el.attr("abc") est 111, ce qui est normal
el.prop("abc") génère un résultat indéfini, car abc est dans ce nœud d'attribut, il ne peut donc pas être obtenu via prop

el.prop("abc", "222"); 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //222

Nous utilisons ensuite la méthode prop pour définir l'attribut abc de cet objet, avec une valeur de 222. Vous pouvez voir que la structure du html n'a pas changé. Les résultats de sortie ne sont pas expliqués.

Le principe a été clairement expliqué ci-dessus, vous pouvez décider vous-même quand l'utiliser.

Mentionnez que lorsque vous souhaitez obtenir ou définir des propriétés telles que cochée, sélectionnée, lecture seule et désactivée, il est évidemment préférable d'utiliser la méthode prop, telle que la suivante :

<input type="checkbox" id="test" checked="checked" />

console.log(el.attr("checked")); //checked 
console.log(el.prop("checked")); //true 
console.log(el.attr("disabled")); //undefined 
console.log(el.prop("disabled")); //false

Évidemment, les valeurs booléennes rendent le traitement suivant plus raisonnable que les valeurs de chaîne.

PS, si vous êtes obsédé par les performances JS, les performances de prop sont évidemment plus élevées, car attr doit accéder au nœud d'attribut DOM, et l'accès au DOM prend le plus de temps. Cette situation s'applique aux situations de sélection totale et de sélection inverse à options multiples.

Tout le monde sait que certains navigateurs n'ont besoin que d'écrire désactivé et vérifié, tandis que d'autres doivent écrire désactivé = "disabled", vérifié="checked", comme lors de l'utilisation de attr("checked") pour obtenir l'attribut vérifié de la case à cocher. La valeur peut être obtenue lorsqu'elle est sélectionnée. La valeur est "cochée" mais la valeur obtenue lorsqu'elle n'est pas sélectionnée est indéfinie.

jq fournit une nouvelle méthode "prop" pour obtenir ces attributs afin de résoudre ce problème. Dans le passé, lorsque nous utilisions attr pour obtenir l'attribut vérifié, nous renvoyions "checked" et "". méthode pour obtenir l’attribut, nous renvoyons uniformément vrai et faux.

Alors, quand utiliser attr() et quand utiliser prop() ?
1. Ajoutez le nom de l'attribut et l'attribut prendra effet. Vous devez utiliser prop();
. 2. Il existe deux attributs, vrai et faux, utilisant prop();
3. Pour les autres, utilisez attr();
Tout le monde devrait y prêter attention lors de la mise à niveau de jquery dans le projet !

Ce qui suit sont les recommandations officielles pour l'utilisation de attr() et prop() :

Ce qui suit sont les recommandations officielles pour l'utilisation de attr() et prop() :