Différence entre .hide () de jQuery et la définition de CSS à afficher: aucune

Qu'est-ce que je ferais mieux? .hide()est plus rapide que l'écriture .css("display", "none"), mais quelle est la différence et que font les deux à l'élément HTML?

Depuis la page jQuery sur .hide () :

"Les éléments correspondants seront immédiatement masqués, sans animation. Cela équivaut à peu près à appeler .css ('display', 'none'), sauf que la valeur de la propriété display est enregistrée dans le cache de données de jQuery afin que l'affichage puisse plus tard être restauré à sa valeur initiale. Si un élément a une valeur d'affichage en ligne, puis est masqué et affiché, il sera à nouveau affiché en ligne. "

Donc, s'il est important que vous puissiez revenir à la valeur précédente de display, vous feriez mieux d'utiliser hide()parce que de cette façon, l'état précédent est mémorisé. A part ça, 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>

.hide()stocke la propriété précédente display juste avant de la définir none, donc si ce n'était pas la displaypropriété standard de l'élément, vous êtes un peu plus en sécurité, .show()utilisera cette propriété stockée comme quoi revenir. Donc ... cela fait un travail supplémentaire, mais à moins que vous ne fassiez des tonnes d'éléments, la différence de vitesse devrait être négligeable.

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

Ce sont les mêmes choses. .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")remplace l'attribut de l'élément par display:none. C'est la même chose que si vous effectuez les opérations suivantes en JavaScript:

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

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

Utiliser les deux est une bonne réponse; ce n'est pas une question de l'un ou de l'autre.

L' avantage d'utiliser les deux est que le CSS masquera l'élément immédiatement lors du chargement de la page. Le jQuery .hide flashera l'élément pendant un quart de seconde puis le masquera.

Dans le cas où nous voulons que l'élément ne soit pas affiché lors du chargement de la page, nous pouvons utiliser CSS et définir display: none et utiliser le jQuery .hide (). Si nous prévoyons de basculer l'élément, nous pouvons utiliser le basculement jQuery.

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

Voyez qu'il n'y a aucune différence si vous utilisez la méthode de masquage de base. Mais jquery fournit diverses méthodes de masquage qui donnent des effets à l'élément. Reportez-vous au lien ci-dessous pour une explication détaillée: Effets pour Hide in Jquery