(zuletzt bearbeitet )

jQuery Einführung & Crashkurs
Eine Einführung in jQuery, die sich an Leute richtet, die noch nicht oder nur wenig mit jQuery gecodet haben 
Geeignet für: Anfänger

Vorraussetzungen:

  • Gute HTML Kenntnisse
  • Solide CSS Kenntnisse (Selektoren)

(Hilfreich sind auch grundlegende JavaScript Syntax Kenntnisse.)

Themen:

  • Einfügen (selbst oder via CDN)
  • Syntax
  • Selector Engine
  • Events [Basics]
  • HTML auslesen & manipulieren
  • CSS auslesen & manipulieren
  • Effekte [Basics]

- Vorwort
Hi. In diesem Tutorial möchte ich die Grundlagen von jQuery erklären. Wenn ihr euch das Tutorial bis zum Ende durchlest und Sachen ausprobiert, dürftet ihr am Ende ein gutes Grundverständnis haben und jQuery sinnvoll einsetzen können. Wichtig ist, dass ihr selbst viel ausprobiert. ;-)

1. jQuery - Was ist das?
jQuery ist eine JavaScript Bibliothek, die vieles vereinfacht und Funktionen cross-browser kompatibel macht. Ein gutes Beispiel ist das event Modell in Browsern, es gibt zwei Varianten: Die von Microsoft und die von Netscape. Um z.B. die Maus Koordinaten zu verfassen, muss man den Code für beide Modelle schreiben, das ist zusätzliche Arbeit die jQuery einem abnimmt.
jQuery stellt zudem umfasste AJAX und Animationsmethoden bereit.

2. jQuery einfügen
Um jQuery benutzen zu können muss man jQuery einbinden, hier gibt es zwei Möglichkeiten:

a) Downloaden & selbst hosten
http://code.jquery.com/jquery-1.6.2.min.js Diese Seite lokal speichern und auf dem Webspace einfügen.

  1. <script src="jquery.js" type="text/javascript"><!-- src anpassen --></script>

Der Pfad (src) zu jQuery muss natürlich angepasst werden.

b) Bei einem CDN hosten
Diverse Seiten (Google oder Microsoft z.B.) stellen jQuery direkt auf ihrer Seite bereit. Man muss den Code nur noch so einfügen (hier ein Beispiel mit dem Google CDN):

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

CDN: http://de.wikipedia.org/wiki/Content_Distribution_Network
Dies hat mehrere Vorteile:

  • Dadurch, dass viele Seiten den Code via Google einbinden, cachen (speichern) viele Browser den Code und er wird nicht immer geladen -> Schnellere Ladezeiten
  • Die meisten CDNs haben Hochleistungsserver -> Schnellere Ladezeiten
  • Die CDNs laden immer die neuste jQuery Version hoch (wenn man den entsprechenden Link einfügt). Man muss sich nicht selbst darum kümmern, die neuste jQuery Version einzubinden

Um zu Prüfen ob jQuery geladen ist, könnt ihr diesen Code verwenden:

  1. if(typeof(jQuery) !== undefined){
  2.  alert('jQuery wurde geladen');
  3. }

Wenn der alert kommt, habt ihr soweit alles richtig gemacht!


Google AdSense (Werbung)

3. Syntax
"Selektiere etwas, und mache damit etwas"
Am Anfang von jedem jQuery Code steht jQuery. oder $., man kann jQuery auch mit $ abkürzen.

  1. $('#id').hide();
  2. // // Ist das gleiche wie
  3. jQuery('#id').hide();

In die Klammern nach dem $ kommt der Selektor, dazu später mehr. Dahinter kommen Methoden, die auf die selektierten HTML Elemente angewandt werden sollen. Hier zum Beispiel hide(). Es lassen sich beliebig viele Methoden nacheinander auf das Element anwenden

  1. $('#id').hide().html("Hallo").show();
  2. // Ist das gleiche wie
  3. $('#id').hide();
  4. $('#id').html("Hallo");
  5. $('#id').show();

Das Verknüpfen der Methoden wie im ersten oberen Code, nennt man Chaining. Es ist viel performanter als die zweite Möglichkeit, da jQuery die Elemente nur einmal suchen muss! In gutem jQuery Code wird Chaining soviel wie möglich genutzt.

