JQuery: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 18: | Zeile 18: | ||
=== Typo3 === | === Typo3 === | ||
siehe JavaScript Frameworks nutzen | siehe JavaScript Frameworks nutzen | ||
| + | |||
| + | == Der Beginn == | ||
| + | In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event: | ||
| + | |||
| + | <pre> | ||
| + | $(document).ready(function() { | ||
| + | // do stuff when DOM is ready | ||
| + | }); | ||
| + | </pre> | ||
| + | |||
| + | == Reagieren auf Klick == | ||
| + | <pre> | ||
| + | $(document).ready(function() { | ||
| + | $("a").click(function() { | ||
| + | alert("Hello world!"); | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | </pre> | ||
| + | $("a") | ||
| + | bedeutet Das was jetzt kommt gilt für alle Links | ||
| + | .click() | ||
| + | es soll bei Klick etwas passieren | ||
Version vom 17. März 2011, 11:10 Uhr
Quickstart
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Einbinden
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.
Über Google
Beispiel:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
ui steht für User Interface (Plugins)
Libary auf eigenem Server
Typo3
siehe JavaScript Frameworks nutzen
Der Beginn
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:
$(document).ready(function() {
// do stuff when DOM is ready
});
Reagieren auf Klick
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren