javascript - Forskjellen mellom jQuerys .hide() og å sette CSS til display: none

Hva tjener jeg best på å gjøre? .hide() er raskere enn å skrive ut .css("display", "none"), men hva er forskjellen og hva gjør egentlig begge med HTML-elementet?

Svar #1

Fra jQuery-siden om .hide():

"De samsvarende elementene vil bli skjult umiddelbart, uten animasjon. Dette tilsvarer omtrent å kalle .css('display', 'none'), bortsett fra at verdien av display-egenskapen blir lagret i jQuerys datacache slik at display senere kan gjenopprettes til sin opprinnelige verdi. Hvis et element har en display-verdi på inline, og deretter blir skjult og vist, vil det igjen bli vist inline."

Så hvis det er viktig at du kan gå tilbake til den forrige verdien av display, bør du heller bruke hide() fordi den måten huskes den forrige tilstanden. Bortsett fra det er det ingen forskjell.

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

Svar #2

.hide() lagrer forrige display-egenskap rett før den settes til none, så hvis det ikke var standard display-egenskap for elementet, er du litt tryggere; .show() vil bruke den lagrede egenskapen som hva den skal gå tilbake til. Så...det gjør litt ekstra arbeid, men med mindre du gjør dette på mange elementer, bør hastighetsforskjellen være ubetydelig.

Svar #3

Når man ser på jQuery-koden, skjer dette:

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

Svar #4

De er det samme. .hide() kaller en jQuery-funksjon og lar deg legge til en callback-funksjon til den. Så med .hide() kan du for eksempel legge til en animasjon.

.css("display","none") endrer attributtet til elementet til display:none. Det er det samme som om du gjør følgende i JavaScript:

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

Funksjonen .hide() tar åpenbart mer tid å kjøre siden den sjekker etter tilbakeringingsfunksjoner, hastighet osv...

Relaterte artikler