Unterschied zwischen .hide () von jQuery und der Einstellung von CSS für die Anzeige: keine

153

Was mache ich besser? .hide()ist schneller als das Ausschreiben .css("display", "none"), aber was ist der Unterschied und was machen beide tatsächlich mit dem HTML-Element?

— benhowdle89
quelle

208

Von der jQuery-Seite über .hide () :

"Die übereinstimmenden Elemente werden sofort ohne Animation ausgeblendet. Dies entspricht in etwa dem Aufruf von .css ('display', 'none'), außer dass der Wert der Anzeigeeigenschaft im Datencache von jQuery gespeichert wird, damit die Anzeige später erfolgen kann wird auf seinen ursprünglichen Wert zurückgesetzt. Wenn ein Element den Anzeigewert Inline hat, dann ausgeblendet und angezeigt wird, wird es erneut inline angezeigt. "

Wenn es also wichtig ist, dass Sie zum vorherigen Wert von zurückkehren können display, sollten Sie ihn verwenden, hide()da auf diese Weise der vorherige Status gespeichert wird. Ansonsten gibt es keinen Unterschied.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

— Stephan Müller
quelle

Das Problem bei der Verwendung von .hide ist, dass nach dem Neuladen der Site das Element hide in 2 Sekunden immer noch angezeigt wird

— TM

34

.hide()speichert die vorherige display Eigenschaft kurz vor dem Festlegen. noneWenn dies also nicht die Standardeigenschaft displayfür das Element ist, für das Sie etwas sicherer sind, .show()wird diese gespeicherte Eigenschaft als Ausgangspunkt verwendet. Also ... es macht einige zusätzliche Arbeit, aber wenn Sie nicht Tonnen von Elementen ausführen, sollte der Geschwindigkeitsunterschied vernachlässigbar sein.

— Nick Craver
quelle

13

Wenn Sie sich den jQuery-Code ansehen, geschieht Folgendes:

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

— Stacheliger Norman
quelle

12

Sie sind das gleiche. .hide()Ruft eine jQuery-Funktion auf und ermöglicht das Hinzufügen einer Rückruffunktion. So .hide()können Sie beispielsweise eine Animation hinzufügen.

.css("display","none")ändert das Attribut des Elements in display:none. Es ist dasselbe, als ob Sie in JavaScript Folgendes tun:

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

Die .hide()Funktion benötigt offensichtlich mehr Zeit zum Ausführen, da sie nach Rückruffunktionen, Geschwindigkeit usw. sucht.

— seedg
quelle

4

Beides zu benutzen ist eine schöne Antwort; es ist keine Frage von entweder oder.

Der Vorteil von beiden ist, dass das CSS das Element sofort ausblendet beim Laden der Seite . Die jQuery .hide blinkt das Element für eine Viertelsekunde und blendet es dann aus.

In dem Fall, in dem das Element beim Laden der Seite nicht angezeigt werden soll, können wir CSS verwenden und die Anzeige festlegen: none & verwenden Sie die jQuery .hide (). Wenn wir das Element umschalten möchten, können wir jQuery umschalten.

— Catto
quelle

1

Beide machen das gleiche in allen Browsern, AFAIK. Bei Chrome und Firefox aktiviert, werden beide display:nonean das styleAttribut des Elements angehängt .

— Klemen Slavič
quelle

-5

Es gibt keinen Unterschied, wenn Sie die grundlegende Methode zum Ausblenden verwenden. Jquery bietet jedoch verschiedene Versteckmethoden, die dem Element Effekte verleihen. Eine ausführliche Erklärung finden Sie unter dem folgenden Link: Effekte für Hide in Jquery

— Nilesh Panchal
quelle