Gibt es eine einfache Möglichkeit, JQuery Code in JavaScript umzuwandeln?
Obwohl es viele Ähnlichkeiten zwischen JQuery und JavaScript gibt, bestehen auch verschiedene Unterschiede in ihrer Syntax und Funktionalität. Verstehen Sie zuerst, was der jQuery -Code zu tun versucht. Verwenden Sie dann die alternativen Methoden oder Attribute von Vanille JavaScript.
In diesem Blog werden die Konvertierung des JQuery -Code in JavaScript diskutiert.
So konvertieren Sie JQuery -Code in JavaScript?
Für die Konvertierung von JQuery -Code in JavaScript ist es wichtig zu verstehen, was der Code tut und welche JQuery -Methoden verwendet werden. Verwenden Sie dann die alternativen Methoden in JavaScript, wie z. B. die “$ ()”In JQuery zur Auswahl von Elementen in JavaScript verwendet, um Elemente auszuwählen“dokumentieren.QuerySelector ()" oder "QuerySelectorAll ()„Methoden werden angewendet.
Lassen Sie uns den Konvertierungsprozess mit Hilfe eines Beispiels verstehen.
Beispiel
Hier haben wir einen JQuery -Code, der die Textfarbe ändert und einen erklärenden Text auf einer Schaltfläche Klick anzeigt. Dafür enthält das HTML -Dokument zwei Schaltflächen, Text und ein leeres
Tag, wobei der neue Text auf der Schaltfläche angezeigt wird. Klicken Sie: Klicken Sie auf:
JavaScript -Tutorial
Während der Arbeit mit JQuery ist es obligatorisch, die JQuery -Bibliothek in das Tag des HTML -Dokuments hinzuzufügen:
Im Tag wird der angegebene Code verwendet:
$ (Dokument).Ready (function ()$ ('#mydiv').find ('button: zuerst').klicken (function ()
$ ('.Text').CSS ("Farbe", "Blau");
$ ('#meldung').Text ('Ich bin die erste Schaltfläche, die die Farbe des Textes auf Blau setzt');
);
$ ('#button').nächste().klicken (function ()
$ ('.Text').CSS ("Farbe", "Grün");
$ ('#meldung').text ('Ich bin die zweite Schaltfläche, die die Farbe des Textes auf Grün setzt');
);
);
Im obigen Code
- Verwenden Sie zuerst die “bereit()Funktionen, die ausgeführt wird, wenn das DOM voll geladen ist. Es wird häufig verwendet, um sicherzustellen, dass das DOM vor der Ausführung eines JavaScript -Code.
- Greifen Sie dann mit seiner zugewiesenen ID auf das DIV -Element zu. “$ ('#mydiv')”Und nennen Sie die“finden()Methode, um die erste Schaltfläche zu finden, fügen Sie ein Klickereignis mit der "mit" Anschluss anklicken()Methode, wobei die Farbe des Textes geändert wird und eine Textnachricht unter der Schaltfläche auf der Schaltfläche Klick angezeigt wird.
- Dann haben wir das JQuery verwendet, um den anderen Knopf im DIV zu findennächste()Methode und die gleiche Funktionalität angewendet.
Wie Sie sehen können, dass die Ausgabe eine Textnachricht auf der Schaltfläche anzeigt, die die Arbeit erklärt und gleichzeitig die Farbe des vorhandenen Textes geändert wird:
Nun, hier werden wir den obigen JQuery -Code in JavaScript umwandeln, ohne die Ausgabe zu ändern. Sie können unterschiedliche Ansätze für die Konvertierung verwenden, aber wir werden die JavaScript -Methoden als Alternative zu den JQuery -Methoden verwenden.
Zunächst werden wir mit der “auf die Taste zugreifendokumentieren.QuerySelector ()" Methode:
var button = dokument.QuerySelector ('Taste');Dann eine “anbringen“klicken"Ereignis mit Hilfe der"AddEventListener ()" Methode. Verwenden Sie die Farbe des Textes in JavaScript, um die "Stil”Attribut in jQuery verwenden wir die“CSS ()" Methode. In ähnlicher Weise verwenden Sie für Text die “InnerhtmlEigenschaft in JavaScript, während die “Text()”Methode wird in der JQuery verwendet:
Taste.AddEventListener ('Click', function ()dokumentieren.QuerySelector ('.Text').Stil.color = "blau";
dokumentieren.QuerySelector ('#message').Innerhtml = 'Ich bin die erste Taste, die die Farbe des Textes auf Blau einstellt
);
Für den zweiten Taste werden wir das verwendenNextElementssibling”Attribut in JavaScript, während wir in JQuery die verwendet haben“nächste()" Methode:
Taste.NextElementssibling.AddEventListener ('Click', function ()dokumentieren.QuerySelector ('.Text').Stil.color = "grün";
dokumentieren.QuerySelector ('#message').textContent = 'Ich bin die zweite Schaltfläche, die die Farbe des Textes auf Grün einstellt
);
Ausgang
JQuery Alternative Methoden oder Attribute in JavaScript
In der angegebenen Tabelle können Sie die alternativen Methoden und Attribute der JQuery sehen:
| JQuery | JavaScript | |
|---|---|---|
| Führen Sie eine Funktion aus, wenn das DOM bereit ist | $ (Dokument).Ready (function () // Code… ); | dokumentieren.AddEventListenerm ("DomcontentLode", function () // Code… ); |
| Zur Auswahl der gesamten HTML | $ ("HTML") | dokumentieren.QuerySelector (Selektor) |
| Zur Auswahl des gesamten HTML -Körpers | $ ("Körper") | dokumentieren.Körper |
| Fügen Sie einem HTML -Element eine Klasse hinzu | $ Element.AddClass (Klassenname) | Element.Klasse.add (Klassenname) |
| Entfernen Sie eine Klasse zu einem HTML -Element | $ Element.removeclass (Klassenname) | Element.Klasse.entfernen (Klassenname) |
| Schalten Sie eine Klasse in ein HTML -Element um | $ Element.ToggleClass (Klassenname) | Element.Klasse.Schalter (Klassenname) |
| Überprüfen Sie, ob ein HTML -Element eine Klasse enthält | $ Element.Hasclass (Klassenname) | Element.Klasse.hat (Klassenname) |
| Klicken Sie auf Ereignis | $ (“.Taste").klicken (Funktion (Ereignis) ); | dokumentieren.QuerySelector (“.Taste") .AddEventListener ("Click", (Ereignis) => ); |
| Fügen Sie CSS -Styling hinzu | $ div.CSS (Farbe: „Gelb“) | div.Stil.Farbe = "Gelb" |
| Auswahl aller Elemente | $ ('… .')) | dokumentieren.querySelectorAll (); |
| Wählen Sie das erste Element | .Erste(); | dokumentieren.querySelector (); |
| Elemente finden | .finden(); | dokumentieren.querySelector (); oder dokumentieren.querySelectorAll (); Methode |
| Auswahl des untergeordneten Elements | .Kinder(); | Elternknoten.Kinder; |
| Auswahl des übergeordneten Elements | .Elternteil(); | Knoten.Elternknoten; |
| Wählen Sie Geschwister | .geschwister(); | Knoten.Elternknoten.querySelectorAll („: nicht (#elem)“); |
| Wählen Sie das nächste Geschwister | .nächste(); | Nicht -Dokumenttypenpechildnode. NextElementssibling; |
| Wählen Sie das vorherige Geschwister aus | .pre (); | Nicht -Dokumenttypenpechildnode. Vorheriges Geben; |
| Finden Sie das nächstgelegene passende Element | .am nächsten (); | Element.am nächsten (); |
| Attribut erhalten | .Attr ('Attrenname'); | Element.getAttribute ('attrenname'); |
| Ein neues Kinderelement anhängen | .append ('html-string'); | Knoten.appendChild (); |
| Entfernen Sie alle Kinderknoten | .leer(); | Element.Ersatzkinder (); |
| HTML -Inhalte abrufen oder festlegen | .html (); | Element.Innerhtml; |
| Element ausblenden | .verstecken(); | Elementcssinlinestyle.Stil.display = 'keine'; |
| Element zeigen | .zeigen(); | Elementcssinlinestyle.Stil.display = ”; |
| Event -Listener hinzufügen | .An(); | EventTarget.addEventListener ('event', FunktionName); |
| Event Hörer entfernen | .aus(); | EventTarget.REMEDEVENTLISTENER ('Ereignis', FunktionName); |
| Schleifen Sie durch ein Objekt, ein Array oder eine Sammlung | .jede(); | Nodelist.Prototyp.für jede(); |
Hier geht es darum, JQuery -Code in JavaScript zu konvertieren.
Abschluss
Es gibt keine einfache Möglichkeit für die Konvertierung von JQuery -Code in JavaScript. Sie können einfach die Unterschiede zwischen beiden kennen und die integrierten Vanille-JavaScript-Methoden verwenden, die JQuery-Methoden entsprechen. In diesem Blog wurde die Konvertierung des JQuery -Code in JavaScript besprochen.