.prop () frente a .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>

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

La consola registra el getAttributecomo una cadena y el attrcomo una cadena, pero propcomo un CSSStyleDeclaration, ¿Por qué? ¿Y cómo afectará 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ó las cosas ligeramente: frente a la pila predicha de sitios web rotos, el equipo de jQuery volvió attr()a algo parecido (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 conceptualmente. Sin embargo, no es tan bueno para los millones de sitios que usan jQuery que se romperán como resultado de este cambio.

Resumiré los principales problemas:

• Por lo general, desea en prop()lugar de attr().
• En la mayoría de los casos, prop()hace lo que attr()solía hacer. Reemplazar las llamadas a attr()con prop()en su código generalmente funcionará.
• Las propiedades son generalmente más sencillas 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, normalmente la actualización de uno actualizará el otro, pero este no es el caso para ciertos atributos de las entradas, como valuey checked: para estos atributos, la propiedad siempre representa el estado actual mientras que el atributo (excepto en versiones antiguas de IE) corresponde al valor predeterminado / comprobado de la entrada (reflejado en la propiedad defaultValue/ defaultChecked).
• Este cambio elimina parte de la capa mágica de jQuery atascada frente a los 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 eres un desarrollador de jQuery y estás confundido por todo este asunto sobre propiedades y atributos, debes dar un paso atrás y aprender un poco al respecto, ya que jQuery ya no está tratando de protegerte de estas cosas. Para la palabra autoritaria 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 los elementos .

Como ejemplo de cómo las propiedades son más sencillas de tratar 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 puede saber si la casilla de verificación está marcada con jQuery? Mire Stack Overflow y normalmente 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 del mundo que se puede hacer con la checkedpropiedad booleana, que ha existido y funcionado a la perfección en todos los principales navegadores con secuencias de comandos desde 1995:

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

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

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

En jQuery 1.6, esto se convierte inequívocamente en

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

La idea de usar el checkedatributo para programar una casilla de verificación es inútil e innecesaria. 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 visible predeterminado en lugar del 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. Verhttp://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 provenientes 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 formas: por ejemplo, la parentNodepropiedad obtiene su valor basándose en cuál es su elemento padre; un elemento siempre tiene una stylepropiedad, ya sea que tenga un atributo de "estilo" o no.

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 omitiendo muchas cosas):

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

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

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

Cuando hablo de que las propiedades son propiedades de un objeto, no hablo en abstracto. Aquí hay un código que no es de 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 los de la mayoría de los navegadores; hay algunas variaciones).

El linkobjeto es algo real y puede ver que hay una diferencia real entre acceder a una propiedad en él y acceder a un atributo .

Como dijo Tim, la gran mayoría de las veces, queremos trabajar con propiedades. En parte, eso se debe a que sus valores (incluso sus nombres) tienden a ser más consistentes en todos los navegadores. La mayoría de las veces solo queremos trabajar con atributos cuando no hay una propiedad relacionada con ellos (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 establecen en las diversas especificaciones DOM:

• DOM2 HTML (en gran parte obsoleto, consulte la especificación HTML en su lugar)
• DOM2 Core (obsoleto)
• DOM3 Core (obsoleto)
• DOM4

Estas especificaciones tienen índices excelentes y recomiendo tener enlaces a ellos a mano; Yo los uso 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 eso es válido a partir de HTML5, siempre que se ciña 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 acceso para data-xyzatributos [hace tanto más como 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 deseaba, en lugar de obtener literalmente el atributo. Combinó los conceptos. Pasar a propy attrestaba destinado a desconfigurarlos. 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 para jQuery. Durante años, se han contentado con una función denominada attr()que en su mayoría recuperaba propiedades DOM, no el resultado que esperaría 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 $.fn.attr()toma el atributo HTML especificado.

Para comprender completamente cómo funcionan, aquí hay una explicación detallada 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 para eventos, renderizado 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 abajo) espera el nombre de una propiedad DOM en get / set / removeAttribute en lugar del nombre del atributo. Ésta es una de las muchas razones por las que es importante conocer la diferencia.

Propiedades DOM

Sintaxis:

document.body.onload = foo;

Finalidad: da acceso a propiedades que pertenecen a nodos de elementos. Estas propiedades son similares a los atributos, pero solo se puede acceder a ellas a través de JavaScript. Ésta 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 por 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 echado un vistazo al 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 ha aclarado 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, todavía tiene la propiedad DOM correspondiente con un valor vacío o predeterminado.

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

editar

Si cambia 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 atributos HTML y objetos DOM lo que causa confusión. Para aquellos que se sientan cómodos actuando en las propiedades nativas de los elementos DOM como this.src this.value this.checked, etc., .propes una muy cálida bienvenida a la familia. Para otros, es solo una capa adicional de confusión. Aclaremos eso.

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

<input blah="hello">

1. $('input').attr('blah'): devuelve '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'): devuelve 'apple'¿eh? ¿Por qué no "pera" ya que esto se estableció en último lugar en ese elemento? Debido a que la propiedad se cambió en el atributo de entrada, no en el elemento de entrada DOM en sí, básicamente funcionan casi de forma independiente entre sí.
2. $('input').prop('blah'): devoluciones 'pear'

