Javascript mit jQuery

jQuery einbinden

Ohne Libraries wie jQuery wäre Javascript vor einigen 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. jQuery ist einfach zu lernen und standard-konform. Wer HTML und CSS entsprechend der Webstandards einsetzt, greift mit wenigen Anweisungen auf häufig benutzte Funktionen von Effekten wie Hide und Show bis zu JSON und AJAX zu.

$('#picture').hover(function() {
	// Beim Hovern vergrößern
	$(this).find('img').css('transform', 'scale(1.5)');
}, function() {
	// Beim Verlassen zurücksetzen
	$(this).find('img').css('transform', 'scale(1)');
});

Bevor die Browser ECMAScript 5 auf breiter Basis unterstützen, hatte jQuery schon viele Lücken in Javascript gefüllt: each, extend, grep, merge, map und trim, hasClass. Allerdings haben Javascript und CSS in den letzten Jahren mit Riesenschritten aufgeholt und jQuery an vielen Stellen auch glatt überholt. Wer ein neues Projekt beginnt und die Ur-Ur-Alt-Browser nicht mitziehen muss, wird den Ladezeiten und der Performance zuliebe besser auf jQuery verzichten.

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.

jQuery und Datenschutz: Download oder CDN

jQuery ist mit rund 90 KB (in der minifizierten Fassung!) keine leichte Kost für die Ladezeit der Seite. Viele Webseiten binden jQuery über ein CDN, ein Content Delivery Network ein. Mit dem Aufruf von jQuery gehen dann auch Daten über den Besucher an den Anbieter des CDN. Es mag ja nur die IP-Adresse des Besuchers sein, ist aber genauso bedenklich in Hinsicht auf Privatsphäre und Datenschutz wie der Einsatz von Google Webfonts. Der Download von jQuery und Einsatz vom eigenen Webspace geht den Bedenken aus dem Weg.

jQuery Javascript Library

Der Clou von jQuery war der genial einfache Zugriff auf die Elemente des Dokuments. Lange bevor das reine Javascript zuverlässig auf querySelector und querySelectorAll setzen konnte, borgte die $-Funktion schon viele Jahre bei den CSS-Selektoren, um Elemente zu filtern.

$( 'img' ).addClass( )
$( '#myid' ).hasClass()
$( '.myclass' ).attr('name')
$( ':odd' ).attr ('name','value')
$( ':not div a' ).remove()
$( ':only-child' ).unwrap()

jQuery Selectors

• Mit der Event-Steuerung von jQuery entfällt in vielen Skripten das lästige Warten auf das Laden des vollständigen Dokuments mit all seinen Stylesheets, Bildern und sonstigen Elementen. Das DOM steht zur Verfügung, sobald das jeweilige Element geladen ist.
• Als Sahnehäupchen gibt es feine Fading-Effekte und subtile Animation mit einer Zeile Javascript.

<script>
$('.searchicon').click ( function () {
   $('.searchicons').animate({top: "+=50"},500, function() {
      $('.searchfield').slideDown( "slow");
   });
});
</script>

Am Ende ist jQuery browser-übergreifend und befreit vom starren Blick auf das Verhalten der verschiedenen Uralt-Browser in den verschiedenen Versionen.

jQuery $() / jquery()

Das Herzstück von jQuery ist die jQuery-Funktion jquery() oder abgekürzt $(). 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 () {
       …
    }
 });

CSS mit jQuery abfragen und ändern

Neben den normalen CSS-Selektoren helfen Kombinationen wie Nachfahren-Selektor (Descendant Selectors), Kind-Selektoren (Child Selectors) und Nachbar-Selektoren (Adjacent Selectors) und verschiedene Filter bei Auswahl der Elemente. Für ein paar schmerzliche Lücken in CSS gibt es Erweiterungen wie :visible, :odd oder :even.

Die Funktion $() gibt ein jQuery-Objekt mit allen Elementen, die zu diesem CSS-Selektor passen, zurück. Ein jQuery-Objekt ähnelt einem Array mit zusätzlichen jQuery-Funktionen.

