Unterschied zwischen jQuery .hide () und .css ("display", "none")

Gibt es einen Unterschied zwischen

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

und

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

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

Die displayEigenschaft kann viele mögliche Werte haben, unter denen sind block, inline, inline-blockund viele mehr .

Die .show()Methode setzt es nicht unbedingt auf block, sondern setzt es auf das zurück, was Sie definiert haben (wenn überhaupt).

Im jQuery-Quellcode können Sie sehen, wie sie die displayEigenschaft auf "" (eine leere Zeichenfolge) setzen, um zu überprüfen, was sie vor einer jQuery-Manipulation war: kleiner Link .

Auf der anderen Seite wird versteckt über getan display: none;, so können Sie prüfen .hide()und .css("display", "none")bis zu einem gewissen Punkt gleichwertig.

Es wird empfohlen, Gotchas zu verwenden .show()und .hide()trotzdem zu vermeiden (außerdem sind sie kürzer).

Unterschied zwischen show () und css ({'display': 'block'})

Angenommen, Sie haben dies am Anfang:

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

wenn du anrufst:

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

Sie erhalten:

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

während:

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

tut:

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

Ja, es gibt einen Unterschied.

Unterschied zwischen hide () und css ({'display': 'none'})

wie oben, aber ändern Sie diese in hide () und zeigen Sie ':' none 'an ......

Ein weiterer Unterschied Wenn .hide()aufgerufen wird, wird der Wert der Anzeigeeigenschaft im Datencache von jQuery gespeichert. Wenn er .show()aufgerufen wird, wird der ursprüngliche Anzeigewert wiederhergestellt!

Ja , es gibt einen Unterschied in der Leistung des beide: jQuery('#id').show()langsamer als jQuery('#id').css("display","block")wie in ersterem Fall zusätzliche Arbeit ist zum Abrufen des Anfangszustandes aus dem jquery Cache als Anzeige ein binäres Attribut wird es nicht sein kann getan werden inline, block, none, tableetc. ähnlich ist der Fall mit hide()Methode.

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

kein Unterschied

Ohne Parameter ist die Methode .hide () der einfachste Weg, ein Element auszublenden:

$ ('. target'). hide (); Die übereinstimmenden Elemente werden sofort ohne Animation ausgeblendet. Dies entspricht in etwa dem Aufruf von .css ('display', 'none'), außer dass der Wert der Anzeigeeigenschaft im Datencache von jQuery gespeichert wird, damit die Anzeige später auf ihren ursprünglichen Wert zurückgesetzt werden kann. Wenn ein Element den Anzeigewert Inline hat, dann ausgeblendet und angezeigt wird, wird es erneut inline angezeigt.

Gleiches gilt für die Show

Ja, da gibt es einen Unterschied.

jQuery('#id').css("display","block") setzt immer das Element, das Sie als Block anzeigen möchten.

jQuery('#id').show() will et ist, welcher Anzeigetyp es ursprünglich war, Anzeige: Inline zum Beispiel.

Siehe Jquery Doc

Sie können sich den Quellcode ansehen (hier ist es v1.7.2).

Mit Ausnahme der Animation, die wir einstellen können, bleibt auch der alte Anzeigestil im Gedächtnis (was nicht in allen Fällen blockauch sein inlinekann table-cell, ...).

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

Ohne Parameter ist die .show () -Methode die einfachste Möglichkeit, ein Element anzuzeigen:

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

Die übereinstimmenden Elemente werden sofort ohne Animation angezeigt. Dies entspricht in etwa dem Aufruf von .css ('display', 'block'), mit der Ausnahme, dass die Anzeigeeigenschaft auf den ursprünglichen Wert zurückgesetzt wird. Wenn ein Element den Anzeigewert Inline hat, dann ausgeblendet und angezeigt wird, wird es erneut inline angezeigt.