Lo que realmente debe tener cuidado es 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 esta razón tiene un .val()método, que internamente es equivalente a.prop('value')

TL; DR

Use 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

Comprobación sucia

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

Pruébalo:

• haga clic en el botón. Se marcaron ambas casillas de verificación.
• desmarque ambas casillas de verificación.
• haga clic en el botón de nuevo. Solo propse marcó la casilla de verificación. ¡ESTALLIDO!

$('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 quitar el atributo de contenido disabled="disabled"siempre cambia la propiedad (llamado atributo IDL en HTML5) porquehttp://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"encendido input type="checkbox", las cosas se rompen, porque una vez que hace clic en él, se ensucia y luego agregar o eliminar el checked="checked"atributo de contenido ya no cambia la verificación .

Esta es la razón por la que debería 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 tenía en cuenta los valores de propiedad al recuperar algunos atributos, lo que podía provocar un comportamiento incoherente. A partir de jQuery 1.6, el método .prop () proporciona una forma de recuperar explícitamente valores de propiedad, mientras que .attr () recupera atributos.

¡Así que usa prop!

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 DOM de HTML (== 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 booleanos 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 manipulándose 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ía usar .prop () en lugar de .attr () donde se recomienda oficialmente este último?

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 tal como se definió en el html al cargar la página

.prop():

• Obtiene 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á usar propiedades. Utilice 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 tenía en cuenta los valores de propiedad al recuperar atributos, lo que provocaba un comportamiento bastante inconsistente.

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

Los Docs:

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

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

Suavemente recordatorio sobre el uso prop(), ejemplo:

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

La función anterior se usa para verificar si la casilla de verificación1 está marcada o no, si está marcada: return 1; si no es así: 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 establecer la casilla de verificación 1 para que se marque y SIEMPRE regrese 1. Ahora la función prop () se usa como una función SET.

No lo arruines.

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

Una cosa .attr()puede hacer que .prop()no puede: afectar a los selectores de 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 para .prop('name', 'value')

.prop() afecta solo a 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 ("comprobado") (1.6.1+) "comprobado" (Cadena) Cambiará con el estado de la casilla de verificación

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

• Principalmente queremos usar para el objeto DOM en lugar de un atributo personalizado como data-img, data-xyz.

• También algo de diferencia al acceder al checkboxvalor y hrefcon attr()y prop()como cambio con la salida DOM con prop()un enlace completo originy un Booleanvalor para la casilla de verificación(pre-1.6)

• Solo podemos acceder a elementos DOM con propotros elementos de los que 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 configurarse con el método .prop (). Estos no tienen atributos correspondientes y son solo propiedades.

• Para la casilla de verificación del tipo de entrada

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

• El método prop devuelve un valor booleano para check, selected, disabled, readOnly..etc mientras que attr devuelve una cadena definida. Por lo tanto, puede usar directamente .prop ('marcado') en la 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 ().