Różnica między .hide () jQuery a ustawieniem wyświetlania CSS: brak

Co lepiej zrobić? .hide()jest szybsze niż pisanie .css("display", "none"), ale jaka jest różnica i co oboje faktycznie robią z elementem HTML?

Ze strony jQuery na temat .hide () :

„Dopasowane elementy zostaną natychmiast ukryte, bez animacji. Jest to mniej więcej równoważne z wywołaniem .css ('display', 'none'), z wyjątkiem tego, że wartość właściwości display jest zapisywana w pamięci podręcznej danych jQuery, aby można ją było później wyświetlić zostanie przywrócony do swojej wartości początkowej. Jeśli element ma wyświetlaną wartość inline, a następnie jest ukryty i pokazany, zostanie ponownie wyświetlony w tekście. "

Więc jeśli ważne jest, abyś mógł powrócić do poprzedniej wartości display, lepiej użyj, hide()ponieważ w ten sposób zapamiętuje się poprzedni stan. Poza tym nie ma różnicy.

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

.hide()przechowuje poprzednią display właściwość tuż przed ustawieniem jej na none, więc jeśli nie jest to standardowa displaywłaściwość elementu, który jest nieco bezpieczniejszy, .show()użyje tej przechowywanej właściwości jako tego, do czego wrócić. Więc ... wykonuje dodatkową pracę, ale jeśli nie robisz mnóstwa elementów, różnica prędkości powinna być pomijalna.

Patrząc na kod jQuery, dzieje się tak:

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

To są te same rzeczy. .hide()wywołuje funkcję jQuery i umożliwia dodanie do niej funkcji zwrotnej. Tak .hide()więc możesz na przykład dodać animację.

.css("display","none")zmienia atrybut elementu na display:none. Działa tak samo, jak w przypadku wykonania następujących czynności w JavaScript:

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

Uruchomienie .hide()funkcji zajmuje oczywiście więcej czasu, ponieważ sprawdza funkcje wywołania zwrotnego, szybkość itp.

Używanie obu jest miłą odpowiedzią; to nie jest kwestia albo albo.

Zaletą korzystania zarówno to, że CSS natychmiast ukryć elementu po załadowaniu strony. JQuery .hide będzie migać element przez ćwierć sekundy, a następnie go ukryje.

W przypadku, gdy chcemy, aby element nie był pokazywany podczas ładowania strony, możemy użyć CSS i ustawić display: none i użyć jQuery .hide (). Jeśli planujemy przełączać element, możemy użyć przełącznika jQuery.

Oba robią to samo we wszystkich przeglądarkach, AFAIK. Zaznaczone w przeglądarce Chrome i Firefox, oba dołączają display:nonedo styleatrybutu elementu.

Widzisz, nie ma różnicy, jeśli używasz podstawowej metody ukrywania. Ale jquery udostępnia różne metody ukrywania, które nadają elementowi efekty. Zobacz poniższe łącze, aby uzyskać szczegółowe wyjaśnienie: Efekty ukrywania w JQuery