Quelle est la différence entre removeProp et removeAttr dans JQuery 1.6?

Un attribut d'un élément est quelque chose comme «classe». Alors que sa propriété serait 'className'.

C'est la raison de l'ajout de jQuery.prop et jQuery.propHooks dans la version 1.6, afin de faciliter le travail avec les deux.

Donc, si la propriété avait le même nom que l'attribut, vous pouvez utiliser à la fois removeProp ou removeAttr.

J'ai posé une question similaire sur le forum jQuery, j'ai obtenu cette réponse:

Oui, attr est destiné aux attributs html car ils sont strictement définis. Prop est pour les propriétés. Donc, par exemple, disons que vous avez un noeud elem avec la classe "quelque chose" (élément brut pas jQuery objet). Elem.className est la propriété, mais c'est l'endroit où réside l'attribut. La modification de l'attribut de classe modifie également la propriété automatiquement et vice versa. Actuellement, attr est dérangé et confus car il a essayé le travail des deux fonctions et il existe de nombreux bogues à cause de cela. L'introduction de jQuery.fn.prop résoudra plusieurs bloqueurs, séparera le code car il aurait dû être séparé du début, et donne aux développeurs des fonctions plus rapides pour faire ce qu'ils attendent de leur faire. Permettez-moi de faire un pourcentage pendant une seconde et de dire que, grâce à mon expérience dans l'IRC de soutien et à la lecture du code d'autre part, 95% des cas d'utilisation pour attr ne devront pas passer à l'assistance technique.

MODIFIER

Il est peut-être préférable d'utiliser jquery.attr ou jQuery.prop. Theres semble être un comportement étrange lors du réglage et de la suppression de l'attribut vérifié en utilisant les deux.

Voir ici un exemple: http://jsfiddle.net/tomgrohl/uTCJF/

Il y a un bug sur 1.6 à faire avec: http://bugs.jquery.com/ticket/9079

Le blog jQuery officiel fournit une explication très claire:

Dans la version 1.6, nous avons divisé la gestion des attributs DOM et des propriétés DOM en différentes méthodes. La nouvelle méthode .prop () définit ou obtient des propriétés sur les éléments DOM et .removeProp () supprime les propriétés. Dans le passé, jQuery n'a pas établi de ligne claire entre les propriétés et les attributs. Généralement, les attributs DOM représentent l'état de l'information DOM telle que récupérée à partir du document, tel que l'attribut de valeur dans le balisage. Les propriétés DOM représentent l'état dynamique du document; Par exemple, si l'utilisateur clique sur l'élément de saisie ci-dessus et les types def la .prop("value") est abcdef, mais le .attr("value") reste abc.

Dans la plupart des cas, le navigateur traite la valeur de l'attribut comme valeur de départ de la propriété, mais les attributs booléens tels que contrôlés ou désactivés ont une sémantique inhabituelle.

Par exemple, considérez le balisage <input type="checkbox" checked> . La présence de l'attribut vérifié signifie que la propriété DOM .checked est vraie, même si l'attribut n'a pas de valeur. Dans le code ci-dessus, la valeur d'attribut cochée est une chaîne vide (ou undefined si aucun attribut n'a été spécifié), mais la valeur de propriété contrôlée est true .

Avant jQuery 1.6, .attr("checked") renvoyé la valeur de la propriété booléenne ( true ), mais à partir de jQuery 1.6, elle renvoie la valeur réelle de l'attribut (une chaîne vide), qui ne change pas lorsque l'utilisateur clique sur la case à cocher pour Changer son état.

Il existe plusieurs alternatives pour vérifier l'état actuel d'une case à cocher. Le meilleur et le plus performant est d'utiliser directement la propriété DOM, comme dans cette this.checked dans un gestionnaire d'événements lorsque cela fait référence à l'élément qui a été cliqué. Dans le code qui utilise jQuery 1.6 ou plus récent, la nouvelle méthode $(this).prop("checked") récupère la même valeur que this.checked et est relativement rapide. Enfin, l'expression $(this).is(":checked") fonctionne pour toutes les versions de jQuery.

À l'aide de jQuery 1.6, j'essayais de cloner un élément de menu qui avait plusieurs attributs d' id , et j'ai donc fait ceci:

$('ul.menu').clone().filter('*').removeProp('id').appendTo('.sidebar');

Lorsque j'ai inspecté les éléments dans Firebug, j'ai eu beaucoup d' id="undefined" – pas ce que je voulais. Alors maintenant, j'utilise removeAttr et ça semble bien fonctionner.

$('ul.menu').clone().filter('*').removeAttr('id').appendTo('.sidebar');