Diferença entre o .hide () do jQuery e a configuração do CSS para exibição: none

O que eu estou melhor fazendo? .hide()é mais rápido do que escrever .css("display", "none"), mas qual é a diferença e o que os dois estão realmente fazendo no elemento HTML?

Na página jQuery sobre .hide () :

"Os elementos correspondentes serão ocultados imediatamente, sem animação. Isso é aproximadamente equivalente a chamar .css ('display', 'none'), exceto que o valor da propriedade display é salvo no cache de dados do jQuery, para que o display possa posteriormente restaurado ao seu valor inicial. Se um elemento tiver um valor de exibição inline, ele será oculto e mostrado, mais uma vez será exibido inline. "

Portanto, se é importante que você possa reverter para o valor anterior de display, é melhor usá-lo, hide()pois dessa forma o estado anterior é lembrado. Além disso, não há diferença.

$(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()armazena a propriedade anterior display pouco antes de configurá-la none, portanto, se não fosse a displaypropriedade padrão para o elemento com o qual você é um pouco mais seguro, .show()usará essa propriedade armazenada como o que retornar. Então ... ele faz algum trabalho extra, mas a menos que você está fazendo toneladas de elementos, a diferença de velocidade deve ser insignificante.

Observando o código do jQuery, é o que acontece:

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;
    }
},

Eles são a mesma coisa. .hide()chama uma função jQuery e permite adicionar uma função de retorno de chamada a ela. Assim, .hide()você pode adicionar uma animação, por exemplo.

.css("display","none")altera o atributo do elemento para display:none. É o mesmo que se você fizesse o seguinte em JavaScript:

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

A .hide()função, obviamente, leva mais tempo para ser executado como ele verifica para funções de retorno de chamada, velocidade, etc ...

Para usar ambos é uma boa resposta; não é uma questão de um ou outro.

A vantagem de usar ambos é que o CSS oculta o elemento imediatamente quando a página é carregada. O jQuery .hide piscará o elemento por um quarto de segundo e depois o ocultará.

No caso em que queremos que o elemento não seja mostrado quando a página é carregada, podemos usar CSS e definir display: none e usar o jQuery .hide (). Se planejamos alternar o elemento, podemos usar a alternância do jQuery.

Ambos fazem o mesmo em todos os navegadores, AFAIK. Verificado no Chrome e Firefox, ambos anexam display:noneao styleatributo do elemento.

Veja que não há diferença se você usar o método oculto básico. Mas o jquery fornece vários métodos de ocultação que dão efeitos ao elemento. Consulte o link abaixo para obter uma explicação detalhada: Efeitos para Ocultar no Jquery