JavaScript - aller Anfang

Zurück: Parameter von Funktionen

jQuery

Eine Bibliothek die sehr viele angenehme Werkzeuge zur Verfügung stellt. Mit ihrer Hilfe ist es nicht notwendig auf Eigenheiten spezieller Browser einzugehen. Einige der Aufgaben, die sie erfüllt, sind:

jQuery Funktion

jQuery deklariert eine Funktion die man für verschiedene Aufgaben verwenden kann.

1 jQuery();

Ein anderer Name für die selbe Funktion ist:

1 $();

Dieser ungewöhnliche Name ist möglich, da es sehr wenig Vorschriften gibt welche Zeichen verwendet werden dürfen (im Gegensatz zu anderen Sprachen).

document ready

JavaScript soll in den meisten Fällen erst ausgeführt werden, wenn die komplette HTML-Seite geladen wurde (document is ready).

Um das zu erreichen gibt man der jQuery-Funktion eine anonyme Funktion (ohne Namen) als Parameter mit. Diese anonyme Funktion wird später von jQuery aufgerufen.

1 jQuery(function() {
2     alert('document is ready'); // wird als zweites aufgerufen
3 });
4 
5 alert('document is not ready'); // wird als erstes aufgerufen

HTML-Elemente abfragen

Gibt man der jQuery-Funktion einen String mit, versucht sie das Element im HTML zu finden. Folgende Syntax ist dafür möglich:

1 jQuery('ul'); // alle unordered lists <ul>
2 jQuery('#logo'); // das HTML-Element mit der ID "logo"
3 jQuery('.nummer'); // alle HTML-Elemente mit der Klasse "nummer"
4 jQuery('ul#kontakte'); // <ul> Element mit ID "kontakte"

So eine Abfrage gibt ein jQuery eigenes Objekt zurück. Diese speziellen Objekte stellen wiederum Funktionen zur Verfügung.

HTML verändern

Hat man ein HTML-Element abgefragt, kann man jetzt mit der jQuery-Funktion append() Daten in dieses Element einfügen.

Übung

Erstelle mit JSFiddle in HTML ein <p>-Element mit einer ID.

1 <p id="meinText"></p>

Finde das HTML-Element mittels einer jQuery-Abfrage und schreibe es in eine Variable.

1 var meinText = $('p#meinText');

Benutze append() um in dieses HTML-Element verschiedene Zeichenketten einzutragen.

1 meinText.append('Hallo');
2 meinText.append(' .... ');
3 meinText.append('Welt!');
Weiter: Verschachtelte Variablen

Inhalt