Kategorien
jQuery 101 Teil 1
Ahoi,
Daniel und ich arbeiten zwar schon ein kleines Weilchen mit jQuery, dennoch gibt es einige Sachen die wir uns einfach nicht merken können oder vielleicht nicht wollen :O . Deswegen starte ich hier eine kleine jQuery 101 Reihe in der ich die ganzen jQuery Basics vorstellen will angefangen vom Einbinden von jQuery über jQuery-UI bis hin zu Drag’n Drop.
jQuery in eine Website einbinden
Option 1:
Wir laden uns die aktuelle jQuery Version hier herunter.
Wir legen das File nun in htdocs ab am besten man legt noch einen Ordner scripts, js, javascript etc. an um alles ein bisschen geordnet zu haben. Anschließend binden wir das Script einfach in unserem Template oder Layout ein:
<script src="<?= $this->baseUrl()?>/js/jquery-1.4.2.min.js" type="text/javascript"></script>
Option 2:
Ihr nehmt das von Google unter Google AJAX Libraries API gehostete File.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Es kann losgehen oder document.ready()
Nachdem wird nun jQuery erfolgreich eingebunden haben, können wir gleich voll durchstarten das Framework zu benutzen, denn es muss nichts weiter eingestellt werden.
Zunächst sollten wir uns mal die document.ready() Funktion ansehen. Wer kennt das nicht, all diese unschönen Javascript Aufrufe im HTML Markup? alá
<a id="myLink" class="myLink" href="javascript:loadWhatever">click me</a>
oder
<body onload="initMyStuff()">
etc.
Diese Zeiten sind dank jQuery und document.ready() vorbei, denn diese Funktion ermöglicht es alle Eventgesteuerten Javascript Aufrufe in ein File auszulagern, in dem sämtliche Javascript Funktionen nach dem Laden des gesamten DOM Dokuments ausgeführt werden. Wir erstellen also ein neues Javascript File z.B. functions.js und binden es genauso wie jQuery ein. Dieses File hat folgenden Inhalt:
$(document).ready(function(){
alert("Hallo! DOM is feddich");
});
Einmal F5 und wenn alles klappt werdet ihr nach dem Laden der Seite mit einer schönen Meldung begrüßt.
Selektoren
In jQuery kann man auf sehr viele Arten DOM Elemente selektieren, in den meisten Fällen geschieht dies entweder über den id oder class Selektor. Um das zu verdeutlichen werden wir das oben genannte Beispiel mit dem Link nochmal aufgreifen:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<?= $this->baseUrl()?>/javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function doWhatever()
{
alert('Hallo Freundchen');
}
</script>
</head>
<body>
<a href="javascript:doWhatever()">click me</a>
</body>
</html>
Wir werden nun mit Hilfe der document.ready() Funktion und den beiden Selektoren das gleiche Ergebnis außerhalb des Markups erzielen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<?= $this->baseUrl()?>/javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function doWhatever()
{
alert('Hallo Freundchen');
}
$(document).ready(function(){
// Id Selektor
$('#myLink').click(function(){doWhatever();});
// Class Selektor
$('.myLink').click(function(){doWhatever();});
});
</script>
</head>
<body>
<a id="myLink" class="myLink" href="#">click me</a>
</body>
</html>
Wir stellen fest, dass wir die gleichen Selektoren wie in CSS benutzen können und dass wir den Javascript Code aus dem Markup entfernen konnten.
Im nächsten Teil werden wir erfahren was man denn alles so schönes mit den selektierten Elementen anstellen kann 
