wake-up-neo.com

Unterschied zwischen jQueries .hide () und der Anzeige von CSS: none

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

148
benhowdle89

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

Msgstr "Die übereinstimmenden Elemente werden ohne Animation sofort ausgeblendet. Dies entspricht in etwa dem Aufrufen von .css ('display', 'none'), mit der Ausnahme, dass der Wert der display - Eigenschaft im Daten - Cache von jQuery gespeichert wird, damit die Anzeige später erfolgen kann auf den ursprünglichen Wert zurückgesetzt werden. Wenn ein Element den Anzeigewert inline hat, dann wird es ausgeblendet und angezeigt, und es wird wieder inline angezeigt. "

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

$(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>
199
Stephan Muller

.hide() speichert die vorherige display -Eigenschaft unmittelbar vor dem Festlegen auf none, wenn es also nicht die Standardeigenschaft display für das Element war, sind Sie ein bisschen sicherer, .show() verwendet diese gespeicherte Eigenschaft als was zurückgehen zu. Also ... es macht einige zusätzliche Arbeit, aber wenn Sie nicht Tonnen Elemente tun, sollte der Geschwindigkeitsunterschied vernachlässigbar sein.

33
Nick Craver

Im jQuery-Code passiert 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;
    }
},
13
Spiny Norman

Sie sind das gleiche. .hide() ruft eine jQuery-Funktion auf und ermöglicht es Ihnen, ihr eine Rückruffunktion hinzuzufügen. Mit .hide() können Sie also beispielsweise eine Animation hinzufügen.

.css("display","none") ändert das Attribut des Elements in display:none. Dies ist genauso, als würden Sie in JavaScript Folgendes tun:

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

Die Funktion .hide() benötigt offensichtlich mehr Zeit, um ausgeführt zu werden, da sie auf Rückruffunktionen, Geschwindigkeit usw. überprüft.

11
seedg

Die Verwendung von beiden ist eine nette Antwort; es ist keine Frage von entweder oder.

Der Vorteil der Verwendung von beiden ist, dass das CSS das Element sofort ausblenden wird wenn die Seite geladen wird. Die jQuery .hide flackert das Element für eine Viertelsekunde und blendet es dann aus.

Wenn das Element beim Laden der Seite nicht angezeigt werden soll, können Sie CSS verwenden und display: none festlegen und die jQuery .hide () verwenden. Wenn wir vorhaben, das Element umzuschalten, können wir jQuery toggle verwenden.

4
Catto

Beide tun dasselbe in allen Browsern, AFAIK. Aktiviert in Chrome und Firefox, beide hängen display:none An das style -Attribut des Elements an.

1
Klemen Slavič