Advertisement
  1. Web Design
  2. JavaScript

Grundlegender Spickzettel: Konvertieren Sie jQuery in JavaScript

by
Read Time:19 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Obwohl jQuery immer noch eine beliebte JavaScript-Bibliothek ist und einen Platz in der Webentwicklung hat, haben sich native Web-APIs in den letzten Jahren stark weiterentwickelt. Da moderne Browser eine Vielzahl von JavaScript-Funktionen unterstützen, benötigen wir keine Bibliothek von Drittanbietern mehr, um das DOM relativ einfach zu bearbeiten. Infolgedessen haben sich viele Frontend-Entwickler entschlossen, von jQuery auf JavaScript umzusteigen, um die Anzahl der Abhängigkeiten und damit die Ladezeiten der Seiten zu verringern.

Um Ihnen bei der Umstellung zu helfen, finden Sie hier einen Spickzettel für jQuery zu JavaScript, der die JavaScript-Entsprechungen zu den am häufigsten verwendeten jQuery-Funktionen enthält.

jQuery vs. JavaScript

jQuery ist eine JavaScript-Bibliothek, mit der Webentwickler das Dokumentobjektmodell (DOM) manipulieren können, um dynamisch auf Benutzeraktionen und Statusänderungen zu reagieren. Der größte Vorteil besteht darin, dass Sie auf einfache Weise jedes DOM-Element auf der Seite auswählen und Benutzeraktionen hinzufügen können, indem Sie beispielsweise die "Punktnotation" verwenden:

Natives JavaScript ist ausführlicher. Sie können keinem DOM-Element einfach Aktionen hinzufügen. Zuerst müssen Sie es an eine Variable übergeben, dann können Sie verschiedene Aktionen ausführen. So sieht beispielsweise der obige Code in JavaScript aus:

Obwohl JavaScript ausführlicher ist, müssen Sie keine Bibliothek eines Drittanbieters verwenden, da die DOM-API (die Sie mit Ihrem JavaScript-Code aufrufen) in Ihren Webbrowser integriert ist. Infolgedessen haben Sie eine Abhängigkeit weniger und in den meisten Fällen wird Ihre Seite auch schneller geladen als mit jQuery. Sie müssen jedoch selbst beurteilen, ob es sich lohnt, auf natives JavaScript umzusteigen, da Sie mehr Code schreiben müssen, um das gleiche Ergebnis zu erzielen. Der Kompromiss zwischen jQuery und JavaScript besteht also aus mehr benutzerdefiniertem Code im Vergleich zu weniger Abhängigkeiten.

Sehen wir uns nun die 20 am häufigsten verwendeten jQuery-zu-JavaScript-Entsprechungen an.

1. Wählen Sie Elemente

jQuery:

Die Funktion jQuery(), kurz $(), ist die globale Funktion in jQuery, mit der Sie ein beliebiges Element im DOM auswählen können.

Weitere Informationen finden Sie in den Dokumenten zur jQuery-API: jQuery() - globale Funktion

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .querySelectorAll()-Methode

2. Wählen Sie Erstes Element

jQuery:

Weitere Informationen finden Sie in der jQuery-API docs: first()-Methode

JavaScript:

Weitere Informationen finden Sie in der DOM-API-Dokumentation: .querySelector()-Methode

3. Elemente finden

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .find()-Methode

JavaScript:

Sehen Sie Code-Demo:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .querySelector()-Methode, .querySelectorAll()-Methode

4. Wählen Sie Children

jQuery:

Weitere Informationen finden Sie in der jQuery API docs: .children()-Methode

JavaScript:

Sehen Sie Testcode:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .children-Eigenschaft - Denken Sie daran, dass die JavaScript-Version zwar eine Eigenschaft ist, die jQuery-Version jedoch eine Methode in Klammern.

5. Wählen Sie Parent

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .parent()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .parentNode-Eigenschaft

6. Wählen Sie Siblings

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .siblings()-Methode

JavaScript:

Sehen Sie Testdemo:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .parentNode-Eigenschaft, .querySelectorAll() -Methode, :scope-Pseudoklasse (siehe Abschnitt "Direkte untergeordnete Elemente").

7. Wählen Sie Next Sibling

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .next()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .nextElementSibling-Eigenschaft

8. Wählen Sie Vorheriges Sibling 

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .prev()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .previousElementSibling-Eigenschaft

9. Add Class

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .addClass()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft und .add()-Methode

10. Remove Class

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .removeClass()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft, .remove()-Methode

11. Toggle Class

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .toggleClass()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft, .toggle()-Methode

12. Has Class

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .hasClass()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft, .contains()-Methode

13. Attribut abrufen

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .attr()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .getAttribute()-Methode

14. Attribut festlegen

jQuery:

Weitere Informationen finden Sie in den Dokumenten zur jQuery-API: .attr()-Methode (Sie müssen dieselbe .attr()-Methode verwenden, um einen Attributwert abzurufen, jedoch mit zwei Parametern anstelle von einem).

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .setAttribute()-Methode

15. Attribut entfernen

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .removeAttr()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .removeAttribute()-Methode

16. HTML-Inhalt abrufen oder festlegen

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .html()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .innerHTML-Eigenschaft

17. CSS-Eigenschaft abrufen oder festlegen

jQuery:

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .css()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .style-Eigenschaft und CSS-Eigenschaftenreferenz (für die JavaScript-Namen der CSS-Eigenschaften).

18. Element ausblenden

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .hide()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .style-Eigenschaft

19. Element anzeigen

jQuery:

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .show()-Methode

JavaScript:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .style-Eigenschaft

20. Fügen Sie den Ereignis-Listener hinzu

jQuery:

Weitere Informationen finden Sie in der Methode jQuery API docs: .on()-Methode

JavaScript:

Sehen Sie Testcode:

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .addEventListener()-Methode und DOM-Ereignisreferenz

Nächste Schritte

Dieser Spickzettel zu jQuery to JavaScript enthält die wichtigsten Funktionen, die Sie zum Erstellen einer Website benötigen. Wenn Sie sich mit diesen Eigenschaften und Methoden vertraut machen, können Sie von jQuery zu JavaScript springen. Sie müssen jedoch wahrscheinlich mehr wissen, wenn Sie komplexere Funktionen erstellen möchten.

Es gibt zwei weitere Ressourcen, die ich empfehlen würde, um das von Ihnen benötigte jQuery-zu-JavaScript-Äquivalent zu finden: die jQuery-Website, die Sie möglicherweise nicht benötigen, und Jack O’Connors jQuery-zu-JavaScript-Repo auf GitHub.

Obwohl ich die klassische for-Schleife verwendet habe, um querySelectorAll()-Matches zu durchlaufen, bietet Ihnen modernes JavaScript auch andere Optionen - Chris Coyier zeigt einige davon in diesem Artikel über JavaScript-Schleifen.

Das Experimentieren und Erstellen eigener Codefragmente kann auch sehr hilfreich sein, wenn Sie natives JavaScript und die DOM-API in Ihrem täglichen Workflow sicher verwenden möchten.

Weitere Informationen JavaScript mit Tuts+

Wenn Sie gerade erst mit JavaScript beginnen, bringen Sie diese Tuts+ -Kurse in die richtige Richtung:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.