Diferencia entre jQuery's .hide () y la configuración de CSS para mostrar: ninguno

¿Qué estoy mejor haciendo? .hide()es más rápido que escribir .css("display", "none"), pero ¿cuál es la diferencia y qué le están haciendo realmente al elemento HTML?

Desde la página jQuery sobre .hide () :

"Los elementos coincidentes se ocultarán inmediatamente, sin animación. Esto es más o menos equivalente a llamar a .css ('display', 'none'), excepto que el valor de la propiedad de visualización se guarda en la caché de datos de jQuery para que la visualización pueda más tarde se restaurará a su valor inicial. Si un elemento tiene un valor de visualización en línea, luego se oculta y se muestra, una vez más se mostrará en línea ".

Entonces, si es importante que pueda volver al valor anterior de display, será mejor que lo use hide()porque así se recuerda el estado anterior. Aparte de eso no hay diferencia.

$(function() {
    $('.hide').click(function(){
        $('.toggle').hide();
        setDisplayValue();
    });
    $('.show').click(function(){
        $('.toggle').show();
        setDisplayValue();
    });
});

function setDisplayValue() {
    var display = $('.toggle')[0].style.display;
    $('.displayvalue').text(display);
}

div {
    display: table-cell;
    border: 1px solid;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <button class="hide">Hide</button>
    <button class="show">Show</button>
</p>

<div class="toggle">Lorem Ipsum</div>

<p>
    The display value of the div is:
    <span class="displayvalue"></span>
</p>

.hide()almacena la propiedad anterior display justo antes de establecerla none, por lo que si no fuera la displaypropiedad estándar para el elemento que es un poco más seguro, .show()usará esa propiedad almacenada como a qué volver. Entonces ... hace un trabajo extra, pero a menos que esté haciendo toneladas de elementos, la diferencia de velocidad debería ser insignificante.

Mirando el código jQuery, esto es lo que sucede:

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},

Ellos son la misma cosa. .hide()llama a una función jQuery y le permite agregarle una función de devolución de llamada. Entonces, con .hide()usted puede agregar una animación, por ejemplo.

.css("display","none")cambia el atributo del elemento a display:none. Es lo mismo que si haces lo siguiente en JavaScript:

document.getElementById('elementId').style.display = 'none';

La .hide()función obviamente tarda más tiempo en ejecutarse, ya que comprueba las funciones de devolución de llamada, velocidad, etc.

Usar ambos es una buena respuesta; No es una cuestión de uno u otro.

La ventaja de usar ambos es que el CSS ocultará el elemento inmediatamente cuando se cargue la página. JQuery .hide mostrará el elemento durante un cuarto de segundo y luego lo ocultará.

En el caso en que deseamos que el elemento no se muestre cuando se carga la página, podemos usar CSS y establecer display: none y usar jQuery .hide (). Si planeamos alternar el elemento, podemos usar jQuery alternar.

Ambos hacen lo mismo en todos los navegadores, AFAIK. Marcado en Chrome y Firefox, ambos se agregan display:noneal styleatributo del elemento.

Vea que no hay diferencia si usa el método básico de ocultar. Pero jquery proporciona varios métodos de ocultación que dan efectos al elemento. Consulte el siguiente enlace para obtener una explicación detallada: Efectos para Ocultar en Jquery