Hello, world!

Jede ordentliche Einführung in Sachen Programmierung beginnt mit einem "Hallo Welt!"-Beispiel, genau wie diese hier. Im vorherigen Kapitel lernten wir, wie man jQuery in unsere Seite einbindet, damit wir es in voller Größe nutzen können. Bevor Sie eigenen Code schreiben können, brauchen sie noch ein bisschen Wissen darüber wie jQuery funktioniert. Aber um sicherzustellen, dass alles korrekt aufgesetzt ist, und um zu zeigen, wie einfach jQuery ist, beginnen wir hier mit einem kleine Beispiel:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Hier haben wir das div Tag mit der Id "divTest1". Im JavaScript-Code benutzen wir $ als Abkürzung um auf jQuery zuzugreifen. Dann wählen wir alle Elemente mit der id "divTest1" aus (hier ist es nur eins) und setzen seinen Text auf "Hello World!". Vielleicht wissen Sie noch nicht genug über jQuery um zu verstehen wie und warum das funktioniert, aber wenn Sie diese Einführung durcharbeiten, werden alle Einzelheiten allmählich erklärt.

Selbst eine solch einfache Aufgaben wäre um einiges aufwändiger, wenn man sie in einfachem JavaScript ausführen müsste, ohne die Hilfe von jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

Der Code wäre sogar noch länger, wenn unser Element keine Id hätte, sondern z.B. nur ein css-Klasse.

Normally though, you should wait for the document to enter the READY state before you start manipulating its content. The above examples will work in most browsers and likely even work when you do more advanced stuff, but certain tasks may fail if you try to do them before the document is loaded and ready. Fortunately, jQuery makes this very easy as well, as we will see in the next chapter. After that, we will start looking into one of the most important aspects of jQuery, which has already been used in the above example: Selectors.