Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery

Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery

JavaScript ist für Webseite eine feine Sache, schließlich lassen sich darüber allerlei interessante Dinge anstellen. Das Problem dabei: Leider machen die Browser nicht immer mit. Will man eine JavaScript-Anwendung so erstellen, dass sie tatsächlich in möglichst vielen Browsern fehlerfrei läuft, braucht man schon einiges an Hintergrundwissen. Nun kann und will sich natürlich nicht jeder dieses Wissen aneignen. Genau an diesem Punkt kommen Frameworks wie jQuery und jQuery mobile ins Spiel. Und eben jenes jQuery mobile wird euch in den nächsten Video-Trainings begegnen.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Wer anspruchsvolle Webseiten (und Apps) erstellen will, kommt um den Einsatz von JavaScript eigentlich nicht herum. Nun beherrscht die JavaScript-Syntax aber natürlich nicht jeder, was vor allem dann gilt, wenn es um die Entwicklung Browser-übergreifender Lösungen geht. Hier helfen dann JavaScript-Frameworks weiter. Eines der populärsten Frameworks ist dabei zweifellos jQuery.

Die offizielle Projektwebseite von jQuery findet ihr unter http://jquery.com/. Von dort könnt ihr das Framework dann auch direkt herunterladen.

Bilder



 
Der Download besteht aus einer JavaScript-Datei. Am besten verwendet ihr die Variante, die sich hinter dem Link Download the compressed, production jQuery 2.x.x versteckt.

Bilder



Um das Framework nutzen zu können, ist nun zunächst einmal nichts anderes nötig, als diese Datei in die betreffende Seite einzubinden. Das geschieht genau so, wie man das von herkömmlichen JavaScript-Dateien gewohnt ist.
<head>
   <script src="js/jquery.js" type="text/javascript"></script>
</head>

Ich gehe in diesem Beispiel davon aus, dass ihr die jQuery-Datei unter dem Namen jquery.js im Verzeichnis js gespeichert habt.

 
Mehr ist tatsächlich nicht nötig, um jQuery verwenden zu können. Und wie es gute Programmiersitte ist, soll ein erstes Beispiel den direkten Einstieg ebnen.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=utf-8" /> 
<title>PSD-Tutorials.de</title>
<meta http-equiv="content-type"content="text/html; charset=utf-8" />
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("a").click(function() {
      alert("Schön, dass Du geklickt hast!");
   });
});
</script>
</head>
<body>
<header>
 <h1>Die PSD-Tutorials.de-App</h1>
</header>
  <h1>Herzlich willkommen</h1>
      <p class="content">Wir freuen uns</p>
  <h1 class="intro">Unsere Tutorials</h1>
      <p class="content">Hier findet Ihr eine Auswahl unserer Tutorials</p>
      <a href="#">Klick mich!</a>
<footer>      
 <p>Copyright by PSD-Tutorials.de</p>
</footer>      
</body>
</html>

 
Was passiert hier? Wird auf den eingefügten Hyperlink geklickt, öffnet sich ein Meldungsfenster.

Bilder



An dieser Stelle soll noch nicht explizit auf die Syntax eingegangen werden. Wichtig ist momentan lediglich, dass zunächst ein sogenanntes ready-Element über $(document).ready(function()) registriert wird. Dadurch wird sichergestellt, dass die entsprechenden DOM-Events zur Verfügung stehen. Anschließend wird der Selektor a angegeben, durch den alle a-Elemente des Dokuments ausgewählt werden. Durch die click()-Funktion weist man im aktuellen Fall jedem Link das Klick-Event zu. Im Dokumentkörper werden auf diese Weise sämtliche a-Elemente, also Hyperlinks, angesprochen.

Das Meldungsfenster selbst wird über die bekannte JavaScript-Methode alert() realisiert. So einfach lässt sich also jQuery nutzen. (Auch wenn man das Framework für solche einfachen Sachen natürlich normalerweise nicht verwendet. Die Funktionsweise ist aber auch bei komplexeren Anwendungen identisch).


 

Selektoren verwenden

Eine der Besonderheiten von jQuery ist der einfache Zugriff auf Elemente eines Dokuments, also einer Webseite. In klassischem JavaScript stehen für einen solchen Zugriff die Methoden getElementbyID(), getElementsByName() und getElementsByTagName() zur Verfügung. Mit diesen Methoden könnt ihr also auf bestimmte Elemente zugreifen. Voraussetzung dafür ist dann allerdings in vielen Fällen der Einsatz von Schleifen. Das ist der Punkt, an dem in jQuery die Selektoren ins Spiel kommen.

Hier mal ein Beispiel dafür, wie eine Schleife aussehen könnte, über die man alle Elemente ermitteln kann, denen die Klasse bilder zugewiesen wurde:
var bilder = document.getElementsByTagName('div');
for (i=0; i<bilder.length; i++) {
   if (/image/.test(bilder[i].className)) {
      ...
   }
}

