Diferencia entre jQuery .hide () y .css ("display", "none")

¿Hay alguna diferencia entre

jQuery('#id').show() and jQuery('#id').css("display","block") 

y

 jQuery('#id').hide() and jQuery('#id').css("display","none") 

jQuery ('# id'). css ("pantalla", "bloque")

La propiedad de display puede tener muchos valores posibles, entre los que se encuentran block , inline , inline-block y muchos más .

El método .show() no lo establece necesariamente para block , sino que lo restablece a lo que usted definió (si es que lo hace).

En el código fuente de jQuery, puede ver cómo están configurando la propiedad de display en "" (una cadena vacía) para verificar lo que era antes de cualquier manipulación de jQuery: pequeño enlace .

Por otro lado, la ocultación se realiza a través de la display: none; , por lo que puede considerar .hide() y .css("display", "none") equivalentes a algún punto.

Se recomienda utilizar .show() y .hide() todos modos para evitar cualquier gotcha (además, son más cortos).

Diferencia entre show () y css ({'display': 'block'})

Asumiendo que tienes esto al principio:

 <span id="thisElement" style="display: none;">Foo</span> 

cuando usted llama:

 $('#thisElement').show(); 

conseguirás:

 <span id="thisElement" style="">Foo</span> 

mientras:

 $('#thisElement').css({'display':'block'}); 

hace:

 <span id="thisElement" style="display: block;">Foo</span> 

Entonces, sí, hay una diferencia.

Diferencia entre hide () y css ({'display': 'none'})

igual que arriba, pero cámbielos a hide () y muestre ':' ninguno '…

Otra diferencia Cuando se .hide() el valor de la propiedad de visualización se guarda en el caching de datos de jQuery, de modo que cuando se llama a .show() , se restablece el valor de visualización inicial.

Sí, hay una diferencia en el performance de ambos: jQuery('#id').show() es más lento que jQuery('#id').css("display","block") como en el caso anterior el trabajo extra es que se debe hacer para recuperar el estado inicial de la caching de jquery, ya que la visualización no es un atributo binary, puede estar en inline , block , none , table , etc. similar es el caso del método hide() .

Ver: http://jsperf.com/show-vs-addclass

ninguna diferencia

Sin parameters, el método .hide () es la forma más sencilla de ocultar un elemento:

$ ('. target'). hide (); Los elementos coincidentes se ocultarán inmediatamente, sin animation. Esto es más o less equivalente a llamar a .css ('display', 'none'), excepto que el valor de la propiedad de visualización se guarda en el caching de datos de jQuery para que luego la visualización pueda restaurarse a su valor inicial. Si un elemento tiene un valor de visualización de en línea, luego está oculto y se muestra, se mostrará una vez más en línea.

Lo mismo sobre el espectáculo

Sí, hay una diferencia.

jQuery('#id').css("display","block") siempre establecerá el elemento que desea mostrar como bloque.

jQuery('#id').show() will et es el tipo de pantalla que inicialmente era, display: inline por ejemplo.

Ver Jquery Doc

Puedes echarle un vistazo al código fuente (aquí está v1.7.2).

Excepto por la animation que podemos establecer, esto también guarda en memory el viejo estilo de visualización (que no es en todos los casos block , también puede estar en inline , table-cell , …).

ver http://api.jquery.com/show/

Sin parameters, el método .show () es la forma más sencilla de mostrar un elemento:

$ ('. target'). show ();

Los elementos coincidentes se revelarán inmediatamente, sin animation. Esto es más o less equivalente a llamar a .css ('display', 'block'), excepto que la propiedad de visualización se restaura a lo que fue inicialmente. Si un elemento tiene un valor de visualización de en línea, luego está oculto y se muestra, se mostrará una vez más en línea.