4. Selector Engine
Zum Selektieren von HTML Elementen benutzt jQuery eine Mischung zwischen den CSS Selektoren und XPath (eine W3C Technologie zum Durchsuchen des DOMs). Dazu kommen noch bessere Möglichkeiten zum Filtern der Ergebnisse (die zu umfangreich sind um sie in diesem Crashkurs zu besprechen).

  1. <p><span>Hallo</span></p>

Um span zu selektieren, würde man in CSS so vorgehen:

  1. p span { }

In jQuery sieht es so aus:

  1. $('p span')

Um die Bequemlichkeit von jQuery zu verdeutlichen, dasselbe noch mal in reinem JavaScript:

  1. for(var i = 0; i < document.getElementsByTagName('p').length; i++){
  2.     for(var j = 0; j < document.getElementsByTagName('p')[i].getElementsByTagName('span').length; j++){
  3.         document.getElementsByTagName('p')[i].getElementsByTagName('span')[i] // Hier was gemacht werden soll
  4.     }
  5. }

Hier ein paar weitere Selektoren um die Ähnlichkeit von jQuery zu CSS zu verdeutlichen:

  1. $('#id').hide(); // Versteckt #id
  2. $('p').hide(); // Versteck alle Paragraphen
  3. $('p.class').hide(); // Versteck alle Paragraphen mit der Klasse class
  4. $('p[rel]').hide(); // Versteck alle Paragraphen, die ein rel Attribut haben
  5. $('p, span').hide(); // Versteckt alle Paragraphen und span Tags

(hide() ist eine jQuery Methode, die Elemente versteckt, indem sie die CSS Eigenschaften so verändert: display: none; height: 0; width: 0; opacity: 0; | show() bildet das Gegenstück zu hide())

5. Events [Basics]
jQuery stellt diverse Methoden zum Abfangen von Ereignissen bereit. Die Methoden werden (wie hide oben) auf die Elemente angewandt. Dazu wird eine anonyme function übergeben, die ausgeführt wird, sobald das Ereignis standfindet:

  1. $('p').click(function(){
  2.    $('p').hide(); // Versteck beim Klick auf einen Paragraphen alle Paragraphen
  3. });

Manchmal will man aber nur etwas mit dem Element machen, das angeklickt wurde und nicht mit allen Elemente, die auf das Ereignis warten. Hier hilft das JavaScript Schlüsselwort this, das immer auf das aktuelle Element verweißt:

  1. $('p').click(function(){
  2.    $(this).hide(); // Versteck beim Klick den Paragraphen auf den geklickt wurde
  3. });

(Achtung: this ist ein Schlüsselwort und wird daher nicht in ' ' geschrieben!)
.click is eine Abkürzung für .bind('click'). Folgender Code macht also das gleiche wie der obere:

  1. $('p').bind('click', function(){
  2.    $(this).hide(); // Versteck beim Klick den Paragraphen auf den geklickt wurde
  3. });

Es lassen sich so auch direkt mehrere Events binden:

  1. $('p').bind('click mouseover', function(){
  2.    $(this).hide(); // Versteck den Paragraphen, wenn er angeklickt wird oder wenn man mit der Maus über ihn fährt
  3. });

bind() bindet Elemente statisch, das heißt Elemente, die später mit jQuery hinzugefügt werden (wie das geht erkläre ich später) werden nicht mehr auf die Ereignisse warten. Das lässt sich mit der mächtigeren, aber unperformenteren Methoden live() machen:

  1. $('p').live('click', function(){
  2.    $(this).hide(); // Versteck beim Klick den Paragraphen auf den geklickt wurde |
  3.    // auch dynamisch hinzugefügte Paragraphen
  4. });

(Eine performantere Methode, die das gleiche macht ist delegate(). Diese Methode ist aber zu umfangreich um sie hier zu besprechen.)
Eine Übersicht aller Events findet man hier: http://api.jquery.com/category/events/

6. HTML auslesen & manipulieren
jQuery stellt viele mächtige Methoden bereit um HTML auszulesen oder zu manipulieren.

Damit man HTML oder CSS manipulieren kann, muss man erstmal sicherstellen, dass der DOM richtig geladen wurde. (DOM ist eine Schnittstelle zwischen HTML und Scriptsprachen wie JavaScript). Das geht so:

  1. $(document).ready(function(){
  2. // Was soll gemacht werden
  3. });

