Javascript mit jQuery

jQuery einbinden

Ohne Libraries wie jQuery wäre Javascript bis vor rund zehn, zwölf Jahren noch langatmig und fehlerträchtig durch die Unterschiede zwischen den Browsern gewesen. Schon einfachste Funktionen konnten viele Scriptzeilen erfordern, wo jQuery mit einer Zeile auskam. AJAX, der XMLHttpRequest war schmerzhaft.

jQuery bot ein einheitliches DOM-API, einfache Events, eine kurze Syntax und AJAX mit wenigen Zeilen. jQuery war einfach zu lernen und standard-konform.

<div class="image-frame">
	<img src="brushes.jpg" class="zoom-image" alt="jQuery Beispiel vergrößern">
</div>

$(function () {
	const observer = new IntersectionObserver(function (entries) {
		entries.forEach(function (entry) {

			if (entry.isIntersecting) {
				$(entry.target).addClass('is-visible');
			} else {
				$(entry.target).removeClass('is-visible');
			}

		});
	}, {
		threshold: 0.3   // 30 % sichtbar
	});

	$('.zoom-image').each(function () {
		observer.observe(this);
	});
});

jQuery $() / jquery()

Das Herzstück von jQuery ist das $-Zeichen. Jede $()-Funktion sammelt einen oder mehrere Knoten des DOM-Baums. In der einfachsten Form wird nur ein Ausdruck übergeben – meistens ein CSS-Selektor –, der alle passenden Elemente im Dokument findet.

Mit jQuery wird der Code kürzer und besser lesbar:

$(elem).fadeIn();

$(elem).addClass(className);

$(selector).each(function (i, el){
});

let hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on("click", function(event) {
    hiddenBox.show();
});

$ajax ({
    url: '/my/url',
    success: function (resp) {
       …
    },
    error: function () {
       …
    }
 });

WordPress-Plugins – die letzte große Bastion für jQuery

Ausgerechnet WordPress-Plugins, allen voran WooCommerce, setzen immer noch häufig auf jQuery. Bis WooCommerce mit einer Grundüberholung jQuery als Ballast abwirft, lohnt sich der Blick auf jQuery in solch einer Umgebung.

jQuery agiert auf CSS und dem Document Object Model und eröffnet sich schnell allen, die mit den Grundlagen von CSS und DOM bereits vertraut sind. jQuery wird von https://jquery.com geladen und per script-Tag in das HTML-Dokument eingebunden.

<script src="jQuery-3.6.1.min.js"></script>
<script src="myscript.js"></script>

Dabei muss nur sicher gestellt sein, dass jQuery als erste Skript-Datei eingebunden wird. Was immer noch stabil funktioniert: jQuery vor dem schließenden body-Tag.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="zoom.js"></script>

In WordPress sollte jQuery niemals direkt per <script>-Tag eingebunden werden, sondern immer über das Enqueue-System. WordPress bringt jQuery bereits mit – man muss es nur korrekt in der function.php laden. Das lädt die von WordPress bereitgestellte jQuery-Version, so dass Updates erhalten bleiben.

function mytheme_enqueue_scripts() {
    // jQuery von WordPress laden
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

Fehler beim Laden: jquery.min.map

In Content Management Systemen, die im Backend auf jQuery setzen, kommt es schon mal zu Fehlermeldungen:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.min.map, line 0)

Die jQuery Source Map setzt die minifizierte Version von jQuery in Beziehung zur nicht-minifizierten Version, um das Debuggen einfacher zu machen. jquery-x-x-x.min.js kommt in einer Zeile, so dass Fehlermeldungen (die in vielen Browsern zur die Zeilennummer, nicht aber die Spalte und das Objekt angeben) kaum hilfreich sind.

querySelector und querySelectorAll

Die grundlegenden Arbeiten wie das Selektieren von Elementen, Zuweisen von CSS, Animationen und der Datenaustausch mit dem Server sind mit Vanilla Javascript heute nicht mehr komplizierter, aber reines Javascript ist schneller und leichter.

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() });

XHR mit jQuery

Der XMLHttpRequest – kurz XHR – war ein gutes Jahrzehnt der Gold-Standard für die Kommunikation mit dem Server. Heute ist das JavaScript Fetch API effizienter und eleganter. Aber fetch() verarbeitet keine Cross-Site-Cookies, so dass Cross-Site-Sessions mit fetch nicht ohne weiteres aufgebaut werden können. XHR mit jQuery ist also u.U. noch sinnvoll, wenn jQuery sowieso geladen ist.

const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
  // Hier kommt die Antwort
});
xhr.open('GET', 'url');
xhr.send();

In der einfachsten jQuery-Variante ist keine Erfahrung mit der herkömmlichen Programmierung des XMLHttpRequest mit Vanilla Javascript erforderlich.

Allerdings hat das reine Javascript – das auch als Vanilla-Javascript bezeichnet wird – inzwischen eine ebenso elegante Entsprechung durch Javascript fetch zu bieten und zum Lesen von XML und JSON-Dateien mit fetch ist nicht einmal eine Anwendung auf dem Server erforderlich.