Differenza tra .hide () di jQuery e impostazione CSS per la visualizzazione: nessuna

153

Cosa sto facendo meglio? .hide()è più veloce della scrittura .css("display", "none"), ma qual è la differenza e cosa stanno facendo entrambi con l'elemento HTML?

— benhowdle89
fonte

208

Dalla pagina jQuery su .hide () :

"Gli elementi corrispondenti verranno nascosti immediatamente, senza animazione. Ciò equivale all'incirca alla chiamata .css ('display', 'none'), tranne per il fatto che il valore della proprietà display viene salvato nella cache dei dati di jQuery in modo che la visualizzazione possa successivamente ripristinato al suo valore iniziale. Se un elemento ha un valore di visualizzazione inline, viene nascosto e mostrato, verrà nuovamente visualizzato in linea. "

Quindi, se è importante poter tornare al valore precedente di display, è meglio utilizzarlo hide()perché in questo modo viene ricordato lo stato precedente. A parte questo, non c'è differenza.

Mostra snippet di codice

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

Espandi frammento

— Stephan Muller
fonte

Il problema con l'uso di .hide è che dopo aver ricaricato il sito l'elemento hide continua a cercare in 2 secondi

— TM

34

.hide()memorizza la proprietà precedente display poco prima di impostarla su none, quindi se non fosse la displayproprietà standard per l'elemento che sei un po 'più sicuro, .show()userà quella proprietà memorizzata come cosa tornare. Quindi ... fa qualche lavoro extra, ma a meno che tu non stia facendo tonnellate di elementi, la differenza di velocità dovrebbe essere trascurabile.

— Nick Craver
fonte

13

Guardando il codice jQuery, ecco cosa succede:

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 spinoso
fonte

12

Sono la stessa cosa. .hide()chiama una funzione jQuery e ti consente di aggiungere una funzione di richiamata. Quindi, con .hide()te puoi aggiungere un'animazione per esempio.

.css("display","none")cambia l'attributo dell'elemento in display:none. È lo stesso che se eseguissi le seguenti operazioni in JavaScript:

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

La .hide()funzione prende, ovviamente, più tempo per l'esecuzione come verifica la presenza di funzioni di callback, velocità, ecc ...

— seedg
fonte

4

Usare entrambi è una bella risposta; non è una questione di o.

Il vantaggio di utilizzare entrambi è che il CSS nasconderà immediatamente l'elemento quando la pagina viene caricata. JQuery .hide farà lampeggiare l'elemento per un quarto di secondo, quindi lo nasconderà.

Nel caso in cui desideriamo che l'elemento non venga visualizzato quando la pagina viene caricata, possiamo usare CSS e impostare display: none e usare jQuery .hide (). Se prevediamo di attivare / disattivare l'elemento, possiamo usare l'interruttore jQuery.

— Catto
fonte

1

Entrambi fanno lo stesso su tutti i browser, AFAIK. Controllato su Chrome e Firefox, sia di aggiunta display:noneal styleattributo dell'elemento.

— Klemen Slavič
fonte

-5

Vedi non c'è differenza se usi il metodo hide di base. Ma jquery fornisce vari metodi hide che danno effetti all'elemento. Fare riferimento al collegamento seguente per una spiegazione dettagliata: Effetti per Nascondi in Jquery

— nilesh panchal
fonte