Das ist sicherlich noch nicht sonderlich aufwendig, zeigt aber doch, dass man einiges an JavaScript-Grundkenntnissen besitzen sollte. Wer nun auf jQuery setzt, kommt deutlich schneller zum Ziel. Eine entsprechende Definition sähe hier nämlich so aus:
$('div.bilder')
Das folgende Beispiel zeigt noch einmal etwas ausführlicher, wie effektiv die Arbeit mit Selektoren in jQuery tatsächlich ist.
$(document).ready(function(){
var input = $("form input:radio").wrap('<span></span>').parent().css({background:"blue"});
   $("div").text("Es wurden " + input.length + " Radioboxen gefunden")
           .css("color", "blue");
   $("form").submit(function () { return false; }); 
});

 
Durch diese Syntax werden sämtliche im Dokument enthaltenen Radioboxen ermittelt.

Bilder



Verwendet wird dafür dieser Selektor:
$("form input:radio")

Das Dokument, das durchlaufen wird, sieht so aus:
<span>
  <form>
    <input type="radio" name="test" />
    <input type="radio" name="test" />
    <input type="radio" name="test" />
  </form>
 </span>
 <div></div>

Ihr seht also, wie einfach man mittels jQuery-Selektoren die gewünschten Elemente im Dokument finden kann.

 
Ein weiteres Beispiel zeigt, wie sich alle in einem Formular enthaltenen und aktivierten Kontrollkästchen ermitteln lassen.

Bilder



Zunächst der jQuery-Teil:
$(document).ready(function(){   
    function jogger() {
      var n = $("input:checked").length;
      $("div").text(n + (n <= 1 ? " is" : " Mal") + " insgesamt");
    }
    jogger();
    $(":checkbox").click(jogger);
  });

 
Der HTML-Part sieht folgendermaßen aus:
Wann gehst Du joggen?
<form>
    Montag: <input type="checkbox" name="montag" checked="checked" value="mo" /><br/>
    Dienstag: <input type="checkbox" name="dienstag" value="di" /><br/>
    Mittwoch: <input type="checkbox" name="mittwoch" value="mi" /><br/>
    Donnerstag: <input type="checkbox" name="donnerstag" checked="checked" value="do" /><br/>
    Freitag: <input type="checkbox" name="freitag" value="fr" /><br/>
    Samstag: <input type="checkbox" name="samstag" value="sa" /><br/>
    Sonntag: <input type="checkbox" name="sonntag" value="so" />
  </form>
  <div></div>

Die Funktion jogger() wird dabei übrigens bei jedem Mausklick ausgeführt, wodurch der Inhalt des div-Bereichs, der sich unterhalb des Formulars befindet, jedes Mal aktualisiert wird.

Bilder



Der Selektor, über den die aktivierten Kontrollkästchen ermittelt werden, heißt übrigens $("input:checked").

Selektoren erkennt ihr in jQuery am vorangestellten Dollarzeichen.
$("div")

Innerhalb der Klammern wird der Elementname erwartet. Dabei muss es sich übrigens nicht zwangsweise um einen HTML-Elementnamen handeln. So etwas hier ist auch möglich:
$("input:checked")

Die folgende Tabelle zeigt einige Selektoren, die man immer mal wieder braucht.
Element Selektor
Alle h1-Elemente $('h1')
Alle div-Elemente $('div')
Alle div-Elemente mit der Klasse blau $('div.blau')
Alle aktivierten Checkboxen $("input:checked")
Alle Textfelder $("input:text")
Alle Passwortfelder $("input:password")
Das erste Element einer ungeordneten Liste $('ul li:first')

 
Ausführliche Informationen zu den jQuery-Selektoren findet ihr vor allem in der Dokumentation auf der Seite http://docs.jquery.com/Selectors.

Bilder



Dort ist dann auch noch einmal deutlich zu erkennen, welche enormen Möglichkeiten euch jQuery auf dem Gebiet des Dokumentzugriffs bietet.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MicroSmurf
  • 13.07.2014 - 17:14

Interessant wie immer. Danke.

Portrait von Kundentest
  • 18.06.2014 - 20:44

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 18.06.2014 - 15:45

Vielen Dank für den 8. Teil. Eine klasse Reihe!

Portrait von johen
  • 18.06.2014 - 14:44

Herzlichen Dank für das gute Tutorial in Textversion.

Portrait von Domingo
  • 18.06.2014 - 12:40

Gut und ausführlich erklärt.

Portrait von renate_C
  • 18.06.2014 - 12:10

Vielen Dank für den weiteren informativen Teil der Reihe und die Datei.

Portrait von Caesarion2004
  • 18.06.2014 - 12:08

Vielen Dank für das interessante Tutorial und die Materialien.

Portrait von Kundentest
  • 14.06.2014 - 17:59

Herzlichen Dank für das Video.

Portrait von Steve007
  • 21.05.2014 - 20:03

Vielen Dank für Dein interessantes Video - Training.

Portrait von renate_C
  • 21.05.2014 - 09:04

Vielen Dank für das sehr informative Tutorial - gerne mehr davon.

Portrait von Caesarion2004
  • 21.05.2014 - 09:00

Vielen Dank für das sehr interessante und verständliche Video und die Materialien.

Portrait von MicroSmurf
  • 21.05.2014 - 08:49

Vielen Dank für diesen Teil.

Portrait von rocking_sid
  • 21.05.2014 - 08:18

Vielen Dank für dieses informative Video-Training!

x
×
×