$
Die $-Methode ist die Kernfunktion in ofa.js, die zum Abrufen und Manipulieren von DOM-Elementinstanzen verwendet wird. Im Folgenden werden die Hauptfunktionen von $ im Detail erläutert:
Instanz eines Elements abrufen
Mit der $-Methode können Sie die erste Elementinstanz auf der Seite abrufen, die mit einem CSS-Selektor übereinstimmt, und sie bearbeiten. Hier ist ein Beispiel:
target 1 text
Im obigen Beispiel haben wir mit dem $-Symbol eine Instanz des Elements mit der id "target1" ausgewählt und durch Setzen der text-Eigenschaft seinen Textinhalt geändert.
Beispiel zum Finden von Unterelementen
Die Instanz besitzt ebenfalls die $-Methode; über die $-Methode der Instanz kann man die erste passende untergeordnete Elementinstanz abrufen.
target
Ich bin target1
Bitte fügen Sie die erhaltene Elementinstanz nicht direkt an anderen Stellen ein, da dies das ursprüngliche Element beeinflussen kann. Wenn Sie eine Kopie erstellen müssen, können Sie die clone-Methode verwenden.
Position 1
I am target1
Position 2
Untergeordnete Elemente innerhalb eines Shadow-Knotens abrufen
Sie können die Instanz über das shadow-Attribut abrufen und dann das gewünschte Element über die $-Methode erhalten:
$('my-component').shadow.$("selector").method(xxx)Direkte Instanziierung von Elementen
Sie können native Elemente direkt als $-Instanzobjekte initialisieren durch:
const ele = document.createElement('div');
const $ele = $(ele);const ele = document.querySelector('#target');
const $ele = $(ele);Auf diese Weise können Sie vorhandene HTML-Elemente bequem in $-Instanzen umwandeln, um die von $ bereitgestellten Funktionen zur Manipulation und Verarbeitung zu nutzen.
Instanz eines Erzeugniselements
Außer, $ kann nicht nur verwendet werden, um vorhandene Elementinstanzen abzurufen, sondern auch um neue Elementinstanzen zu erstellen und sie zur Seite hinzuzufügen.
Generierung über String
Sie können mit der $-Funktion neue Elementinstanzen aus Zeichenketten erstellen, wie unten gezeigt:
target1:
In diesem Beispiel verwenden wir die $-Funktion, um eine neue Elementinstanz mit den angegebenen Stilen und dem Textinhalt zu erstellen und sie in eine bestehende Elementinstanz mit der id „target1“ einzufügen.
Durch Objekte generieren
Sie können auch die $-Funktion verwenden, um neue Elementinstanzen auf objektorientierte Weise zu generieren, wie folgt:
target1:
In diesem Beispiel verwenden wir die $-Funktion, um eine neue Elementinstanz über ein Objekt zu definieren, einschließlich des Tag-Typs, des Textinhalts und der Stilattribute, und fügen sie innerhalb der vorhandenen Elementinstanz mit der id "target1" hinzu.