Den gefundenen Elementen lassen sich z.B. CSS-Stile zuweisen, ändern oder entfernen.

$('#content').width(300);

Setzt die Breite des div-Elements mit id="content" auf 300px

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

Setzt die Farbe aller h2-Elemente auf Blau

$('div.post').css({max-width: 40em, border: 1px dotted gray});

Setzt die maximale Breite von div-Elementen der Klasse post auf 40em und zieht einen gepunkteten Rahmen um jedes div-Element der Klasse post.

Äquivalent zur Zuweisung von Eigenschaften mit jQuery lassen sich die Eigenschaften der Elemente auslesen.

let width = $('div').width();

Die Breite des ersten div-Elementd auf der Seite

let src = $('img.simage').attr('src');

Das src-Attribut des ersten img-Elements mit class="simage"

HTML-Elemente mit jQuery erzeugen

Um HTML-Elemente zu erzeugen, wird eine Zeichenkette mit den HTML-Markup übergeben.

$('<div id="collect"><p>Hallo ihr da!</p></div>').appendTo('body');

fügt das div-Element als erstes Element an das body-Element an. Da der Inhalt des neu erzeugten Elements durch innerhtml realisiert wird, ist diese Methode zwar flexibel, aber auch einschränkend: An das Innere des div-Elements kommt ein Javascript nicht heran, denn innerHTML erzeugt keine DOM-Elemente.

input-Elemente dürfen auf diese Weise nicht ohne type-Attribut erzeugt werden. Und auch das hier funktioniert nicht in IE.

// Does NOT work in IE:
$("<input/>").attr("type", "checkbox");
// Does work in IE:
$("<input type='checkbox'/>");

Navigation durch den DOM-Baum

Für die Navigation durch den DOM-Baum und die Manipulation der Elemente stehen API-Funktionen wie add(), next(), prev() und siblings() zur Verfügung.

Komplexe Projekte – z.B. die Zusammenarbeit mit einem PHP-Backend – werden durch Ajax-Skripte unterstützt.

jQuery Formulare

Aktuellen Wert einer Serie von Radio-Buttons abfragen

<input type="radio" name="foo" value="apfel" /> Apfel
<input type="radio" name="foo" value="birne" /> Birne
<input type="radio" name="foo" value="beere" /> Beere
… 
let theChoice = $('input:radio[name=foo]:checked').val();

Konflikte vermeiden

Wenn neben jQuery noch andere Librarys benutzt werden, kann es zu Konflikten kommen, weil auch andere Librarys das $-Zeichen als Variable benutzen. Einfach eine neue Variable für jQuery definieren:

let $j = jQuery.noConflict();

Anstelle von $('div.simage') heißt der jQuery-Aufruf jetzt

$j("div.simage")

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.

jQuery oder Vanilla Javascript?

Mit neuen Javascript-Funktionen aus ES6 (ECMAScript) und dem Fortschritt von CSS hat das native Javascript Land gewonnen: querySelector, querySelectorAll, classList und fetch und das Web Animation API machen Javascript ähnlich kurz und effizient wie jQuery. CSS ergänzt Javascript mit weichen Animationen durch transition, transform und keyframe-Animationen.

You might not need jQuery

Do you really need jQuery?

10 tips for writing JavaScript without jQuery

Content Management Systeme von WordPress bis Drupal7 (Drupal8 nicht mehr automatisch) hatten jQuery bereits eingebaut. Die CSS-Frameworks wie Bootstrap und Foundation bauen auf jQuery. Mit Rücksicht auf die kleinen Abweichungen zwischen den Browsern ist jQuery die sichere Option.

Trotzdem lohnt sich ein Blick über den Gartenzaun, denn jQuery ist nicht immer eine effiziente und elegante Lösung. Bei aufwändigen Animationen geht jQuery schnell in die Knie und zappelt und stottert schon mal.