Anwendungsbeispiele für die Verwendung von jQuery zur Verarbeitung von Seitenelementen_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung von jQuery zur Verarbeitung von Seitenelementen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Seitenelemente können über verschiedene Abfrage- und Änderungsmethoden in der DOM-Programmierung verwaltet werden, was sehr mühsam ist. jQuery bietet eine ganze Reihe von Methoden zur Manipulation von Seitenelementen. Einschließlich Inhalt, Kopieren, Verschieben und Ersetzen von Elementen. Hier sind einige häufig verwendete.

1. Inhalte direkt abrufen und bearbeiten.

In jQuery wird der Inhalt der Seite hauptsächlich über die beiden Methoden html() und text() abgerufen und bearbeitet. Unter diesen entspricht html() dem Abrufen des innerHTML-Attributs des Knotens. Durch Hinzufügen des Parameters html(text) wird innerHtml festgelegt. text() wird verwendet, um den Klartext des Elements abzurufen, und text(content) legt den Klartext fest Text.

Diese beiden Methoden werden manchmal zusammen verwendet. text() wird zum Filtern der Tags auf der Seite verwendet, während html(text) zum Festlegen von innerHtml im Knoten verwendet wird. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$(function() {
var sString = $("p:first").text(); //Klartext abrufen
$("p:last").html(sString);
});

Verwenden Sie die Methode text(), um den Text des ersten P abzurufen, und weisen Sie ihn dann mit der Methode html() dem letzten

zu.

Geniale Verwendung der Methoden text() und html().

Code kopieren Der Code lautet wie folgt:

TextAbsatzshowBeispiel

Ein Klick, zwei Klicks und drei Mausklicks können zum Abrufen und Übertragen von Codes verwendet werden.

2. Elemente verschieben und kopieren

Wenn Sie im normalen DOM ein Element nach einem Element hinzufügen möchten, verwenden Sie normalerweise die Methode appendChild() oder insertBefore() des übergeordneten Elements. In vielen Fällen müssen Sie die Position des Knotens wiederholt ermitteln. Dies ist sehr problematisch. jQuery bietet die Methode append(), mit der einem Element direkt neue Unterelemente hinzugefügt werden können.

Code kopieren Der Code lautet wie folgt:

1122...

3344...

Zusätzlich zum direkten Hinzufügen von HTML-Code kann die Methode append() auch zum Hinzufügen fester Knoten wie
verwendet werden

Code kopieren Der Code lautet wie folgt:

$("p").append($("a") );

Diese Situation ist etwas anders. Wenn das hinzugefügte

das einzige Element ist, wird $("a") an die Rückseite aller untergeordneten Elemente des Elements verschoben, und wenn das Ziel

Mehrere Elemente, dann fügt $("a") jedem P ein untergeordnetes Element in Form einer Kopie hinzu, während es selbst unverändert bleibt. Beispiel: Verwenden Sie die Methode append(), um Elemente zu kopieren und zu verschieben.

Code kopieren Der Code lautet wie folgt:

Link 1
Link 2

Text 1

Text 2

Der obige Code setzt zwei Hyperlinks für append()-Aufrufe. Fügen Sie für den ersten Hyperlink das Ziel $("p") hinzu, das zwei

-Elemente enthält.

Sie können sehen, dass der erste Hyperlink durch Kopieren und der zweite Hyperlink durch Verschieben hinzugefügt wird.

Darüber hinaus wird, wie oben zu sehen ist, das -Tag nach append() auf den Stil des Ziels

angewendet, während sein eigener Stil beibehalten wird. Dies liegt daran, dass append() als Sub-Tag von

hinzufügt und hinter allen Sub-Tag-Knoten (Text) platziert.

Zusätzlich zur append()-Methode stellt jQuery auch die appendTo(target)-Methode bereit, mit der das Zielelement zum untergeordneten Element des angegebenen Ziels hinzugefügt wird. Seine Verwendung und Ergebnisse sind denen von append() völlig ähnlich.

Code kopieren Der Code lautet wie folgt:

$(function() {
$("img:eq(0)").appendTo($("p")); //Mehrere Ziele hinzufügen

$("img:eq(1)").appendTo($("p:eq(0)")); //Das hinzugefügte Ziel ist eindeutig

});

---

