En comparación con ATTR, Prop es nuevo en 1.6.1. Ambos se entienden por el significado chino y son métodos para obtener/establecer atributos (atributos y propiedades). Es solo que usar el método .Attr () en la ventana o el documento no puede ejecutarse normalmente antes de jQuery 1.6 porque no puede haber atributos en la ventana y el documento. El apoyo surgió.
Como queremos saber la diferencia entre ellos, es mejor mirar su código fuente y no tener miedo por la longitud del código. Veamos solo las oraciones clave:
attr: function (elem, nombre, valor, pase) {var retit, ganchs, notXml, ntype = elem.nodeType; // No obtenga/establece atributos en el texto, comenta y nodos de atributo if (! Elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jQuery.Isfunction (jquery.fn [name])) {return jQuery (elem) [name] (valor); } // Fallback to Prop cuando los atributos no son compatibles si (typeof elem.getAttribute === "Undefined") {return jQuery.prop (elem, nombre, valor); } NotXml = ntype! == 1 || ! jQuery.isxmldoc (Elem); // Todos los atributos son en minúsculas // agarrar el gancho necesario si uno se define si (notXml) {name = name.tolowercase (); Hooks = jQuery.Attrhooks [nombre] || (rboolean.test (nombre)? boolhook: nodehook); } if (valor! == undefined) {if (value === null) {jQuery.removeattr (elem, name); devolver; } else if (gooks && "set" en gooks && notxml && (ret = gooks.set (elem, valor, nombre))! == Undefined) {return return; } else {elem.setAttribute (nombre, valor + ""); valor de retorno; }} else if (gooks && "get" en gooks && notXml && (ret = gooks.get (elem, name))! == null) {return ret; } else {ret = elem.getAttribute (nombre); // Los atributos inexistentes return NULL, nos normalizamos al retorno indefinado ret === nulo? Undefinado: Ret; }}Código de método de proporción (JQuery versión 1.8.3)
Prop: function (elem, nombre, valor) {var retit, ganchs, notXml, ntype = elem.nodeType; // No obtenga/configure las propiedades en el texto, los nodos de comentarios y atributos si (! Elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } NotXml = ntype! == 1 || ! jQuery.isxmldoc (Elem); if (notXml) {// corrige el nombre y adjunte name de ganchos = jQuery.propfix [nombre] || nombre; Hooks = jQuery.prophooks [nombre]; } if (value! == Undefined) {if (Hooks && "Set" en Hooks && (ret = Hooks.set (elem, value, nombre))! == Undefined) {return ret; } else {return (elem [name] = valor); }} else {if (Hooks && "Get" en Hooks && (ret = Hooks.get (elem, name))! == null) {return ret; } else {return elem [nombre]; }}}En el método ATTR, las dos líneas de código más críticas, Elem.SetAttribute (nombre, valor + "") y ret = Elem.getAttribute (nombre), es obvio que los métodos DOM API SetAttribute y GetAttribute operados por los nodos de elementos de atributo.
En el método PROP, las dos líneas de código más críticas, return (elem [name] = value) y return Elem [name], puede entenderlo como document.getElementById (el) [nombre] = valor, que es una propiedad convertida en un objeto JS.
Como entendemos el principio, echemos un vistazo a un ejemplo:
<input type = "checkbox" id = "test" abc = "111" />
$ (function () {el = $ ("#test"); console.log (el.attr ("style")); // consolador indefinado.log (el.prop ("style")); // csssstyledEclaration Object console.log (document.getElementById ("test"). Style); // cssStyledEdlacation Object});El.Attr ("estilo") sale indefinido porque ATTR es el valor del nodo de atributo de objeto obtenido. Obviamente, no hay nodo de atributo en este momento, por lo que la salida natural está indefinida.
El.prop ("estilo") emite el objeto CSStyledEclaration. Para un objeto DOM, tiene el atributo de objeto de estilo nativo, por lo que el objeto de estilo se emite.
En cuanto a document.getElementById ("prueba"). El estilo es el mismo que el anterior
Siguiente mirada:
el.attr ("ABC", "111") console.log (el.attr ("ABC")); // 111 console.log (el.prop ("ABC")); //indefinidoPrimero, use el método ATTR para agregar el atributo del nodo ABC a este objeto, con un valor de 111, puede ver que la estructura del HTML también ha cambiado.
El.attr ("ABC") la salida es 111, que es normal
El.prop ("ABC") salida indefinida, porque ABC está en este nodo de propiedad, por lo que no se puede recuperar a través de Prop.
el.prop ("ABC", "222"); console.log (el.attr ("ABC")); // 111 console.log (el.prop ("ABC")); // 222Luego establecemos el atributo ABC para este objeto utilizando el método de Prop, con un valor de 222. Puede ver que la estructura del HTML no ha cambiado. Los resultados de la salida no se explicarán.
Lo anterior ha explicado claramente el principio, y puede comprender lo que usa usted mismo.
Se menciona que cuando se encuentra con propiedades, como verificadas, seleccionadas, lecturas y deshabilitadas, obviamente es mejor usar el método de PROP, como el siguiente:
<input type = "checkbox" id = "test" checked = "checked" />
console.log (el.attr ("checked")); // verificado console.log (el.prop ("checked")); // verdadero console.log (el.attr ("discapacitado")); // console undefinado.log (el.prop ("discapacitado")); //FALSOObviamente, el valor booleano hace que el siguiente procesamiento sea más razonable que el valor de la cadena.
PD. Si tiene la limpieza de rendimiento de JS, obviamente el rendimiento de PROP es mayor, porque ATTR necesita acceder a los nodos de atributos DOM, acceder a DOM es el más lento. Esta situación se aplica a múltiples opciones y escenarios no seleccionados.
Todos saben que algunos navegadores solo necesitan escribir discapacitados y verificados, mientras que otros necesitan escribir discapacitados = "discapacitado", checked = "verificado". Por ejemplo, cuando se usa ATTR ("marcado") para obtener la propiedad marcada de una casilla de verificación, puede obtener el valor cuando lo selecciona. El valor se "verifica", pero si no lo selecciona, no está definido.
JQ proporciona un nuevo método "accesorio" para obtener estas propiedades, que es resolver este problema. En el pasado, utilizamos ATTR para obtener la propiedad verificada y devuelto "Comprobado" y "", pero ahora usamos el método de PROP para obtener las propiedades y devolver verdaderas y falsas.
Entonces, ¿cuándo usar attr () y cuándo usar prop ()?
1. Agregue el nombre del atributo. Este atributo entrará en vigencia. Debe usar prop ();
2. Hay dos propiedades que tienen un uso verdadero y falso prop ();
3. Use attr () para otros;
¡Todos deberían prestar atención a esto al actualizar jQuery en el proyecto!
Las siguientes son las sugerencias oficiales para el uso de attr () y prop ()::
Las siguientes son las sugerencias oficiales para el uso de attr () y prop ()::