jQuery Tutorial 2 – Wie jQuery funktioniert

jQuery Tutorial 2 – Wie jQuery funktioniert

Wie bereits im ersten Teil erwähnt, müssen Sie dem Browser, in dem Ihre Seite nachher angezeigt wird, erst mitteilen, dass jQuery-Erweiterungen laufen sollen. Dies tut man indem man die folgende Zeile in den Head-Bereich des HTML-Codes einfügt:
<script type=’text/javascript‘ src=’EXAKTER PFAD ZUM js-VERZEICHNIS/jquery.js‘></script>
Um die effektvollen jQuery UI-Skripte ebenfalls auf der Seite nutzen zu können, muss ähnlich verfahren werden. •    jQueryUI Bibliothek unter http://www.jqueryui.com herunterladen, entpacken und in das js-Verzeichnis kopieren. •    Entsprechende Verknüpfung mit der UI-Skriptsammlung in den Head-Bereich einfügen: <script type=’text/javascript‘ src=’EXAKTER PFAD ZUM js-VERZEICHNIS/jquery.ui.js‘></script> Die Seite www.jqueryui.com bietet über die Skriptsammlung hinaus noch einen sehr leicht zu bedienenden Konfigurator, mit dem man sich mit ein paar Klicks ganz leicht ein fertiges Skriptpaket erstellen kann. Dieses Tutorial erklärt ab hier den steinigeren Weg, wie man die Skripte anspricht und auf der Seite implementiert. Der Code der Seite, die mit jQuery und jQueryUI aufgerüstet werden, sieht bis jetzt im Grunde so aus:
<html> <head> <title>Meine jQuery-Seite</title> <script type=’text/javascript‘ src=‘../js/jquery.js‘></script> <script type=’text/javascript‘ src=‘../js/jquery.ui.js‘></script> </head> <body> </body> </html>
Bislang weiß der Browser nur, dass er zur Verarbeitung der Befehle, die im Code der Seite vorkommen können, die beiden verknüpften JavaScript-Bibliotheken heranziehen soll. Was allerdings genau passieren soll und wann wurde noch nicht mitgeteilt. Die Funktionsweise der jQuery-Funktionen ist immer ähnlich. Mit einer ID oder einer CSS-Klasse werden die Elemente benannt, auf die der Effekt angewendet werden soll, danach wird der Effekt selbst bezeichnet. Häufig kann man die Gestaltung noch beeinflussen, indem man Übergangseffekte definiert, Farben und Hintergrundbilder benennt etc. Wie das genau funktioniert erkläre ich im dritten Teil anhand einiger Beispiele.