Pregunta 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")

74
2017-11-26 10:01


origen


Respuestas:


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

los display propiedad puede tener muchos valores posibles, entre los cuales están block, inline, inline-blocky mucho mas.

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

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

Por otro lado, la ocultación se realiza a través de display: none;, entonces puedes considerar .hide() y .css("display", "none") equivalente a algún punto.

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


88
2017-11-26 10:04



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 .hide() se llama el valor de la propiedad de visualización se guarda en la memoria caché de datos de jQuery, por lo que cuando .show() se llama, se restablece el valor de visualización inicial!


32
2017-11-26 10:17



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

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


6
2018-02-28 21:56



ninguna diferencia 

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

$ ('. target'). hide ();         Los elementos coincidentes se ocultarán inmediatamente, sin animación. Esto es más o menos equivalente a llamar a .css ('display',   'ninguno'), excepto que el valor de la propiedad de visualización se guarda en   la memoria caché de datos de jQuery para que luego la pantalla pueda restaurarse a su   valor inicial. Si un elemento tiene un valor de visualización de en línea, entonces es   oculto y mostrado, se mostrará una vez más en línea.

Lo mismo sobre el espectáculo


4
2017-11-26 10:03



Sí, hay una diferencia.

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

jQuery('#id').show() will et es a qué tipo de pantalla inicialmente fue, display: inline por ejemplo.

Ver Jquery Doc


3
2017-11-26 10:05



Puedes echar un vistazo a la código fuente (aquí está v1.7.2).

A excepción de la animación que podemos establecer, esto también guarda en memoria el viejo estilo de visualización (que no es en todos los casos) block, también puede ser inline, table-cell, ...).


2
2017-11-26 10:03



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

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

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

Los elementos coincidentes se revelarán inmediatamente, sin animación. Esto es más o menos 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.


1
2017-11-26 10:06