Par rapport à l'attribution, Prop est nouveau en 1,6.1. Les deux sont compris à partir du sens chinois et sont des méthodes pour obtenir / définir des attributs (attributs et propriétés). C'est juste que l'utilisation de la méthode .attr () dans la fenêtre ou le document ne peut pas s'exécuter normalement avant jQuery 1.6 car il ne peut pas y avoir d'attributs dans la fenêtre et le document. L'hélice a vu le jour.
Puisque nous voulons connaître la différence entre eux, il est préférable de regarder leur code source et de ne pas être effrayé par la durée du code. Regardons uniquement les phrases clés:
att: function (elem, nom, valeur, pass) {var ret, hooks, notxml, ntype = elem.NodeType; // Ne pas obtenir / définir des attributs sur les nœuds de texte, de commentaire et d'attribut if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jQuery.isfunction (jQuery.fn [name])) {return jQuery (elem) [name] (valeur); } // Fallback à propulser lorsque les attributs ne sont pas pris en charge if (typeof elem.getAttribute === "Undefined") {return jQuery.prop (elem, nom, valeur); } notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); // Tous les attributs sont en minuscules // Grab nécessaire à crochet si l'on est défini if (notxml) {name = name.tolowercase (); Hooks = jQuery.attrhooks [nom] || (rboolean.test (nom)? boolhook: nodehook); } if (value! == Undefined) {if (value === null) {jQuery.Removeattr (elem, name); retour; } else if (hooks && "set" dans Hooks && notxml && (ret = hooks.set (elem, value, name))! == Undefined) {return return; } else {elem.setAttribute (name, valeur + ""); valeur de retour; }} else if (hooks && "get" dans hooks && notxml && (ret = hooks.get (elem, name))! == null) {return ret; } else {ret = elem.getAttribute (name); // Attributs inexistants Return Null, nous normalisons à un retour non défini ret === null? non défini: ret; }}Code de la méthode des accessoires (JQuery Version 1.8.3)
Prop: fonction (elem, nom, valeur) {var ret, hooks, notxml, ntype = elem.nodeType; // Ne obtient pas / définir des propriétés sur les nœuds de texte, de commentaire et d'attribut if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); if (notxml) {// Correction du nom et de la connexion des crochets Nom = jQuery.propFix [name] || nom; Hooks = jQuery.Prophooks [nom]; } if (valeur! == Undefined) {if (hooks && "set" dans les crochets && (re-= hooks.set (elem, value, name))! == Undefined) {return ret; } else {return (elem [name] = value); }} else {if (hooks && "get" dans hooks && (ret = hooks.get (elem, name))! == null) {return ret; } else {return elem [name]; }}}Dans la méthode ATR, les deux lignes de code les plus critiques, elem.setAttribute (nom, valeur + "") et ret = elem.getAttribute (nom), il est évident que les méthodes DOM API setAttribute et GetAttribute fonctionnaient par les nœuds d'élément d'attribut.
Dans la méthode des accessoires, les deux lignes de code les plus critiques, return (elem [name] = value) et return elem [name], vous pouvez le comprendre comme document.getElementyid (el) [name] = valeur, qui est une propriété convertie en un objet JS.
Puisque nous comprenons le principe, jetons un coup d'œil à 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").el.attr ("style") sortira non défini car l'attache est la valeur du nœud d'attribut objet obtenu. De toute évidence, il n'y a pas de nœud d'attribut pour le moment, donc la sortie naturelle n'est pas définie.
el.prop ("style") sortit l'objet CsstyledEclartation. Pour un objet DOM, il a l'attribut d'objet de style natif, donc l'objet de style est sorti.
Quant à document.getElementById ("test"). Le style est le même que celui ci-dessus
Suivant regard:
el.attr ("ABC", "111") console.log (el.attr ("ABC")); // 111 Console.log (el.prop ("ABC")); //indéfiniTout d'abord, utilisez la méthode ATR pour ajouter l'attribut ABC Node à cet objet, avec une valeur de 111, vous pouvez voir que la structure du HTML a également changé.
La sortie El.attr ("ABC") est 111, ce qui est normal
El.prop ("ABC") Sortie non définie, car ABC est dans ce nœud de propriété, il ne peut donc pas être récupéré via PROP.
el.prop ("ABC", "222"); console.log (el.attr ("ABC")); // 111 Console.log (el.prop ("ABC")); // 222Nous définissons ensuite l'attribut ABC pour cet objet en utilisant la méthode PROP, avec une valeur de 222. Vous pouvez voir que la structure du HTML n'a pas changé. Les résultats de sortie ne seront pas expliqués.
Ce qui précède a expliqué clairement le principe et vous pouvez comprendre ce que vous utilisez vous-même.
Il est mentionné que lorsque vous rencontrez des propriétés telles que vérifié, sélectionné, en lecture et désactivé, il est évidemment préférable d'utiliser la méthode des accessoires, comme les suivantes:
<input type = "checkbox" id = "test" checked = "checked" />
console.log (el.attr ("vérifié")); // Console vérifié.log (el.prop ("vérifié")); // true console.log (el.attr ("Disabled")); // Undefined Console.log (el.prop ("Disabled")); //FAUXDe toute évidence, la valeur booléenne rend le prochain traitement plus raisonnable que la valeur de la chaîne.
Ps. Si vous avez la propreté des performances JS, les performances des accessoires sont évidemment plus élevées, car ATTR doit accéder aux nœuds d'attribut Dom, l'accès à DOM est le plus long. Cette situation s'applique à plusieurs options et à des scénarios non sélectionnés.
Tout le monde sait que certains navigateurs n'ont qu'à écrire Désactivés et à vérifier, tandis que d'autres doivent écrire Disabled = "Disabled", checked = "vérifié". Par exemple, lorsque vous utilisez ARTR ("Vérifié") pour obtenir la propriété cochée d'une case à cocher, vous pouvez obtenir la valeur lorsque vous la sélectionnez. La valeur est "vérifiée" mais si vous ne le sélectionnez pas, elle n'est pas définie.
JQ fournit une nouvelle méthode "prop" pour obtenir ces propriétés, qui consiste à résoudre ce problème. Dans le passé, nous avons utilisé ARRT pour obtenir la propriété vérifiée et renvoyé "vérifié" et "", mais maintenant nous utilisons la méthode des accessoires pour obtenir les propriétés et retourner vrai et faux.
Alors, quand utiliser att () et quand utiliser Prop ()?
1. Ajoutez le nom d'attribut. Cet attribut prendra effet. Vous devez utiliser Prop ();
2. Il y a deux propriétés qui ont une usage vrai et fausse ();
3. Utilisez att () pour les autres;
Tout le monde devrait y prêter attention lors de la mise à niveau de jQuery dans le projet!
Voici les suggestions officielles pour l'utilisation d'ATR () et de Prop ():
Voici les suggestions officielles pour l'utilisation d'ATR () et de Prop ():