Im Folgenden findet sich eine kleine, aber unvollständige, Sammlung von jQuery-Grundlagen. Basis ist die Online-Schulung auf www.tryjquery.com.
Inhaltsverzeichnis
Was kann jQuery?
- Elemente im DOM (Document Object Model) finden
- vereinheitlicht unterschiedliches JavaScript der versch. Browser
- HTML ändern
- auf Benutzereingaben reagieren
- Elemente animieren
- mit dem Server kommunizieren
jQuery einbinden
Direkt vor <body> jQuery einbinden (Den letztgültigen Link erhält man unter https://developers.google.com/speed/libraries/devguide#jquery).
Und am besten auch gleich eine Datei, in die man die eigenen jQuery-Funktionen auslagert:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="application.js"></script>
Abfragen, ob Seite komplett geladen
Um mit jQuery auf Elemente zugreifen zu können, muss die ganze Seite geladen sein.
Daher am besten den ganzen jQuery-Code in folgendes Konstrukt packen:
jquery(document).ready(function() {
...
})
Elemente finden und ändern
Grundsätzlich werden die gleichen Selektoren wie bei CSS verwendet:
jquery("p"); = $("p");
jquery("h1"); = $("h1");
$("#container");
$(".artikel");Den Text an allen „h1“ zurück liefern und ändern:
var = $("h1").text();
$("h1").text("Neuer Text");Im DOM suchen
- $(„#destinations li“) -> alle „
- “ (auch Kindeskinder)
- $(„#destinations > li“) -> nur direkte Kinderelemente
- $(„… , …“) -> mehrere Elemente
- li:first, li:last -> erstes bzw. letztes Element
- li:odd, li:even -> ungerade bzw. gerade Elemente
Travesieren
Geht etwas schneller; dabei werden Funktionen verwendet:
- $(„#destinations“).find(„li“) -> alle „li“-Elemente
- .first(„li“) -> erstes
- .last(„li“) -> letztes
- $(„#destinations“).first(„li“).next() -> zweites Element (nächstes Element nach dem ersten)
- .parent() -> Elternelement
- .children(„li“) -> Alle Kinderelemente vom Typ „li“
- prev() -> voriges Element
Mit dem DOM arbeiten
var price = $("<p>€ 15,50</p>");
$(".vacation").before(price);- .before(var) -> davor einfügen
- .after(var) -> danach einfügen
- .preprend(var) -> als 1. Kind einfügen
- .append(var) -> als letztes Kind einfügen
Alternativ funktioniert auch folgende Schreibweise:
- var.insertBefore(„.vacation“);
- var.insertAfter(„.vacation“);
- var.prependTo(„.vacation“);
- var.appendTo(„.vacation“);
Löschen:
- $(„button“).remove();
Klassen ändern:
- .addClass(„highlighted“);
- .removeClass(„highlighted“);
Auf Eingaben reagieren
Eventhandler:
$("button").on("click", function() {
...
});- $(this) -> Objekt, auf das geklickt wurde
- $(this).closest(„.vacation“).append(price) -> geht das DOM hinauf, bis zum nächsten „.vacation“-Objekt
Verbesserter Eventhandler:
$(".vacation").on("click","button",function() {...});…nur Button-Elemente in „.vacation“.
Infos in HTML-Tags speichern und auslesen
<li class="bla" data-price="399.99">* .data("price") -> Liest Wert aus
* .data("price", "150.00") -> Setzt Wert
Quelle
- www.tryjquery.com (bis exkl. Kapitel 4: DOM-Events abhören)
Loading…