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?
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?
Respostas:
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.
.hide()
armazena a propriedade anterior display
pouco antes de configurá-la none
, portanto, se não fosse a display
propriedade 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:none
ao style
atributo 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