jQuery Tutorial
Ich schreibe ein kleines jQuery Tutorial mit einigen Beispielen.
Demo 1 Alert Box
Als erstes registrieren wir ein so genanntes “ready Event” für das Document. Dieses geht in jQuery mit der Funktion $(document).ready(function()). Im Code sieht das folgendermaßen aus:
$(document).ready(function() {
//Mach irgendetwas wenn das Dokument geladen ist.
});
Wir wollen nun, das wenn man auf einen Link klickt, eine Messagebox erscheint, mit dem Inhalt Hallo Welt. Dazu schreiben wir folgendes in die Funktion:
$(document).ready(function(){
$("a").click(function(){
alert("Hallo Welt");
});
});
Der komplette HTML Code sieht jetzt folgendermaßen aus:
Demo 1 Alert Box – Anzeigebeispiel: So sieht’s aus
<html>
<head>
<!--jQuery Framework laden (evtl. Pfad anpassen)-->
<script src="jquery.js" type="text/javascript"></script>
<!--Code für Demo 1-->
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("Hallo Welt");
});
});
</script>
</head>
<body>
<!--Zwei Test Links-->
<p><a href="#">Ein Link</a></p>
<p><a href="#">Ein weiterer Link</a></p>
</body>
</html>
Nun schauen wir mal was wir gemacht haben. $(“a”) ist ein jQuery Selector. Mit $(“element”) können verschieden Sachen selektiert werden, auch Klassen $(‘#klasseDesElements’) oder IDs $(‘.idDesElements’). Es kann aber auch kombiniert werden, um z.B. alle Divs mit der Klasse development zu selektieren $(‘div#development’).
In unserem Fall werden alle a Element in dem Dokument selektiert. click() fügt allen ausgewählten Elementen ein Klick Event hinzu. In unseren Fall wird eine ganz normale Javascript Funktion aufgerufen, nämlich alert(“Hallo Welt”);. Nun was passiert jetzt bei dieser Funkion? Alle a-Elemente führen beim klicken darauf, eine Messagebox aus in der steht Hallo Welt. Also genau das was wir wollten.
Geschrieben am 16. Feb, 2009. Kategorie: Tutorials.
Tags: anleitung, javascript, javascript libary, jquery, tutorial, webdevelopment.
