Von jQuery zu nativem Javascript

querySelector und querySelectorAll

Ein oder mehrere Elemente des DOM auswählen und ihnen neue CSS-Eigenschaften zuweisen – das ist das Brot- und Buttergeschäft für Javascript auf Webseiten. Das Pendant von $() oder jQuery() in Javascript ist querySelector und querySelectorAll. Das ist – zugegeben – mehr Schreibarbeit, mehr aber auch nicht.

$(".block");

wird zu

document.querySelector(".block");

Allerdings würde jQuery Methoden wie $(".block").fadeIn oder $(".block").hide alle Elemente der CSS-Klasse .block anwenden, document.querySelector(".block") nur auf das erste Element. Da haben wir also einen kleinen Fallstrick.

querySelectorAll(".block") gibt eine NodeList mit allen Elementen der Klasse .block zurück und braucht eine Iteration über die NodeList.

$(".block").FadeIn();

wird zu

document.querySelectorAll(".block").forEach(block => { block.FadeIn() });

Einfache jquery Methoden

Die subtilen kleinen jQuery-Methoden gibt es mit dem reinen Javascript nicht. Theoretisch würden eine Erweiterung des Prototyps und etwas CSS reichen.

Element.prototype.show = function(){
	this.classList.remove("hide");
	this.classList.add("show");
};

Element.prototype.hide = function(){
	this.classList.remove("show");
	this.classList.add("hide");
};

Prototyping auf DOM-Elementen ist kritisch, daran sind viele der alten Javascript-Libraries zugrunde gegangen. jQuery hat das durch ein Wrapper-Element umschifft.

CSS zuweisen ohne jQuery

Noch so eine Brot- und Butteraufgabe für Javascript: neues CSS zuweisen. Die Methode .css aus jQuery lässt sich einfach in reines Javascript mit .style übersetzen.

$("h2").css("color", "blue");

document.querySelector ("h2").style = "color: blue";

Das ist allerdings nicht so ganz ohne Tücke und Fallstricke: Wenn das Element bereits ein style-Attribut hat, wird das alte style-Attribut überschrieben.

document.querySelector("h2").style.color = "blue";

elem.style.cssText vermeidet die Falle und kann mehrere Eigenschaften gleichzeitig zuweisen.

document.querySelector("h2").style.cssText += "color: blue; border-bottom: 2px solid green";

Ein Element in einem anderen Element suchen

jQuery sucht mit find() – genial einfach. Das geht aber genauso gut mit querySelector.

let wrapper = $(".block");
wrapper.find (".column");

// ohne jQuery

let wrapper = document.querySelector(".block");
block.querySelector (".column");

Navigation im DOM-Baum

Die praktischen kleinen Methoden prev und next gibt es so nicht im reinen Javascript. Da müssen der querySelector und nextElementSibling / previousElementSibling aushelfen. Aus jQuery parent() wird parentElement in Vanilla Javascript.

$("block").prev();
$("block").next();
$("block").parent();

const block = document.querySelector(".block");
block.nextElementSibling;
block.previousElementSibling;
block.parentElement;

Abhören und Reagieren auf Events

$(".button").click(function(e)      {  /* Click Event */  });
$(".button").mouseenter(function(e) {  /* Click Event */  });
$(document).keyup(function(e)       {  /* Key UP */ });

document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

Web Animation API – Javascript Animationen

Ein würdiger Nachfolger für jQuery-Animationen ist das Web Animation Api. Das sind Animationen mit Javascript, die sich eng an CSS-Transformation und -Keyframe-Animationen anlehnen. Das Web Animation API füllt die Lücken, die wir bei reinen CSS-Animationen sehen:

CSS-Animationen animieren nur das individuelle Element und kennen keine Abhängigkeiten zwischen dem Verhalten der einzelnen Elemente. CSS kann keine Animation einleiten, wenn eine andere Animation beendet ist.

Javascript bietet darüber hinaus eine Vielzahl von Events, die eine Animation starten, pausieren und beenden.