.prop () vs .attr ()

Entonces jQuery 1.6 tiene la nueva función prop().

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

o en este caso, ¿hacen lo mismo?

Y si no debe de cambiar a usar prop(), todas las viejas attr()llamadas se romperá si me cambio a 1.6?

ACTUALIZAR

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(vea también este violín: http://jsfiddle.net/maniator/JpUF2/ )

La consola registra el getAttributecomo una cadena y el attrcomo una cadena, pero el propcomo un CSSStyleDeclaration, ¿Por qué? ¿Y cómo afecta eso a mi codificación en el futuro?

Actualización 1 de noviembre de 2012

Mi respuesta original se aplica específicamente a jQuery 1.6. Mi consejo sigue siendo el mismo, pero jQuery 1.6.1 cambió un poco las cosas: frente a la pila de sitios web dañados, el equipo de jQuery volvió attr()a algo cercano (pero no exactamente igual) a su antiguo comportamiento para los atributos booleanos . John Resig también escribió en su blog al respecto . Puedo ver la dificultad en la que estaban pero aún no estoy de acuerdo con su recomendación de preferir attr().

Respuesta original

Si solo ha usado jQuery y no el DOM directamente, esto podría ser un cambio confuso, aunque definitivamente es una mejora conceptual. Sin embargo, no es tan bueno para los miles de millones de sitios que usan jQuery que se romperán como resultado de este cambio.

Resumiré los principales problemas:

• Usualmente quieres prop()más que attr().
• En la mayoría de los casos, prop()hace lo que attr()solía hacer. Reemplazar llamadas attr()con prop()en su código generalmente funcionará.
• Las propiedades son generalmente más simples de tratar que los atributos. Un valor de atributo solo puede ser una cadena, mientras que una propiedad puede ser de cualquier tipo. Por ejemplo, la checkedpropiedad es un booleano, la stylepropiedad es un objeto con propiedades individuales para cada estilo, la sizepropiedad es un número.
• Cuando existe una propiedad y un atributo con el mismo nombre, generalmente actualizar uno actualizará el otro, pero este no es el caso para ciertos atributos de entradas, como valuey checked: para estos atributos, la propiedad siempre representa el estado actual mientras que el El atributo (excepto en versiones anteriores de IE) corresponde al valor predeterminado / verificación de la entrada (reflejado en la propiedad defaultValue/ defaultChecked).
• Este cambio elimina parte de la capa de magia jQuery atrapada frente a atributos y propiedades, lo que significa que los desarrolladores de jQuery tendrán que aprender un poco sobre la diferencia entre propiedades y atributos. Ésto es una cosa buena.

Si usted es un desarrollador de jQuery y está confundido por todo este negocio acerca de las propiedades y los atributos, debe dar un paso atrás y aprender un poco al respecto, ya que jQuery ya no está tratando tan duro de protegerlo de estas cosas. Para la palabra autorizada pero algo seca sobre el tema, están las especificaciones: DOM4 , HTML DOM , DOM Nivel 2 , DOM Nivel 3 . La documentación DOM de Mozilla es válida para la mayoría de los navegadores modernos y es más fácil de leer que las especificaciones, por lo que puede encontrar útil su referencia DOM . Hay una sección sobre propiedades de elementos .

Como un ejemplo de cómo las propiedades son más fáciles de manejar que los atributos, considere una casilla de verificación que está marcada inicialmente. Aquí hay dos posibles piezas de HTML válido para hacer esto:

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

Entonces, ¿cómo saber si la casilla de verificación está marcada con jQuery? Mire en Stack Overflow y comúnmente encontrará las siguientes sugerencias:

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

En realidad, esto es lo más simple que se puede hacer en el mundo con la checkedpropiedad booleana, que ha existido y funcionó perfectamente en todos los principales navegadores programables desde 1995:

if (document.getElementById("cb").checked) {...}

La propiedad también hace que marcar o desmarcar la casilla sea trivial:

document.getElementById("cb").checked = false

En jQuery 1.6, esto se convierte inequívocamente

$("#cb").prop("checked", false)

La idea de usar el checkedatributo para escribir una casilla de verificación es inútil e innecesario. La propiedad es lo que necesitas.

• No es obvio cuál es la forma correcta de marcar o desmarcar la casilla de verificación utilizando el checkedatributo
• El valor del atributo refleja el estado predeterminado en lugar del estado visible actual (excepto en algunas versiones anteriores de IE, lo que dificulta aún más las cosas). El atributo no le dice nada sobre si la casilla de verificación en la página está marcada. Ver http://jsfiddle.net/VktA6/49/ .

Creo que Tim lo dijo bastante bien , pero retrocedamos:

Un elemento DOM es un objeto, una cosa en la memoria. Como la mayoría de los objetos en OOP, tiene propiedades . También, por separado, tiene un mapa de los atributos definidos en el elemento (generalmente proviene del marcado que el navegador leyó para crear el elemento). Algunas de las propiedades del elemento obtienen sus valores iniciales de atributos con el mismo nombre o nombres similares ( valueobtiene su valor inicial del atributo "valor"; hrefobtiene su valor inicial del atributo "href", pero no es exactamente el mismo valor; classNamedel atributo "clase"). Otras propiedades obtienen sus valores iniciales de otras maneras: por ejemplo, la parentNodepropiedad obtiene su valor en función de cuál es su elemento padre;style propiedad, tenga o no un atributo "estilo".

Consideremos este ancla en una página en http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Un poco de arte ASCII gratuito (y dejando de lado muchas cosas):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
El | HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
El | href: "http://example.com/foo.html" |
El | nombre: "fooAnchor" |
El | id: "fooAnchor" |
El | className: "prueba uno" |
El | atributos: |
El | href: "foo.html" |
El | nombre: "fooAnchor" |
El | id: "fooAnchor" |
El | clase: "prueba uno" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +

Tenga en cuenta que las propiedades y los atributos son distintos.

Ahora, aunque son distintos, debido a que todo esto evolucionó en lugar de ser diseñado desde cero, una serie de propiedades reescriben el atributo derivado si las configura. Pero no todos lo hacen, y como puede ver desde hrefarriba, el mapeo no siempre es un simple "pasar el valor", a veces hay interpretación involucrada.

Cuando hablo de propiedades como propiedades de un objeto, no estoy hablando en abstracto. Aquí hay un código que no es jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(Esos valores son según la mayoría de los navegadores; hay alguna variación).

El linkobjeto es algo real, y puede ver que hay una distinción real entre acceder a una propiedad y acceder a un atributo .

Como dijo Tim, la gran mayoría de las veces, queremos trabajar con propiedades. Esto se debe en parte a que sus valores (incluso sus nombres) tienden a ser más consistentes en todos los navegadores. Principalmente solo queremos trabajar con atributos cuando no hay ninguna propiedad relacionada con él (atributos personalizados), o cuando sabemos que para ese atributo en particular, el atributo y la propiedad no son 1: 1 (como con hrefy "href" arriba) .

Las propiedades estándar se presentan en las diversas especificaciones DOM:

• DOM2 HTML (en gran medida obsoleto, consulte las especificaciones HTML en su lugar)
• DOM2 Core (obsoleto)
• DOM3 Core (obsoleto)
• DOM4

Estas especificaciones tienen índices excelentes y recomiendo tener a mano los enlaces; Los utilizo todo el tiempo.

Los atributos personalizados incluirían, por ejemplo, cualquier data-xyzatributo que pueda poner en elementos para proporcionar metadatos a su código (ahora que es válido a partir de HTML5, siempre y cuando se adhiera al data-prefijo). (Las versiones recientes de jQuery le dan acceso a data-xyzelementos a través de la datafunción, pero esa función no es solo un descriptor de acceso a los data-xyzatributos [hace más y menos que eso]; a menos que realmente necesite sus características, usaría la attrfunción para interactuar con data-xyzatributo)

La attrfunción solía tener una lógica complicada para obtener lo que pensaban que querías, en lugar de obtener literalmente el atributo. Combinó los conceptos. Mudarse a propy attrestaba destinado a desinflarlos. Brevemente en v1.6.0 jQuery fue demasiado lejos en ese sentido, pero la funcionalidad se añadió rápidamente volver a attrmanejar las situaciones comunes donde la gente utiliza attrcuando técnicamente se deben utilizar prop.

Este cambio ha tardado mucho en llegar a jQuery. Durante años, se han contentado con una función llamada attr()que recuperó principalmente las propiedades DOM, no el resultado que esperarías del nombre. La segregación de attr()y prop()debería ayudar a aliviar parte de la confusión entre los atributos HTML y las propiedades DOM. $.fn.prop()toma la propiedad DOM especificada, mientras que $.fn.attr()toma el atributo HTML especificado.

Para comprender completamente cómo funcionan, aquí hay una explicación extendida sobre la diferencia entre los atributos HTML y las propiedades DOM .:

Atributos HTML

Sintaxis:

<body onload="foo()">

Propósito: Permite que el marcado tenga datos asociados con él para eventos, renderización y otros fines.

Visualización: el atributo de clase se muestra aquí en el cuerpo. Es accesible a través del siguiente código:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Los atributos se devuelven en forma de cadena y pueden ser inconsistentes de un navegador a otro. Sin embargo, pueden ser vitales en algunas situaciones. Como se ejemplificó anteriormente, IE 8 Quirks Mode (y a continuación) espera el nombre de una propiedad DOM en get / set / removeAttribute en lugar del nombre del atributo. Esta es una de las muchas razones por las que es importante saber la diferencia.

Propiedades DOM

Sintaxis:

document.body.onload = foo;

Propósito: Da acceso a propiedades que pertenecen a nodos de elementos. Estas propiedades son similares a los atributos, pero solo son accesibles a través de JavaScript. Esta es una diferencia importante que ayuda a aclarar el papel de las propiedades DOM. Tenga en cuenta que los atributos son completamente diferentes de las propiedades , ya que esta asignación de controlador de eventos es inútil y no recibirá el evento (el cuerpo no tiene un evento de carga, solo un atributo de carga).

Visualización:

Aquí, verá una lista de propiedades en la pestaña "DOM" en Firebug. Estas son propiedades DOM. Inmediatamente notará algunos de ellos, ya que los habrá usado antes sin saberlo. Sus valores son los que recibirá a través de JavaScript.

Documentación

• JavaScript: la guía definitiva de David Flanagan
• Atributos HTML, Centro de desarrollo de Mozilla
• Propiedades del elemento DOM, Centro de desarrollo de Mozilla

Ejemplo

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

En versiones anteriores de jQuery, esto devuelve una cadena vacía. En 1.6, devuelve el valor apropiado, foo.

Sin haber visto el nuevo código para ninguna de las funciones, puedo decir con confianza que la confusión tiene más que ver con la diferencia entre los atributos HTML y las propiedades DOM, que con el código en sí. Con suerte, esto te aclaró algunas cosas.

-Mate

Una propiedad está en el DOM; un atributo está en el HTML que se analiza en el DOM.

Más detalles

Si cambia un atributo, el cambio se reflejará en el DOM (a veces con un nombre diferente).

Ejemplo: Cambiar el classatributo de una etiqueta cambiará la classNamepropiedad de esa etiqueta en el DOM. Si no tiene ningún atributo en una etiqueta, aún tiene la propiedad DOM correspondiente con un valor vacío o predeterminado.

Ejemplo: Si bien su etiqueta no tiene classatributo, la propiedad DOM classNameexiste con un valor de cadena vacío.

editar

Si cambia el uno, el otro será cambiado por un controlador, y viceversa. Este controlador no está en jQuery, sino en el código nativo del navegador.

Es solo la distinción entre los atributos HTML y los objetos DOM lo que causa confusión. Para aquellos que se sienten cómodos actuando sobre los elementos DOM, las propiedades nativas como this.src this.value this.checkedetc. .propes una cálida bienvenida a la familia. Para otros, es solo una capa adicional de confusión. Vamos a aclarar eso.

La forma más fácil de ver la diferencia entre .attry .propes el siguiente ejemplo:

<input blah="hello">

1. $('input').attr('blah'): vuelve 'hello'como se esperaba. No hay sorpresas aquí.
2. $('input').prop('blah'): devuelve undefined, porque está intentando hacerlo [HTMLInputElement].blah, y no existe tal propiedad en ese objeto DOM. Solo existe en el alcance como un atributo de ese elemento, es decir[HTMLInputElement].getAttribute('blah')

Ahora cambiamos algunas cosas así:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah'): vuelve 'apple'eh? ¿Por qué no "pera", ya que esto se estableció en último lugar en ese elemento. Debido a que la propiedad se modificó en el atributo de entrada, no en el elemento de entrada DOM en sí mismo, básicamente funcionan casi independientemente el uno del otro.
2. $('input').prop('blah'): devoluciones 'pear'

Lo que realmente debe tener cuidado es simplemente no mezclar el uso de estos para la misma propiedad en toda su aplicación por la razón anterior.

Vea un violín que demuestra la diferencia: http://jsfiddle.net/garreh/uLQXc/

.attrvs .prop:

Ronda 1: estilo

<input style="font:arial;"/>

• .attr('style') - devuelve estilos en línea para el elemento coincidente, es decir "font:arial;"
• .prop('style') - devuelve un objeto de declaración de estilo, es decir CSSStyleDeclaration

Ronda 2: valor

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')- devuelve 'hello'*
• .prop('value') -- devoluciones 'i changed the value'

* Nota: jQuery por este motivo tiene un .val()método, que internamente es equivalente a.prop('value')

TL; DR

Utilizar prop()más attr()en la mayoría de los casos.

Una propiedad es el estado actual del elemento de entrada. Un atributo es el valor predeterminado.

Una propiedad puede contener cosas de diferentes tipos. Un atributo solo puede contener cadenas

Control sucio

Este concepto proporciona un ejemplo donde la diferencia es observable: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Pruébalo:

• clic en el botón. Ambas casillas de verificación se marcaron.
• desmarque ambas casillas de verificación.
• haz clic en el botón nuevamente. Solo propse marcó la casilla de verificación. ¡EXPLOSIÓN!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Para algunos atributos como disabledon button, agregar o eliminar el atributo de contenido disabled="disabled"siempre alterna la propiedad (llamada atributo IDL en HTML5) porque http://www.w3.org/TR/html5/forms.html#attr-fe-disabled dice:

El atributo IDL deshabilitado debe reflejar el atributo de contenido deshabilitado.

por lo que puede salirse con la suya, aunque es feo ya que modifica HTML sin necesidad.

Para otros atributos como checked="checked"on input type="checkbox", las cosas se rompen, porque una vez que haces clic en él, se ensucia y luego agregar o quitar el checked="checked"atributo de contenido ya no alterna la verificación .

Esta es la razón por la que debe usar principalmente .prop, ya que afecta la propiedad efectiva directamente, en lugar de depender de los efectos secundarios complejos de modificar el HTML.

Todo está en el documento :

La diferencia entre atributos y propiedades puede ser importante en situaciones específicas. Antes de jQuery 1.6, el método .attr () a veces tomaba en cuenta los valores de propiedad al recuperar algunos atributos, lo que podría causar un comportamiento inconsistente. A partir de jQuery 1.6, el método .prop () proporciona una forma de recuperar explícitamente los valores de propiedad, mientras que .attr () recupera atributos.

¡Así que usa utilería!

los atributos están en su documento / archivo de texto HTML (== imagine que este es el resultado de su marcado html analizado), mientras que las
propiedades están en el árbol HTML DOM (== básicamente una propiedad real de algún objeto en sentido JS).

Es importante destacar que muchos de ellos están sincronizados (si actualiza la classpropiedad, el classatributo en html también se actualizará; y de lo contrario). Pero algunos atributos pueden sincronizarse con propiedades inesperadas, por ejemplo, el atributo checked corresponde a la propiedad defaultChecked , de modo que

• marcar manualmente una casilla de verificación cambiará el .prop('checked')valor, pero no cambiará .attr('checked')y los .prop('defaultChecked')valores
• la configuración $('#input').prop('defaultChecked', true)también cambiará .attr('checked'), pero esto no será visible en un elemento.

La regla general es : el .prop()método debe usarse para atributos / propiedades booleanas y para propiedades que no existen en html (como window.location). Todos los demás atributos (los que puede ver en el html) pueden y deben seguir siendo manipulados con el .attr() método. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

Y aquí hay una tabla que muestra dónde .prop()se prefiere (aunque .attr()todavía se puede usar).

¿Por qué a veces querrías usar .prop () en lugar de .attr () donde este último se aconseja oficialmente?

1. .prop()puede devolver cualquier tipo: cadena, entero, booleano; while .attr()siempre devuelve una cadena.
2. .prop()se dice que es aproximadamente 2.5 veces más rápido que .attr().

.attr():

• Obtenga el valor de un atributo para el primer elemento del conjunto de elementos coincidentes.
• Le da el valor del elemento como se definió en el html en la carga de la página

.prop():

• Obtenga el valor de una propiedad para el primer elemento del conjunto de elementos coincidentes.
• Da los valores actualizados de los elementos que se modifican a través de javascript / jquery

Por lo general, querrás usar propiedades. Use atributos solo para:

1. Obtener un atributo HTML personalizado (ya que no está sincronizado con una propiedad DOM).
2. Obtener un atributo HTML que no se sincroniza con una propiedad DOM, por ejemplo, obtener el "valor original" de un atributo HTML estándar, como <input value="abc">.

attributes -> HTML

properties -> DOM

Antes de jQuery 1.6, el attr()método a veces tomaba en cuenta los valores de las propiedades al recuperar los atributos, lo que causaba un comportamiento bastante inconsistente.

La introducción del prop()método proporciona una forma de recuperar explícitamente los valores de propiedad, mientras .attr()recupera los atributos.

Los documentos:

jQuery.attr() Obtenga el valor de un atributo para el primer elemento del conjunto de elementos coincidentes.

jQuery.prop() Obtenga el valor de una propiedad para el primer elemento del conjunto de elementos coincidentes.

Recordatorio suave sobre el uso prop(), por ejemplo:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

La función anterior se usa para verificar si checkbox1 está marcado o no, si está marcado: return 1; si no: devuelve 0. La función prop () se usa aquí como una función GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

La función anterior se usa para configurar la casilla de verificación 1 para que se marque y SIEMPRE devuelva 1. Ahora la función prop () se usa como una función SET.

No te equivoques.

P / S: cuando reviso la propiedad Image src . Si el src está vacío, prop devuelve la URL actual de la página (incorrecto) y attr devuelve una cadena vacía (derecha).

Una cosa .attr()puede hacer que .prop()no puede: afectar a los selectores CSS

Aquí hay un problema que no vi en las otras respuestas.

Selector de CSS [name=value]

• responderá a .attr('name', 'value')
• pero no siempre a .prop('name', 'value')

.prop() afecta solo unos pocos selectores de atributos

• input[name] (gracias @TimDown )

.attr() afecta a todos los selectores de atributos

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute](ninguno .data('custom-attribute')afectará a este selector)

