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

153

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

benhowdle89
źródło

Odpowiedzi:

208

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.

Stephan Muller
źródło
Problem z używaniem .hide polega na tym, że po przeładowaniu strony element hide nadal wygląda w ciągu 2 sekund
TM
34

.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.

Nick Craver
źródło
13

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;
    }
},
Kolczasty Norman
źródło
12

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.

seedg
źródło
4

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.

Catto
źródło
1

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

Klemen Slavič
źródło
-5

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

nilesh panchal
źródło