Différence entre la fonction .hide() de jQuery et le paramètre CSS display : none

Question

Qu'est-ce que je ferais mieux de faire ? .hide() est plus rapide que d'écrire .css("display", "none") mais quelle est la différence et que font-ils réellement à l'élément HTML ?

Answer 1

De la page jQuery sur .hide() :

" Les éléments correspondants seront masqués immédiatement, sans animation. C'est à peu près équivalent à l'appel de .css('display', 'none'), sauf que la valeur de la propriété display est enregistrée dans le cache de données de jQuery, de sorte que display puisse être rétabli ultérieurement à sa valeur initiale. Si un élément a une valeur d'affichage de inline, puis est caché et affiché, il sera à nouveau affiché inline."

Donc, s'il est important que vous soyez en mesure de revenir à la valeur précédente de display vous feriez mieux d'utiliser hide() car de cette façon, l'état précédent est mémorisé. En dehors de cela, il n'y a pas de différence.

$(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>

Answer 2

.hide() enregistre le précédent display juste avant de la définir sur none donc si ce n'était pas la norme display pour l'élément, vous êtes un peu plus en sécurité, .show() utilisera cette propriété stockée comme point de départ. Donc... ça fait un peu de travail supplémentaire, mais à moins que vous ne fassiez tonnes d'éléments, la différence de vitesse devrait être négligeable.

Answer 3

En regardant le code jQuery, voici ce qui se passe :

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

Answer 4

C'est la même chose. .hide() appelle une fonction jQuery et vous permet d'y ajouter une fonction de rappel. Ainsi, avec .hide() vous pouvez ajouter une animation par exemple.

.css("display","none") change l'attribut de l'élément en display:none . C'est la même chose que si vous faites ce qui suit en JavaScript :

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

El .hide() prend évidemment plus de temps pour s'exécuter car elle vérifie les fonctions de rappel, la vitesse, etc...

Answer 5

Les deux font la même chose sur tous les navigateurs, AFAIK. J'ai vérifié sur Chrome et Firefox, les deux ajoutent display:none à la style de l'élément.