1) Una propiedad está en el DOM; un atributo está en el HTML que se analiza en el DOM.

2) $ (elem) .attr ("marcado") (1.6.1+) "marcado" (Cadena) Cambiará con el estado de la casilla de verificación

3) $ (elem) .attr ("marcado") (anterior a 1.6) verdadero (booleano) Cambiado con el estado de la casilla de verificación

• Principalmente queremos usar para objetos DOM en lugar de atributos personalizados como data-img, data-xyz.

• También algunas de las diferencias al acceder al checkboxvalor y href con attr()y prop()como la cosa cambia con la salida DOM con prop()el enlace completo desde originy el Booleanvalor para la casilla de verificación (pre-1.6)

• Solo podemos acceder a elementos DOM con propotros, entonces nos daundefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

Hay algunas consideraciones más en prop () vs attr ():

• selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked y defaultSelected..etc deben recuperarse y establecerse con el método .prop (). Estos no tienen los atributos correspondientes y son solo propiedades.

• Para el tipo de entrada casilla de verificación

     .attr('checked') //returns  checked
     .prop('checked') //returns  true
     .is(':checked') //returns true

• El método prop devuelve un valor booleano para marcado, seleccionado, deshabilitado, readOnly..etc, mientras que attr devuelve una cadena definida. Por lo tanto, puede usar directamente .prop ('marcado') en condición if.

• .attr () llama a .prop () internamente, por lo que el método .attr () será un poco más lento que acceder a ellos directamente a través de .prop ().

La respuesta de Gary Hole es muy relevante para resolver el problema si el código está escrito de tal manera

obj.prop("style","border:1px red solid;")

Dado que la función prop devuelve el CSSStyleDeclarationobjeto, el código anterior no funcionará correctamente en algunos navegadores (probado IE8 with Chrome Frame Pluginen mi caso).

Cambiándolo así al siguiente código

obj.prop("style").cssText = "border:1px red solid;"

resuelve el problema.