Achtung: Beim Auslesen von HTML oder CSS muss man das Element genau bestimmen. Wenn man wie unten den Inhalt von p ausließt, wird jQuery nur den Inhalt des ersten p Tags auslesen!

a). html() und text()
Wenn man den Inhalt eines Elementes auslesen will geht das mit .html():

  1. <p><span>Hallo</span></p>
  1. // Ließt man so in jQuery aus:
  2. $('p').html();
  3. // Gibt folgendes als String zurück: '<span>Hallo</span>'

Manchmal will man aber nur den Text auslesen, ohne jeglichen Tags (wie span oben). Das geht mit der .text() Methode:
(Selbes HTML wie oben)

  1. $('p').text();
  2. // Gibt folgendes als Sting zurück: 'Hallo'

Den Inhalt eines Elementes kann man auch per .html() oder .text() setzen:

  1. $('p').click(function(){
  2. $(this).html("Hallo");
  3. // Beim Klick ändert sich der Inhalt des Paragraphen auf "Hallo"
  4. // Wäre dasselbe wie: $(this).text("Hallo");
  5. });

Setzt man den Inhalt mit .text() werden die HTML Tags escaped, dadurch werden die Tags wie Text behandelt, nicht wie HTML. Wenn man HTML innerhalb eines Tags einsetzen will, nimmt man dafür .html()

b) prepend() und append()
Mit prepend lässt sich Inhalt an den Anfang eines Elementes anhängen:

  1. $('p').prepend("Ein Paragraph: ");

Mit append lässt sich Inhalt am Ende anhängen:

  1. $('p').append('<a href="#">Ein Link</a>');

c) before() und after()
Mit diesen beiden Methoden lässt sich Code vor oder nach einem Element einfügen. Sie funktionieren genau so, wie die oberen Methoden, daher werde ich nicht genauer auf sie eingehen.

d) attr()
Mit dieser Methode lassen sich Attribute von Elementen auslesen und manipulieren.
Wenn man hinter einem Link das Ziel des Links einfügen möchte (wie es ja bei Print optimieren Seiten oft ist), lässt sich das so machen:

  1. $('a').each(function(){ // .each ist eine Methode um alle Elemente durchzugehen. Dies wird bei Attributen oft gebraucht, da die Links ja verschieden href Attribute haben
  2. 	$(this).after($(this).attr('href'));
  3. });

Das Setzen von Attributen sieht so aus:

  1. $('a').attr('href', '#'); // Ändern des href Attributes jeden Links

e) Manipulieren von Klassen
Für das Manipulieren von Klassen stellt jQuery einige weitere Klassen bereit, die ich hier nicht erläutern werde, da diese Einleitung sowieso schon sehr umfangreich ist:

http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
http://api.jquery.com/toggleClass/

7. CSS auslesen & manipulieren
Für das Auslesen und Manipulieren gibt es eine Methode: .css()

Auslesen lassen sich Styles so:

  1. $('#element').css('margin-top');

Eigentlich recht simpel. ;-) Aber man muss beachten, dass man keine Abkürzungen in CSS auslesen kann wie border, background, margin, padding oder font. Man muss die direkte Eigenschaft auslesen, wie hier margin-top!

Das Manipulieren geht so:

  1. $('p').css({
  2.   'color': '#eee',
  3.   'text-decoration': 'underline'
  4. });

Mehrere Styles werden mit einem Komma getrennt! (Hinter der letzten Deklaration also kein Komma).

8. Animationen [Basics]
jQuery stellt diverse Methoden zum Animieren von Elementen bereit. Das Animieren funktioniert, indem die CSS Eigenschaften langsam verändert werden!

Dafür lässt sich zum Beispiel die Methode animate() verwenden:

  1. $('p').click(function(){
  2.    $(this).animate({
  3.    	'text-indent' : '20px'
  4.    });
  5. });

Es lassen sich nur Eigenschaften mit Zahlen als Wert animieren. color: white könnte man also nicht animieren! 
jQuery bietet noch weitere Möglichkeiten zum Animieren. Da dies aber nur eine Einführung sein soll, werde ich auf diese hier nicht mehr eingehen

- Nachwort
Ich hoffe euch hat das Tutorial gefallen. ;-) Über Feedback würde ich mich freuen. | Wer will kann mir ja bei Twitter folgen: @iWebaholic.

Über den Autor:

Andere Beiträge, die auf diesen Beitrag verlinken

