sirve que para disabled javascript jquery dom attr prop

javascript - disabled - prop jquery para que sirve



.prop() vs.attr() (18)

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") (pre-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 diferencias cuando se accede al checkboxvalor y hrefcon attr()y prop()como tal cambio con la salida del DOM con prop()un enlace completo originy un Booleanvalor para la casilla de verificación(pre-1.6)

  • Solo podemos acceder a los elementos del DOM con propotros que luego da.undefined

<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>

Así que 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 tengo que cambiar a usar prop() , todas las llamadas attr() antiguas se interrumpirán si 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 getAttribute como una cadena y el attr como una cadena, pero el prop como una CSSStyleDeclaration , ¿Por qué? ¿Y cómo afecta eso a mi codificación en el futuro?

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

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

Los docs:

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

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

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 similar ( value obtiene su valor inicial del atributo "valor"; href obtiene su valor inicial del atributo "href", pero no es exactamente el mismo valor; className del atributo "class"). Otras propiedades obtienen sus valores iniciales de otras maneras: por ejemplo, la propiedad parentNode obtiene su valor en función de su elemento principal; un elemento siempre tiene una propiedad de style , tenga o no un atributo de "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):

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+ | HTMLAnchorElement | +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+ | href: "http://example.com/foo.html" | | name: "fooAnchor" | | id: "fooAnchor" | | className: "test one" | | attributes: | | href: "foo.html" | | name: "fooAnchor" | | id: "fooAnchor" | | class: "test one" | +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

Tenga en cuenta que las propiedades y atributos son distintos.

Ahora, aunque son distintos, porque todo esto evolucionó en lugar de diseñarse desde cero, varias propiedades vuelven a escribir en el atributo del que se derivaron si se configuran. Pero no todos lo hacen, y como puede ver en href arriba, el mapeo no siempre es un "pase el valor" directo, a veces hay una interpretación involucrada.

Cuando hablo de que las propiedades son 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 algunas variaciones).

El objeto de link es una cosa 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. En parte, esto se debe a que sus valores (incluso sus nombres) tienden a ser más consistentes en todos los navegadores. En su mayoría, solo queremos trabajar con atributos cuando no hay una propiedad relacionada (atributos personalizados), o cuando sabemos que para ese atributo en particular, el atributo y la propiedad no son 1: 1 (como con href y "href" arriba) ).

Las propiedades estándar se establecen en las distintas especificaciones de DOM:

Estas especificaciones tienen índices excelentes y recomiendo mantener los enlaces a mano; Yo los uso todo el tiempo.

Los atributos personalizados incluirían, por ejemplo, cualquier atributo de data-xyz que pueda colocar en elementos para proporcionar metadatos a su código (ahora eso es válido como HTML5, siempre y cuando se adhiera al prefijo de data- ). (Las versiones recientes de jQuery le dan acceso a elementos data-xyz través de la función data , pero esa función no es solo un elemento de acceso para data-xyz atributos data-xyz [hace más y menos que eso]; a menos que realmente necesite sus funciones, I '' attr función attr para interactuar con el atributo data-xyz .)

La función attr solía tener alguna lógica compleja en torno a obtener lo que pensaban que querías, en lugar de obtener literalmente el atributo. Combinaba los conceptos. Moverse para prop y attr estaba destinado a des-confundirlos. Brevemente en v1.6.0, jQuery fue demasiado lejos en ese sentido, pero la funcionalidad se agregó rápidamente a attr para manejar las situaciones comunes en las que las personas usan attr cuando técnicamente deberían usar prop .

Es solo la distinción entre atributos HTML y objetos DOM lo que causa una confusión. Para aquellos que se sienten cómodos actuando sobre las propiedades nativas de los elementos DOM como this.src this.value this.checked , etc., .prop es una muy 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 .attr y .prop es 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 hacer [HTMLInputElement].blah , y no existe tal propiedad en ese objeto DOM. Solo existe en el ámbito 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 se estableció por última vez en ese elemento. Debido a que la propiedad se modificó en el atributo de entrada, no el elemento de entrada DOM en sí, básicamente funcionan de forma independiente entre sí.
  2. $(''input'').prop(''blah'') : devuelve ''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/

.attr vs .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'') - devuelve ''i changed the value''

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

Este cambio ha tardado mucho en llegar para jQuery. Durante años, han estado contentos con una función llamada attr() que recuperó la mayoría de las 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 que $.fn.attr() toma el atributo HTML especificado.

Para entender 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 para eventos, representació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, el modo de IE 8 Quirks (y más abajo) 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 las propiedades que pertenecen a los nodos del elemento. 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 onload, solo un atributo onload).

Visualización:

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

Documentación

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 adecuado, foo .

Sin haber echado un vistazo al nuevo código de cualquiera 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 aclaró algunas cosas para ti.

-Mate

Generalmente querrás usar propiedades. Use atributos solo para:

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

Todo está en el doc:

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 las propiedades al recuperar algunos atributos, lo que podría causar un comportamiento incoherente. A partir de jQuery 1.6, el método .prop () proporciona una manera de recuperar explícitamente los valores de las propiedades, mientras que .attr () solo recupera los atributos.

¡Así que usa prop!

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 atributo de class de una etiqueta cambiará la propiedad className 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 atributo de class , la propiedad DOM className existe con un valor de cadena vacío.

editar

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

.attr() :

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

.prop() :

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

attributes -> HTML

properties -> DOM

.apuntalar()

.prop( propertyName ) propertyName Type: String The name of the property to get.

El método .prop () obtiene el valor de propiedad solo para el primer elemento del conjunto coincidente. Devuelve undefined para el valor de una propiedad que no se ha establecido, o si el conjunto coincidente no tiene elementos. Para obtener el valor de cada elemento individualmente, use una construcción de bucle como el método .each () o .map () de jQuery.

<html> <head> <meta charset="utf-8"> <title>prop demo</title> <style> p { margin: 20px 0 0; } b { color: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </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>

.attr ()

.attr( attributeName ) attributeName Type: String The name of the attribute to get.

El método .attr () obtiene el valor del atributo solo para el primer elemento del conjunto coincidente. Para obtener el valor de cada elemento individualmente, use una construcción de bucle como el método .each () o .map () de jQuery.

El uso del método .attr () de jQuery para obtener el valor del atributo de un elemento tiene dos ventajas principales:

Conveniencia: se puede llamar directamente en un objeto jQuery y encadenar a otros métodos jQuery. Coherencia entre navegadores: los valores de algunos atributos se informan de forma inconsistente en los navegadores e incluso en las versiones de un solo navegador. El método .attr () reduce tales inconsistencias.

<html> <head> <meta charset="utf-8"> <title>attr demo</title> <style> em { color: blue; font-weight: bold; } div { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p> The title of the emphasis is:<div></div> <script> var title = $( "em" ).attr( "title" ); $( "div" ).text( title ); </script> </body> </html>

Actualización 1 noviembre 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 al montón previsto de sitios web rotos, el equipo de jQuery revertió attr() a algo cercano (pero no exactamente igual) a su antiguo comportamiento para los atributos booleanos. . John Resig también blogueó al respecto . Puedo ver la dificultad en la que se encontraban, 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. No es tan bueno para los bazillones de sitios que utilizan jQuery que se romperán como resultado de este cambio.

Resumiré los principales temas:

  • Por lo general, quieres 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 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 propiedad checked es booleana, la propiedad de style es un objeto con propiedades individuales para cada estilo, la propiedad de size es un número.
  • Cuando existe una propiedad y un atributo con el mismo nombre, generalmente la actualización de una actualizará la otra, pero este no es el caso de ciertos atributos de entradas, como el value y la checked : para estos atributos, la propiedad siempre representa el estado actual mientras que el atributo (excepto en las versiones antiguas de IE) corresponde al valor predeterminado / comprobación de la entrada (reflejado en la propiedad defaultChecked / defaultChecked ).
  • Este cambio elimina parte de la capa de magia jQuery pegada 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 eres un desarrollador de jQuery y todo este negocio te confunde acerca de las propiedades y los 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 autorizada pero algo seca sobre el tema, están las especificaciones: DOM4 , HTML DOM , DOM Nivel 2 , DOM Nivel 3 . La documentación de 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 de DOM . Hay una sección sobre las propiedades del elemento .

Como ejemplo de cómo las propiedades son más simples de tratar que los atributos, considere una casilla de verificación que inicialmente está marcada. 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 averigua si la casilla está marcada con jQuery? Mire en 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 del mundo que se puede hacer con la propiedad booleana checked , que ha existido y ha funcionado perfectamente en todos los principales navegadores de scripts 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 sin ambigüedad en

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

La idea de usar el atributo checked para crear un script en una casilla de verificación no es ú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 atributo checked
  • 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/ .

TL; DR

Use prop() sobre 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

Veracidad 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. Ambas casillas fueron marcadas.
  • desmarque ambas casillas de verificación.
  • haga clic en el botón de nuevo. Sólo la casilla de verificación de prop fue marcada. ¡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 disabled en el 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 podría salirse con la suya, aunque es feo, ya que modifica HTML sin necesidad.

Para otros atributos como checked="checked" en input type="checkbox" , las cosas se rompen, porque una vez que se hace clic en él, se ensucia, y luego agregar o eliminar el atributo de contenido checked="checked" ya no hace que se alterne el checkness .

Esta es la razón por la que debería utilizar principalmente .prop , ya que afecta directamente a la propiedad efectiva, en lugar de confiar en los complejos efectos secundarios de modificar el HTML.

los atributos están en su documento / archivo de texto HTML (== imagina que esto 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 el sentido de JS).

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

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

La regla de oro es : el método .prop() 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 método .attr() . ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

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

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

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

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).

Así cambiándolo en el siguiente código

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

resuelve el problema.

jQuery 1.6 introduce la función .prop () y separa los atributos y las propiedades del DOM, generó muchas preguntas sobre la diferencia entre las funciones .attr y .prop.

ver ejemplos a continuación:

Ejemplo 1)

<input id="demo" type="text" dbvalue="Kansagara" /> $("#demo").attr("dbvalue"); // returns Kansagara $("#demo").prop("dbvalue"); // returns undefined

.prop () devuelve el valor de solo el atributo HTML DOM, no devolvió el valor del atributo personalizado, mientras que .attr () también devolvió el valor del atributo personalizado que se muestra arriba.

Ejemplo: 2)

<input id="demo" type="text" value="Kansagara" />

Ahora, cambié el texto ''Kansagara'' a ''Hitesh'' en el cuadro de texto.

$("#demo").attr("value"); // returns Kansagara $("#demo").prop("value"); // returns Hitesh

Ahora tienes una idea de lo que significa. Sólo se modifica la propiedad del elemento, porque está en el DOM y dinámico. Pero el atributo del elemento está en texto HTML y no se puede cambiar. En sentido amplio, la propiedad siempre representa el estado actual, mientras que el atributo (excepto en las versiones anteriores de IE) representa el estado inicial o está destinado a los atributos html, ya que están estrictamente definidos. El atributo no le dice nada sobre el estado actual.

para una casilla de verificación (jquery 1.6+)

<input id="check1" checked="checked" type="checkbox" /> .attr(''checked'') //returns checked .prop(''checked'') //returns true .is('':checked'') //returns true

el método prop devuelve el valor booleano para revisado, seleccionado, deshabilitado, readOnly..etc mientras que attr devuelve una cadena definida. Por lo tanto, puede utilizar 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 ().

Para jQuery 1.6+, la prop se usará principalmente porque es simple y más ancha que attr. En la mayoría de los proyectos antiguos, attr se usa para obtener información del estado actual del elemento. Pero ahora prop ha tomado este trabajo y attr sería reemplazado por prop.

Espero eso ayude.

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ón 1 está marcada o no, si está marcada: retorno 1; si no, devuelva 0. Función prop () usada 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ón1 para que se marque y SIEMPRE devuelva 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 el src está vacío, prop devuelve la URL actual de la página (incorrecta) y attr devuelve una cadena vacía (derecha).