HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 70

jQuery Syntax
Nachdem Sie nun erfolgreich die jQuery-Bibliothek mit Ihrem HTML-Dokument ver-
knüpft haben, wird es Zeit für den ersten jQuery-Befehl. Fügen Sie folgende Zeile in
den jQuery-Block ein:
$('h1').append('<button>Klick mich!</button>');
Die Codesyntax von jQuery folgt dabei ebenso wie JavaScript der Punkt-Notation.
Der erste Teil der Zeile $('h1') erzeugt ein jQuery-Objekt. Dieses wählt alle h1 -Ele-
mente in Ihrem Dokument aus. Die Zeichenkette, die Sie in den Klammern überge-
ben, ist dabei praktischerweise identisch mit den in Abschnitt 2.3.2, »Styling mit einer
CSS-Datei«, besprochenen CSS-Selektoren. Sie könnten also auch:
$('#id')
oder
$('.klasse')
angeben, um die entsprechenden Elemente auszuwählen. Selbst komplexe Selekto-
ren wie
$('div.header > h1 strong')
sind möglich.
Nach dem Punkt folgt immer eine jQuery-Funktion, in diesem Fall die .append() -Funk-
tion. Sie fügt an die zuvor selektierten h1 -Elemente einen in den Klammern definier-
ten HTML-Schnipsel an. In diesem Fall einen Button mit dem Text »I love Sharky!«.
Die Funktion bezieht sich also auf alle Elemente, die Sie zuvor mit Ihrem jQuery-
Objekt ausgewählt haben. Wenn Sie beispielsweise in Ihrem Dokument mehrere h1 -
Elemente verwenden, so würde jedem dieser Elemente ein Button angehängt.
Einen Button mit Funktion versehen
Sie haben einen Button an eine Überschrift angefügt. Wenn Sie im Browser darauf kli-
cken, werden Sie feststellen, dass nichts passiert. Der Button ist noch ohne Funktion.
Um dies zu ändern, weisen Sie dem Button eine Funktion zu, die bei einem bestimm-
ten Ereignis ausgeführt wird. Fügen Sie folgenden Code in Ihrem jQuery-Block ein:
$('button').on('click', function(){
window.alert('Sharky ist der Beste!');
});