12 Kommentare zu "jQuery: Einführung und Crashkurs" RSS Feeds zu diesem Beitrag

3. Juli 2011 22:00 UhrAntworten#
wit
[오전 4:59:27] BPR: das sieht so verschwommen aus
[오전 4:59:45] iWebaholic: ;)
[오전 4:59:59] iWebaholic: Schreibs als kommentar :D
3. Juli 2011 22:16 UhrAntworten#
Chris (Administrator)
Habe es mir zu Herzen genommen. ;)
3. Juli 2011 22:16 UhrAntworten#
Chris hat die Styles geändert. :D Jetzt ist es leserlicher!
4. Juli 2011 14:28 UhrAntworten#
PflanzenFreak
Hallo, echt tolles Tutorial. Allerdings wäre es besser gewesen wenn man die einzelnen Funktionen noch einmal an einem Funktionierenden Beispiel sehen könnte und ausprobieren könnte. Dann würde man auch einfacher wissen wie man es einbindet.

lg
PflanzenFreak
21. Oktober 2011 21:49 UhrAntworten#
Hi, habe mir mal ein paar "jQuery"-Selektoren Beispiele zusammengeschrieben, ggf. hilft dir das in Kombination mit diesem Blog-Post weiter -> http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/

Mfg
Voku
18. Februar 2012 05:37 UhrAntworten#
Bei Schritt 2 fehlen bei undefined die einfachen Anführungszeichen.

Leider wollen bei mir sämtliche Beispiele nicht gehen...
18. Februar 2012 10:56 UhrAntworten#
undefined ist ein Datentyp, würde man "undefined" schreiben wäre das ein String und der typeof Vergleich würde nur funktionieren wenn du Typ unabhängig mit != prüfst. (Wäre aber sehr schlechter Coding Stil).

Hast du jQuery überhaupt richtig eingefügt? Bei allen anderen scheint es ja zu funktionieren. ;)
18. Februar 2012 07:37 UhrAntworten#
Nachdem ich mich jetzt ein bisschen eingearbeitet habe;
ne das geht nicht, da stimmt vorne und hinten nichts...

z.B. muss das Dokument schon von Anfang an integriert sein,

text() und html() geben genausowenig das gleiche aus
wie prepend() und before() das gleiche tun,

und zwar enkodiert nur html() die html-Tags und prepend() setzt den Text INNERHALB dem 1.HTML-Tag, before() VOR dem 1. HTML-Tag.

und das sind nur die wichtigsten Fehler -.-
18. Februar 2012 11:02 UhrAntworten#
Ich schätze du meinst mit "Dokument" den $(document).ready event handler. (Alles andere macht hier ja keinen Sinn). $(document).ready wird nur für DOM Manipulation gebraucht (hättest du den Artikel richtig gelesen wüssest du das auch.), für andere jQuery helper Methoden wird der DOM natürlich nicht gebraucht. $.map um nur ein Beispiel zu nennen.

Ich habe nie gesagt, dass prepend und before das gleiche ausgeben, sondern das sie gleich funktionieren: Man übergibt einen String der dann dynamisch im DOM eingefügt wird. Aus den Namen der Methoden wird der Unterschied doch schon deutlich. Before ist vor einem DOM Node, prepend ist am Anfang des Inhalts anhängen.

Bei html und text hast du recht, aber niemand ist allwissend und soweit ich das sehe ist das auch der einzige wirkliche Fehler im Artikel.
18. Februar 2012 17:43 UhrAntworten#
naja, ein bisschen streng war ich schon (bin ja auch nicht allwissend); der Interpretationsspielraum ist ziemlich hoch.
Die ersten Beispiele klappen nicht, wenn die Snippets nicht mit besagter $(document).ready event vorgeladen werden.
Aber ok ingesamt war es doch nützlich, drum Danke ;)
9. März 2012 13:48 UhrAntworten#
CiMi
Gut gemacht, hat mir geholfen. Vielen Dank!
8. September 2013 21:57 UhrAntworten#
mon
So schön easy! Danke!!!

Jetzt bist du dran: Was denkst du?

Tipps:

  • Du kannst die üblichen HTML-Tags verwenden.
  • Wandle Sonderzeichen wie <, > und & bitte in HTML-Entities (&lt;, &gt; und &amp;) um, wenn du z.B. Quellcode einfügen möchtest.

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.




Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten