Różnica między jQuery .hide () i .css („display”, „none”)

Czy jest jakaś różnica między

jQuery('#id').show() and jQuery('#id').css("display","block")

i

jQuery('#id').hide() and jQuery('#id').css("display","none")

jQuery ('# id'). css ("wyświetlacz", "blok")

displayWłaściwość może mieć wiele możliwych wartości, wśród których są block, inline, inline-blockoraz wiele innych .

.show()Metoda nie ustawić go koniecznie block, ale raczej przywraca go do tego, co określono go (jeśli w ogóle).

W kodzie źródłowym jQuery możesz zobaczyć, jak ustawiają displaywłaściwość na „” (pusty ciąg), aby sprawdzić, co to było przed jakąkolwiek manipulacją jQuery: mały link .

Z drugiej strony, ukrywanie odbywa się za pośrednictwem display: none;, więc możesz rozważyć .hide()i .css("display", "none")równoważne z pewnym punktem.

Zaleca się używanie, .show()a .hide()mimo to unikanie wszelkich problemów (plus, są krótsze).

Różnica między show () a css ({'display': 'block'})

Zakładając, że masz to na początku:

<span id="thisElement" style="display: none;">Foo</span>

kiedy zadzwonisz:

$('#thisElement').show();

dostaniesz:

<span id="thisElement" style="">Foo</span>

podczas:

$('#thisElement').css({'display':'block'});

robi:

<span id="thisElement" style="display: block;">Foo</span>

więc tak, jest różnica.

Różnica między hide () a css ({'display': 'none'})

tak samo jak powyżej, ale zmień je na hide () i wyświetl ':' none '......

Inna różnica Gdy .hide()jest wywoływana, wartość właściwości display jest zapisywana w pamięci podręcznej danych jQuery, więc po .show()wywołaniu przywracana jest początkowa wartość wyświetlana!

Tak istnieje różnica w wydajności obu: jQuery('#id').show()jest mniejsza niż jQuery('#id').css("display","block")jak w poprzednim przypadku dodatkowej pracy jest do zrobienia za zdobycie początkowego stanu z pamięci podręcznej jquery jako wyświetlacz nie jest binarny atrybut może być inline, block, none, table, itd podobny tak jest w przypadku hide()metody.

Zobacz: http://jsperf.com/show-vs-addclass

bez różnicy

Bez parametrów metoda .hide () jest najprostszym sposobem ukrycia elementu:

$ ('. target'). hide (); Dopasowane elementy zostaną natychmiast ukryte, bez animacji. Jest to w przybliżeniu równoważne wywołaniu .css ('display', 'none'), z tym wyjątkiem, że wartość właściwości display jest zapisywana w pamięci podręcznej danych jQuery, aby można było później przywrócić wyświetlanie do jego 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.

To samo dotyczy programu

Tak, jest różnica.

jQuery('#id').css("display","block") zawsze ustawi element, który chcesz pokazać jako blok.

jQuery('#id').show() will et będzie odpowiadał początkowemu typowi wyświetlania, na przykład display: inline.

Zobacz dokument Jquery

Możesz rzucić okiem na kod źródłowy (tutaj jest to wersja 1.7.2).

Z wyjątkiem animacji, które możemy ustawić, to również zachować w pamięci stary styl wyświetlania (co nie jest we wszystkich przypadkach block, może to być również inline, table-cell...).

zobacz http://api.jquery.com/show/

Bez parametrów, metoda .show () jest najprostszym sposobem wyświetlenia elementu:

$ ('. target'). show ();

Dopasowane elementy zostaną ujawnione natychmiast, bez animacji. Jest to mniej więcej równoważne wywołaniu .css ('display', 'block'), z tym wyjątkiem, że właściwość display jest przywracana do stanu, w jakim była początkowo. Jeśli element ma wyświetlaną wartość inline, a następnie jest ukryty i pokazany, zostanie ponownie wyświetlony w tekście.