JQuery-Grundlagenkurs: Einführung in DOM-Operationen in JQuery

Eine Schnittstelle, die unabhängig von Browser, Plattform und Sprache ist. Diese Schnittstelle bietet einfachen Zugriff auf alle Standardkomponenten der Seite.

DOM Core: DOM Core ist nicht ausschließlich auf JavaScript beschränkt, jede Programmiersprache, die DOM unterstützt, kann es verwenden. Seine Verwendung beschränkt sich nicht nur auf die Verarbeitung von Webseiten, sondern kann auch zur Verarbeitung jedes Dokuments verwendet werden, das in einer Auszeichnungssprache wie XML geschrieben ist.

HTML-DOM: Beim Schreiben von Skripten für HTML-Dateien mit JavaScript und DOM gibt es viele Eigenschaften, die für HTML-DOM spezifisch sind.

CSS-DOM: Für CSS-Operationen wird CSS-DOM in JavaScript hauptsächlich zum Abrufen und Festlegen verschiedener Attribute des Stilobjekts verwendet.

 

1. Knoten finden

                                                                                                                                                                                                                                 .

2. Einen Knoten erstellen

Verwenden Sie die Factory-Funktion von JQuery, um einen neuen Knoten zu erstellen: var $newNode = $(“

Hello

3. Knoten einfügen

Fügen Sie den neu erstellten Knoten oder den erworbenen Knoten an der angegebenen Position ein.

„$node.append($newNode)“ hängt das Ende an das Ende jedes passenden Elements an. Beispielsweise fügt „$(“p“).append(“Hello“);“ „Hello“ hinzu.

„$newNode.appendTo($node)“ hängt das neue Element an das Ende jedes passenden Elements an.

„$node.prepend($newNode)“ hängt den Anfang an das Ende jedes übereinstimmenden Elements an. Beispielsweise fügt „$(“p“).prepend(“Hello“);“ am Anfang „Hello“ hinzu.

„$newNode.prependTo($node)“ hängt das neue Element an den Anfang jedes passenden Elements.

„$node.after($newNode)“ fügt nach jedem passenden Element, das einen parallelen Bruder darstellt, Inhalt ein. Beispielsweise fügt „$(“p“).after(“Hello“);“ „Hello“ ein. Sie sind Brüder.

„$newNode.insertAfter($node)“, fügt das neue Element nach jedem passenden Element ein.

„$newNode.before($node)“ fügt Inhalt vor jedem passenden Element ein. Beispiel: „$(“p“).before(“Hallo“);“ fügt „Hallo“ ein. .

„$node.insertBefore($newNode)“, fügt vor jedem passenden Element ein neues Element ein.

Hinweis: Wenn der eingefügte Knoten nicht neu erstellt wird, wird das Einfügen zu einem Verschiebungsvorgang. Daher sollten geklonte Knoten verwendet werden, bevor solche Knoten eingefügt werden.

4. Knoten löschen

Alle passenden Elemente aus dem DOM entfernen. Beispielsweise löscht „$(“p“).remove(“.hello“);“ das p-Element, dessen Klassenattributwert „hello“ ist, sowie alle Elemente darunter.

Alle passenden Elemente aus dem DOM löschen. Beispielsweise löscht „$(“p“).empty();“ alle p-Elemente und alle darunter liegenden Elemente.

5. Knoten kopieren

Das passende DOM-Element klonen. Beispielsweise gibt „$(“p“).clone();“ die geklonte Kopie zurück, weist jedoch kein Verhalten auf. Wenn Sie DOM-Ereignisse gemeinsam klonen möchten, sollten Sie „$(“p“).clone(true);“ verwenden.

6. Knoten ersetzen

Ersetzen Sie alle übereinstimmenden Elemente durch die angegebenen HTML- oder DOM-Elemente. Beispielsweise ersetzt $("p").replaceWith("Paragraph. "); alle p-Elemente durch "Paragraph. ".

 

                                                                ‐‐ ‐ ‐ ‐‐ ‐‐‐‐ Return with replacementWith: $("Paragraph. ").replaceAll("p");.

7. Knoten umschließen

wrap(): Den angegebenen Knoten mit anderen Tags umschließen. Diese Methode ist nützlich, wenn zusätzliches strukturiertes Markup in das Dokument eingefügt werden muss, ohne die Semantik des Originaldokuments zu zerstören. Beispiel: „$(“p“).wrap(“

“);“. Jedes p-Element wird in ein

eingeschlossen.

wrapAll(): Alle passenden Elemente mit einem Element umschließen. Die Methode wrap() umschließt alle Elemente einzeln. Beispielsweise umschließt „$(“p“).wrapAll(“

“);“ alle p-Elemente in

.

wrapInner(): Umschließt den Unterinhalt (einschließlich Textknoten) jedes passenden Elements mit anderen strukturierten Tags. Beispielsweise wird „$(“p“).wrapInner(““);“ von jedem p-Element umschlossen.

8. Attributeinstellung

attr(): Attribute abrufen und Attribute festlegen.

Wenn ein Parameter an diese Methode übergeben wird, wird das angegebene Attribut für ein Element erhalten. Beispielsweise ruft „$(“img“).attr(“src“);“ den src-Attributwert des img-Elements ab.

Wenn zwei Parameter an diese Methode übergeben werden, wird der Wert des angegebenen Attributs für ein Element festgelegt. Beispiel: „$(„img“).attr(“src“, „test.jpg“);“ setzt den src-Attributwert des img-Elements auf test.jsp.

Es gibt viele Methoden in jQuery, bei denen es sich um Funktionen zum Abrufen und Festlegen handelt. Zum Beispiel: attr(), html(), text(), val(), height(), width(), css() usw.

removeAttr(): Entfernt das angegebene Attribut des angegebenen Elements.

9. Stiloperation

Sie können den CSS-Stil über „attr()“ festlegen oder abrufen.

Zusätzliche Stile: addClass(). Beispielsweise fügt „$(“p“).addClass(“selected“);“ allen P-Elementen den Stil „selected“ hinzu.

Stil entfernen: removeClass() --- Alle oder bestimmte Klassen aus übereinstimmenden Elementen entfernen. Beispielsweise löscht „$(“p“).removeClass(“selected“);“ „selected“ in allen P-Elementen.

Stile wechseln: toggleClass() --- Steuert das wiederholte Einschalten von Stilen. Entfernt den Klassennamen, wenn er vorhanden ist, und fügt ihn hinzu, wenn der Klassenname nicht vorhanden ist. Beispiel: „$(“p“).toggleClass(“selected“);“, wenn unter allen P-Elementen der „ausgewählte“ Stil vorhanden ist, löschen Sie den „ausgewählten“ Stil, andernfalls fügen Sie den „ausgewählten“ Stil hinzu.

Bestimmen Sie, ob es einen bestimmten Stil enthält: hasClass() --- Bestimmen Sie, ob das Element eine bestimmte Klasse enthält, und geben Sie true zurück, andernfalls geben Sie false zurück. Beispielsweise bestimmt „$(this).hasClass(“protected“)“, ob der aktuelle Knoten den Stil „protected“ hat.

10. HTML, Text und Wert festlegen oder abrufen

HTML-Inhalt in einem Element lesen und festlegen: html(), diese Methode kann für XHTML verwendet werden. jedoch nicht für XML-Dokumente.

Textinhalt in einem Element lesen und festlegen: text() Diese Methode kann sowohl für XHTML- als auch für XML-Dokumente verwendet werden.

Lesen und legen Sie den Wert eines Elements fest: val() Diese Methode ähnelt dem Value-Attribut in JavaScript. Für Textfelder, Dropdown-Listenfelder und Optionsfeldfelder kann diese Methode den Wert des Elements zurückgeben (Mehrfachauswahlfelder können nur den ersten Wert zurückgeben). Wenn es sich um ein Dropdown-Listenfeld mit Mehrfachauswahl handelt, wird ein Array zurückgegeben, das alle ausgewählten Werte enthält.

11. Häufig verwendete Methoden zum Durchqueren von Knoten

Holen Sie sich eine Sammlung aller untergeordneten Elemente des passenden Elements: children(). Diese Methode berücksichtigt nur untergeordnete Elemente der ersten Ebene und keine untergeordneten Elemente.

Erhalten Sie den Satz von Geschwisterelementen, die unmittelbar auf das passende Element folgen (aber es gibt nur ein Element im Satz): next().

Erhalten Sie die Menge der Geschwisterelemente unmittelbar vor dem passenden Element (aber es gibt nur ein Element in der Menge): prev().

Erhalten Sie alle Geschwisterelemente vor und nach dem passenden Element: siblings().

12. CSS-DOM-Operation

Rufen Sie das Stilattribut des Elements ab und legen Sie es fest: css().

Elementtransparenz abrufen und festlegen: opacity()-Attribut.

Elementhöhe und -breite abrufen und festlegen: height(), width(). Wenn beim Festlegen eines Werts nur Zahlen übergeben werden, ist die Standardeinheit px. Wenn Sie andere Einheiten verwenden müssen, müssen Sie einen String übergeben, z. B. "$("p:first").height("2em")";

ruft die Höhe ab des Elements im aktuellen Fenster Relative Verschiebung: offset(). Das zurückgegebene Objekt enthält zwei Attribute: oben und links. Diese Methode funktioniert nur bei sichtbaren Elementen.

Das obige ist der detaillierte Inhalt vonJQuery-Grundlagenkurs: Einführung in DOM-Operationen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7403

15

Java-Tutorial

1630

14

CakePHP-Tutorial

1358

52

Laravel-Tutorial

1268

25

PHP-Tutorial

1218

29

Mehr anzeigen