Für das erste Foto hat mein Kollege es zu drei P-Tags hinzugefügt, und für das zweite Foto hat er es zu einem P-Element hinzugefügt. Aus den Ausführungsergebnissen können wir ersehen, dass das erste Foto zu den drei hinzugefügt wurde P-Elemente in Form von , während das zweite Bild mobil hinzugefügt wird.

Entsprechend den Methoden append() und appendTo() stellt JQ auch die Methoden prepend() und prependTo() zur Verfügung. Diese beiden Methoden dienen zum Hinzufügen von Elementen vor allen untergeordneten Elementen des Ziels und folgen außerdem: Hinzufügungen kopieren und verschieben grundsätzlich.

Zusätzlich zu den oben genannten vier Methoden bietet Jq auch before(), insertBefore(), after() und insertAfter(), die zum Hinzufügen von Elementen direkt vor oder nach einem Knoten statt als untergeordnetes Element verwendet werden Einfügen.

Before() ist genau das gleiche wie insertBefore(), und after() und insertAfter() sind auch genau das gleiche. Hier nehmen wir after() als Beispiel

Code kopieren Der Code lautet wie folgt:

Link 1
Link 2

Inhalt 1

Inhalt 2

Als Ergebnis der Ausführung des obigen Codes können Sie sehen, dass die Methode after() ebenfalls dem Prinzip des Verschiebens eines einzelnen Ziels und des Kopierens mehrerer Ziele folgt und nicht mehr als untergeordnetes Element hinzugefügt wird. Stattdessen ist es das gleichgeordnete Element, das unmittelbar auf das Zielelement folgt.

3. Elemente löschen.

In der DOM-Programmierung verwenden Sie zum Löschen eines Elements häufig die Methode „removeChild()“ des übergeordneten Elements, und jQuery stellt die Methode „remove()“ zum direkten Löschen des Elements bereit.

Zum Beispiel löscht $("p").remove(); alle p-Element-Tags auf der gesamten Seite.

remove() akzeptiert auch Parameter.

Code kopieren Der Code lautet wie folgt:

Link 1
Link 2

Inhalt 1

Inhalt 2

Im obigen Code verwendet „remove()“ einen Filterselektor und das P-Element, dessen Textinhalt 1 enthält, wird gelöscht.

Obwohl „remove()“ Parameter akzeptieren kann, wird normalerweise empfohlen, das zu löschende Objekt in der Auswahlphase zu bestimmen und es dann mit „remove()“ auf einmal zu löschen. ("p:contains('1')").remove(); Der Effekt ist genau derselbe und der Effekt stimmt mit dem Stil anderer Codes überein.

Wenn Sie im DOM alle untergeordneten Elemente eines Elements löschen möchten, verwenden Sie häufig eine for-Schleife mit hasChildNodes(), um sie zu beurteilen, und verwenden Sie removeChildNode(), um sie einzeln zu löschen. Jquery stellt das leere( bereit. )-Methode zum direkten Löschen aller untergeordneten Elemente.

Code kopieren Der Code lautet wie folgt:

Link 1
Link 2

Inhalt 1

Inhalt 2

4. Elemente klonen.

Im zweiten Abschnitt wird das Kopieren und Verschieben von Elementen erwähnt, dies hängt jedoch von der Anzahl der Ziele ab. Oft hoffen Entwickler, dass der Kopiervorgang auch dann durchgeführt werden kann, wenn nur ein Zielobjekt vorhanden ist.

jQuery stellt die clone()-Methode zur Verfügung, um diese Aufgabe zu erfüllen.

Code kopieren Der Code lautet wie folgt:

---

Die mit der Methode appendTo() im vorherigen Abschnitt erzielten Ergebnisse werden ebenfalls vervollständigt.

Darüber hinaus akzeptiert die Funktion clone() auch ein boolesches Wertobjekt als Parameter. Wenn der Parameter wahr ist, wird zusätzlich zum Klon selbst auch die darin enthaltene Zeitmethode kopiert.

Code kopieren Der Code lautet wie folgt:

Der obige Code klont die Schaltfläche selbst, wenn auf die Schaltfläche geklickt wird, und klont gleichzeitig das Klickereignis. Die geklonte Schaltfläche hat auch die Funktion, sich selbst zu klonen.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.