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

153

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?

benhowdle89
la source

Réponses:

208

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.

Stéphan Muller
la source
Le problème avec .hide est qu'après le rechargement du site, l'élément hide est toujours à la recherche dans 2 secondes
TM
34

.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.

Nick Craver
la source
13

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;
    }
},
Norman épineux
la source
12

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.

graine
la source
4

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.

Catto
la source
1

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.

Klemen Slavič
la source
-5

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

nilesh panchal
la source