JQuery: Unterschied zwischen den Methoden detach(), hide() und remove()

In diesem Tutorial wird der Unterschied zwischen den drei in der JQuery-Programmierung verwendeten Methoden „detach“, „remove“ und „hide“ anhand einfacher Beispiele erläutert. Wenn Sie Fragen haben, schreiben Sie diese bitte in den Kommentarbereich.

JQuery Detach()-Methode

Die JQuery-Methode detach() hilft beim Entfernen der ausgewählten Elemente, einschließlich aller Text- und untergeordneten Knoten, aus dem DOM. Diese Methode ist mit der Remove-Methode identisch, außer dass sie alle mit den entfernten Elementen verknüpften Daten und Ereignisse behält, auch nachdem sie aus dem DOM (Document Object Model) entfernt wurden. Es speichert alle mit dem Element verknüpften Daten und wird zum erneuten Einfügen der Elementdaten und Ereignishandler verwendet.

JQuery Detach()-Syntax

$(selector).detach();

Es enthält keine Parameter.

Beispiel für JQuery Detach()

<!doctype html>
<head>
<title>JQuery Detach Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Detach Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       $("h3,h4").detach();
      });
   });
</script>
<body>
   <button>Click to remove elements</button>
   <h3>Hello World!!!!!!!</h3>
   <h4>Welcome to JQuery!!!</h4>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(“h3,h4”).detach(); Zeile definiert die detach()-Methode, die alle Elemente aus dem DOM entfernt.
  • Wenn wir das obige Skript ausführen, erscheint eine Schaltfläche im Browser. Wenn wir auf die Schaltfläche klicken, werden alle Elemente aus dem DOM entfernt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

JQuery Detach-Methode

JQuery Remove()-Methode

Die Methode „remove()“ ist dieselbe wie die Methode „detach()“, die die ausgewählten Elemente einschließlich aller Text- und untergeordneten Knoten aus dem DOM entfernt. Allerdings bleiben nicht alle Daten und Ereignisse, die mit entfernten Elementen im Satz übereinstimmender Elemente aus dem DOM verknüpft sind, vollständig erhalten. Es stellt Elementdaten wieder her, nicht seine Ereignishandler. Alle mit Elementen verknüpften Ereignisse und Daten werden entfernt.

JQuery Remove()-Syntax

$(selector).remove();

Es enthält keine Parameter.

Beispiel für JQuery Remove()

<!doctype html>
<head>
<title>JQuery Remove Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Remove Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       $("h3,h4").remove();
      });
   });
</script>
<body>
   <button>Click to remove the elements</button>
   <h3>Hello world!!!</h3>
   <h4>Welcome to JQuery!!!</h4>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(“h3,h4”).remove(); Zeile definiert die Methode „remove()“, die die ausgewählten Elemente aus dem DOM entfernt.
  • Wenn wir das obige Skript ausführen, erscheint eine Schaltfläche im Browser. Wenn wir auf die Schaltfläche klicken, werden alle Elemente aus dem DOM entfernt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

Jquery Remove-Methode

JQuery Hide()-Methode

Die Methode hide() wird verwendet, um Elemente vollständig aus dem DOM auszublenden. Die Elemente werden ohne Animation sofort ausgeblendet. Die Elemente werden nicht angezeigt, sobald der Benutzer die Elemente im DOM ausblendet. Dies entspricht dem Aufruf der CSS-Anzeigeeigenschaft auf „None“. dh .css(‚display‘, ’none‘).

JQuery Hide()-Syntax

$(selector).hide(speed, callback);

Es verfügt über Parameter namens speed, die die Geschwindigkeit des Versteckeffekts angeben und mögliche Werte wie langsam, schnell annehmen können. Callback ist eine Funktion, die nach Abschluss der hide()-Methode ausgeführt werden soll.

Beispiel für JQuery Hide()

<!DOCTYPE html>
<html>
<head>
<title>JQuery Hide Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Hide Method Example</h2>
<script type="text/javascript">
   $(document).ready(function() {
      $("button").click(function() {
        $("button").hide("fast",function(){
          $("#message").text("The button is hidden now!!!");
       });
      });
   });
</script>
<body>
   <p id="message"></p>
   <button>After clicking on this button, it will get hidden.</button>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • Die Zeile $(“button”).hide(“fast”,function()) definiert die Methode hide(), die Elemente vollständig aus dem DOM ausblendet. Es nimmt einen Wert namens „fast“ an, der die Geschwindigkeit des Versteckeffekts definiert und eine Funktion definiert, die nach Abschluss der hide()-Methode ausgeführt werden soll.
  • Wenn wir das obige Skript ausführen, erscheint eine Schaltfläche. Nachdem Sie auf die Schaltfläche geklickt haben, wird diese im DOM ausgeblendet und die angegebene Meldung wird angezeigt, nachdem die Schaltfläche ausgeblendet wurde.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

JQuery-Hide-Methode

HideMethodPicture2

Unterschiede zwischen den Methoden Detach(), Remove() und Hide()

Detach() Remove() Hide()

Es hilft beim Entfernen der ausgewählten Elemente, einschließlich aller Text- und untergeordneten Knoten, aus dem DOM.Es entfernt außerdem eine Reihe übereinstimmender Elemente, einschließlich aller Text- und untergeordneten Knoten, aus dem DOM.Es verbirgt Elemente vollständig aus dem DOM.
Es speichert alle Daten und Ereignisse, die mit ausgewählten Elementen verknüpft sind.Es werden nicht alle Daten und Ereignisse gespeichert, die mit ausgewählten Elementen verknüpft sind.Die übereinstimmenden Elemente werden sofort und ohne Animation ausgeblendet.
Es fügt die Elemente Daten und Ereignishandler wieder ein.Es stellt Elementdaten wieder her, nicht seine Ereignishandler.Die Elemente werden nicht angezeigt, sobald sie im DOM ausgeblendet sind.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen