Javascript

JQuery-Grundlagen

24. 06. 2013

Im Folgenden findet sich eine kleine, aber unvollständige, Sammlung von jQuery-Grundlagen. Basis ist die Online-Schulung auf www.tryjquery.com.

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)

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

Related Posts