JQuery Kochbuch (German Edition)

gerne wieder vorbei.
    Das nennen wir eine Win-Win-Situation. Viel Spaß beim Kodieren!

Das ist nicht jQuery, sondern JavaScript!
    Problem
    Sie sind ein Web-Designer, der erst neu in jQuery einsteigt und Sie haben ein Problem mit der Syntax einer
if/else
-Anweisung. Sie wissen, dass das Problem eigentlich ganz einfach ist, und bevor Sie auf der jQuery-Mailingliste nachfragen, erledigen Sie zuerst Ihre Hausaufgaben: Sie suchen in der jQuery-Dokumentation und finden – nichts. Suchen im Web nach Begriffen wie jquery if else statement führen da auch nicht weiter.
    Sie müssen zudem eine E-Mail-Adresse in zwei Teile aufteilen, die durch das
@
-Zeichen getrennt sind. Sie haben gehört, dass es eine Funktion gibt, mit der Strings aufgeteilt werden können, aber auch dazu findet sich so gar nichts in der Dokumentation zu jQuery.
    Ist jQuery wirklich so miserabel dokumentiert?
    Lösung
    Die
if/else
-Anweisungund die Methode
.split()
fürStrings gehören zu JavaScript, nicht zu jQuery.
    Daher werden folgende Stichworte bei einer Suche im Web zu nützlicheren Ergebnissen führen:
javascript if else statement
javascript split string
    Diskussion
    Liebe JavaScript-Gurus, verschrecken Sie bitte die Anfänger nicht.
    Liebe Anfänger, lassen Sie sich nicht entmutigen, wenn Sie an dieser Stelle einmal nicht weitergekommen sind.
    Wenn Sie ein alter JavaScript-Fuchs sind, lachen Sie vielleicht über diese Fragen. Aber sie tauchen durchaus regelmäßig auf der Mailingliste von jQuery auf, und das ist auch verständlich. jQuery ist dazu gedacht, die JavaScript-Programmierung einfach zu machen, so dass jemand, der vorher noch nie programmiert hat, darauf aufbauen und seiner Seite nützliche Effekte hinzufügen kann, ohne eine »echte« Programmiersprache erlernen zu müssen.
    Aber jQuery ist JavaScript. jQuery besteht zu 100% aus reinem JavaScript-Code und jede Zeile, die Sie in jQuery schreiben, ist auch eine Zeile in JavaScript.
    Sie können mit jQuery tatsächlich eine ganze Reihe von einfachen Aufgaben erledigen, ohne seine Beziehung zu JavaScript verstehen zu müssen, aber je mehr Sie über die zugrundeliegende Sprache lernen, desto produktiver – und weniger frustrierend – werden Ihre Erfahrungen mit jQuery sein.

Was ist an $(this) falsch?
    Problem
    Sie haben einen Eventhandler, der einem DOM-Element eine Klasse hinzufügt, per
setTimeout()
eine Sekunde wartet und dann diese Klasse wieder entfernt:
$(document).ready( function() {
    $('.clicky').click( function() {
     $(this).addClass('clicked');
     setTimeout( function() {
     $(this).removeClass('clicked');
     }, 1000 );
     });
});
    Beim Klicken wird die Klasse hinzugefügt, aber nie wieder entfernt. Sie haben geprüft, dass der Code innerhalb von
setTimeout()
aufgerufen wird, aber es scheint nichts zu passieren. Sie haben
.removeClass()
schon zuvor genutzt und der betreffende Code sieht korrekt aus. Sie verwenden
$(this)
an beiden Stellen gleich, aber innerhalb von
setTimeout()
scheint er einfach nicht zu funktionieren.
    Lösung
    Sichern Sie
this
in einer Variablen, bevor Sie
setTimeout()
aufrufen:
$(document).ready( function() {
    $('.clicky').click( function() {
     var element = this;
     $(element).addClass('clicked');
     setTimeout( function() {
     $(element).removeClass('clicked');
     }, 1000 );
     });
});
    Da Sie
$()
an beiden Stellen aufrufen, ist es aber noch besser, dem Rat in Überflüssige Wiederholungen vermeiden zu folgen und nicht
this
, sondern
$(this)
in einer Variablen zu speichern:
$(document).ready( function() {
    $('.clicky').click( function() {
     var $element = $(this);
     $element.addClass('clicked');
     setTimeout( function() {
     $element.removeClass('clicked');
     }, 1000 );
     });
});
    Diskussion
    Was ist
$(this)
eigentlich und warum funktioniert es nicht immer? Es ist leichter zu verstehen, wenn Sie sich die beiden Elemente
$()
und
this
getrennt anschauen.
    $()
sieht mysteriös aus, ist es aber in Wirklichkeit gar nicht – es handelt sich schlicht um einen Funktionsaufruf.
$
ist eine Referenz auf die Funktion
jQuery
, daher ist
$()
einfach eine Kurzform von
jQuery()
. Es handelt sich um einen normalen JavaScript-Funktionsaufruf, der ein Objekt zurückgibt.
    ----
    Note
    Wenn Sie eine andere JavaScript-Bibliothek, die
$
selbst definiert, nutzen, ist das etwas anderes – aber dann würden Sie in Ihrem jQuery-Code nicht
$()
nutzen, sondern
jQuery()
oder einen eigenen Alias.
    ----
    this
ist eines der verwirrenden Features in JavaScript, da es für so viele verschiedene