remove - ¿Por qué el método jQuery 1.9+ attr() no está en desuso?
remove class jquery (4)
¿Puedo, un desarrollador de software jQuery1.9 +, "desaprobar" el uso del método attr()
en mi trabajo diario?
Como se muestra en muchas preguntas,
- .prop () vs .attr () (main)
- jQuery attr vs prop, hay una lista de accesorios?
- jQuery attr vs prop?
- Migración de jQuery 1.8.3 a 1.9.0 - Reemplazo de .attr () en desuso
- ... etc.
hay mucha confusión acerca de "usar attr o use prop?" y, según mi punto de vista (del desarrollador), para todos los usos del método attr()
, podemos usar prop
:
- Compatibilidad con versiones anteriores : la codificación del nuevo software no necesita esto;
- rendimiento : John dice "El acceso a las propiedades a través del método .attr () será un poco más lento que el acceso a ellas directamente a través de .prop ()";
- Cambiar valor de atributo : todo se puede cambiar mediante el método
prop(name,newvalue)
. - Eliminar atributo : todo se puede eliminar con el
removeProp(name)
. - Compruebe los valores de los atributos de HTML : el navegador utiliza DOM, todo el HTML se convirtió a DOM y, si DOM afectó el método
attr(name)
, también se vio afectado. Acerca del "tipo fuerte" de prop: es mejor que "valor de cadena html" (por ejemplo, "verificado" vs verdadero ). - Compruebe si se definió un atributo en el "código HTML original" (suponiendo que el método
attr
en su navegador devuelva indefinido si no lo está) ... Bueno, ¿necesitamos esto en algún software? En formularios , el método ".val () es la forma jQuery recomendada para obtener o establecer los valores de formulario" - Coherencia entre navegadores : ambos (no solo attr) son métodos consistentes. (¿¿es??).
Entonces, en este momento (2013), no veo una buena razón para usar el método attr
al desarrollar un nuevo código jQuery ... Pero, bueno, esta es, en otras palabras, la pregunta: hay una buena razón para usar el método attr
¿En mis tareas diarias?
.attr () solo accede a los atributos HTML, mientras que .prop () recuperará las propiedades que no se encuentran en los elementos HTML. Vea la documentación:
Por ejemplo, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked y defaultSelected deben recuperarse y configurarse con el método .prop (). Antes de jQuery 1.6, estas propiedades eran recuperables con el método .attr (), pero esto no estaba dentro del alcance de attr. Estos no tienen atributos correspondientes y son solo propiedades.
Me tomé la libertad de preparar un violín para ti:
Especialmente esta parte:
<div id="example" style="padding:10px"></div>
console.log("style");
var styleAttr = $("#example").attr("style");
console.log(styleAttr); // You get "padding:10px"
var styleProp = $("#example").prop("style");
console.log(styleProp); // You get a CSSStyleDeclaration object
El ejemplo de "estilo" muestra claramente que un atributo no es lo mismo que una propiedad (verifique la consola).
Para facilitar la lectura, la capacidad de mantenimiento y la compatibilidad con versiones anteriores (así como la compatibilidad con versiones anteriores), siempre debe utilizar los métodos correctos para una tarea determinada; de lo contrario, existe la posibilidad de que un método deje de comportarse como lo cree, el método .attr () es un ejemplo de eso
El método .attr () se usa para obtener los atributos de los elementos, los atributos son un término SGML que se refiere a la información contenida en las etiquetas de los elementos, puede leer esa información fácilmente inspeccionando los elementos.
- Si obtiene el atributo de "estilo" de un elemento, no obtendrá ninguna otra información que no esté específicamente escrita en ese atributo.
- Si obtiene el atributo "marcado" de una casilla de verificación, aparecerá "marcado" o "".
El método .prop () se usa para obtener las propiedades DOM de los elementos.
- Si obtiene la propiedad "estilo" no está obteniendo lo que el diseñador escribió en el atributo de estilo, está obteniendo todas las propiedades css reales del elemento.
- Si obtiene la propiedad "marcada" de una casilla de verificación, obtendrá verdadero o falso.
Mi tarea ... Después de leer las buenas explicaciones de @cHao y @cernunnos, y después de algunos meses de usarla ... Creo que necesitamos otro concepto para decidir, como programador, cuándo usar o no apunta y attr:
Código fuente HTML y su representación: el navegador carga una página HTML en el espacio de memoria del navegador. Bueno, lo que permanece en el navegador de la memoria es la representación DOM, pero DOM conserva algunas cosas originales, como atributos y propiedad cssText , que son "representaciones a veces persistentes".
PS: los atributos que no están definidos en el "DOM estándar", no tienen una asignación a las propiedades del DOM . Cuando un atributo (no de solo lectura) cambia, si hay una propiedad correspondiente (asignada), se puede cambiar automáticamente.Estado DOM : las páginas dinámicas necesitan cambios directamente en el DOM, eso es lo que ven los usuarios finales. Entonces, si hay algunas acciones de "hacer clic y cambiar" en la página, cada vez que el DOM va a una nueva representación de la página, entonces, cada vez que el DOM tiene un nuevo state .
Cuando una propiedad DOM cambia, todas las demás propiedades DOM (si es necesario) cambian constantemente.
Con estos conceptos en mente, podemos dibujar una " regla general (para usos attr
vs prop
)":
- Use
prop
, tiene un 90% de posibilidades de que funcione ... 99% si usa jQuery para cambiar los estados DOM (y la hipótesis DOM estándar ). - Si necesita cambiar o acceder a los atributos de
data-*
, use el método.data()
. - De lo contrario (cosas que no sean de DOM, no de datos o no estándar) verifique si es un caso de uso
.attr()
, y reserve algo de tiempo para estudiarlo (consulte las respuestas anteriores).
.attr()
no está en desuso porque es útil para lo que fue creado , y es la única manera correcta de hacer lo que fue hecho (a getAttribute
de getAttribute
función getAttribute
cada elemento, que hace lo mismo ... o analizar el HTML usted mismo) ). La única razón por la que incluso estamos teniendo esta discusión es porque jQuery (y algunos navegadores antiguos ( tos, tos, IE)) combinaron incorrectamente atributos y propiedades, y ese embrollo es lo que aparentemente solucionaron en 1.9.
.attr()
recupera atributos , mientras que .prop()
recupera propiedades . Las dos son cosas diferentes, y siempre han sido oficialmente (aunque el DOM a menudo tiene una propiedad que corresponde a un atributo). Si tiene un <p whatever="value">
, donde whatever
que no sea un atributo que reconozca el navegador, usará .attr()
para obtener el valor del atributo. .prop()
ni siquiera podría verlo en la mayoría de los navegadores.
Cuando te preocupa la propiedad DOM resultante, usa .prop()
. Cuando te importa el atributo HTML real, usa .attr()
. No es realmente una cosa de uno u otro; puede usar ambos en el mismo código y el universo no implosionará ni una sola vez (suponiendo que los haya usado correctamente, de todos modos). :) Solo use el que sea adecuado para el trabajo que está haciendo en ese momento, y deje de intentar "desaprobar" las cosas que no están dañadas.