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 einwrapAll(): Alle passenden Elemente mit einem Element umschließen. Die Methode wrap() umschließt alle Elemente einzeln. Beispielsweise umschließt „$(“p“).wrapAll(“
“);“ alle p-Elemente inwrapInner(): 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
