Zwei Muster zur Einführung

jQuery-Plugin-Einbau

Plugins

Scripts zusammenführen

Scroll-To-Klassiker

Ein paar Dinge, die ich regelmässig brauche.

Warnhinweis für Nicht-Grid-fähige


Was ist jQuery?

«JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern.» So stehts auf Wikipedia im ersten Absatz und das reicht auch schon an Grundwissen fürs Erste.

Vielleicht noch kurz anders formuliert: Mit JavaScript kann man HTML und CSS per Mausklick oder durch andere Auslöser verändern, samt Bedingungen abfragen udg.

Ich kann kein JavaScript, n.b.

Jetzt aber

Webdesign kommt heute kaum mehr ohne JavaScript aus und die verlangten Skripte sind meist sehr komplex. Drum oder warum auch immer haben ein paar Nerds jQuery entwickelt und entwickeln es auch laufend weiter. jQuery ist ein JavaScript-Framework/-Grundgerüst, welches uns unzählige Funktionen und Möglichkeiten in vereinfachter Form zur Verfügung stellt und Skripte schreiben relativ einfach macht.

jQuery laden

Um mit jQuery arbeiten zu können, muss man dieses Framwork zuerst in seinen HTML-Head laden. Das jQuery-Framework ist nur eine einzige Datei mit fast 100’000 Zeichen, aber nur 100 KB Gewicht (Text pur halt). Dazu gibts 3 Versionen. Wählt jene, die zu euerm Plugin empfohlen wurde. Ich selbst arbeite ehrlich gesagt immer noch mit den Einer-Versionen – warum auch immer. Es funktioniert.

Variante A: Verknüpfen über eine externe Quelle, ein sogenanntes CDN (Content Distribution Network): code.jquery.com → Wie gesagt, wählt Version 1 und minified (komprimiert).Das könnte dann so aussehen:

<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>"></script>

Variante B: Selbige Datei könnte man auch runterladen und lokal verknüpfen. Kleiner Vorteil: Man braucht nicht ständig online sein, um mit dem Framework zu arbeiten.

<script src="meinescripts/jquery.js"></script>