andreas-schlapsi.at » AJAX http://www.andreas-schlapsi.at Software-Entwicklung, .NET & Co. Sat, 17 Sep 2011 16:28:51 +0000 en hourly 1 jQuery: Effektvoll ein- und ausblenden http://www.andreas-schlapsi.at/2008/11/09/jquery-effektvoll-ein-und-ausblenden/ http://www.andreas-schlapsi.at/2008/11/09/jquery-effektvoll-ein-und-ausblenden/#comments Sun, 09 Nov 2008 21:49:11 +0000 Andreas Schlapsi http://www.andreas-schlapsi.at/?p=238 Nachdem ich in dieser Serie beschrieben habe, wie Sie mit jQuery DOM-Elemente auswählen und den Dokumentenbaum verändern können, geht es dieses Mal darum, wie Sie mit jQuery DOM-Elemente effektvoll ein- und ausblenden können.

Elemente ein- und ausblenden

Um Elemente ein- bzw. auszublenden, kennt jQuery drei Methoden:

  • show – macht alle selektierten Elemente sichtbar, falls sie nicht sichtbar sind.
  • hide – macht alle selektierten Elemente unsichtbar, falls sie sichtbar sind.
  • toggle – macht alle nicht sichtbaren selektierten Elemente sichtbar und alle sichtbaren selektierten Elemente unsichtbar.

Die Geschwindigkeit eines Effekts angeben

Die Geschwindigkeit, mit der jQuery einen Effekt ausführt, kann mit dem Parameter speed angegeben werden. jQuery interpretiert einen numerischen Wert als die Dauer der Animation in Millisekunden. Als Strings sind die vordefinierten Werte “slow”, “normal” und “fast” gültig. In jQuery 1.2.6 sind diese Werte mit 600 ms, 400 ms und 200 ms definiert.

Die meisten Effektmethoden von jQuery haben einen weiteren optionalen Parameter: callback. Damit kann eine Funktion übergeben werden, die nach Abschluss der Animation aufgerufen wird.

Ein Beispiel zeigt die Methoden show und hide mit verschiedenen Geschwindigkeiten.

Der HTML-Code dieses Beispiels:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>jQuery 04 - Show und Hide</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery_04-1_show_hide.js" type="text/javascript"></script>
    <style type="text/css">
      div { width: 100px; height: 100px; background-color: yellow; border: 1px solid #000; }
    </style>
  </head>
  <body>
    <input id="hideButton" type="button" value="hide" />
    <input id="showButton" type="button" value="show" />
    <div id="div1" style="position: absolute; left: 10px; top: 60px">speed: "slow"</div>
    <div id="div2" style="position: absolute; left: 160px; top: 60px">speed: "normal"</div>
    <div id="div3" style="position: absolute; left: 310px; top: 60px">speed: "fast"</div>
    <div id="div4" style="position: absolute; left: 10px; top: 210px">speed: 600</div>
    <div id="div5" style="position: absolute; left: 160px; top: 210px">speed: 400</div>
    <div id="div6" style="position: absolute; left: 310px; top: 210px">speed: 200</div>
  </body>
</html>

Und hier ist der JavaScript-Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
  $("#hideButton").click(function() {
    $("#div1").hide("slow", function() {
      $("#div2").hide("normal", function() {
        $("#div3").hide("fast");
      });
    });
    $("#div4").hide(600, function() {
      $("#div5").hide(400, function() {
        $("#div6").hide(200);
      });
    });
  });
  $("#showButton").click(function() {
    $("#div1").show("slow");
    $("#div2").show("normal");
    $("#div3").show("fast");
    $("#div4").show(600);
    $("#div5").show(400);
    $("#div6").show(200);
  });
});

Fade-In und Fade-Out

Um Elemente mit Fade-In und Fade-Out ein- und auszublenden, kennt jQuery die Methoden fadeIn und fadeOut. Verwendet werden sie wie show und hide, wie im folgenden Beispiel zu sehen ist:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
  $("#hideButton").click(function() {
    $("#div1").fadeOut("slow", function() {
      $("#div2").fadeOut("normal", function() {
        $("#div3").fadeOut("fast");
      });
    });
    $("#div4").fadeOut(600, function() {
      $("#div5").fadeOut(400, function() {
        $("#div6").fadeOut(200);
      });
    });
  });
  $("#showButton").click(function() {
    $("#div1").fadeIn("slow");
    $("#div2").fadeIn("normal");
    $("#div3").fadeIn("fast");
    $("#div4").fadeIn(600);
    $("#div5").fadeIn(400);
    $("#div6").fadeIn(200);
  });
});

Eine weitere interessante Methode ist fadeTo, bei der der Zielwert für die Transparenz mit dem Parameter opacity angegeben werden kann. Mehr Informationen gibt’s in der jQuery-Dokumentation.

Slide-Effekt

Die zwei Methoden slideDown und slideUp funktionieren wie die bisher beschriebenen Methoden, wie folgendes Beispiel zeigt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
  $("#hideButton").click(function() {
    $("#div1").slideUp("slow", function() {
      $("#div2").slideUp("normal", function() {
        $("#div3").slideUp("fast");
      });
    });
    $("#div4").slideUp(600, function() {
      $("#div5").slideUp(400, function() {
        $("#div6").slideUp(200);
      });
    });
  });
  $("#showButton").click(function() {
    $("#div1").slideDown("slow");
    $("#div2").slideDown("normal");
    $("#div3").slideDown("fast");
    $("#div4").slideDown(600);
    $("#div5").slideDown(400);
    $("#div6").slideDown(200);
  });
});

Die Methode slideToggle funktioniert so wie slideDown und slideUp abhängig davon, ob das Zielelement sichtbar ist oder nicht. Mehr Informationen gibt es wieder in der jQuery-Dokumentation.

]]> http://www.andreas-schlapsi.at/2008/11/09/jquery-effektvoll-ein-und-ausblenden/feed/ 7 jQuery: Den Dokumentenbaum manipulieren http://www.andreas-schlapsi.at/2008/10/30/jquery-den-dokumentenbaum-manipulieren/ http://www.andreas-schlapsi.at/2008/10/30/jquery-den-dokumentenbaum-manipulieren/#comments Thu, 30 Oct 2008 06:22:21 +0000 Andreas Schlapsi http://www.andreas-schlapsi.at/?p=111 Letztes Mal ging’s darum, wie man DOM-Elemente in jQuery auswählen kann. Dieses Mal werfen wir einen Blick darauf, wie man den Dokumentenbaum ändern kann.

In den letzten Folgen haben wir bereits einige Methoden kennengelernt:

  • text – ändert den Textinhalt eines Elements.
  • toggle – macht ein Element sichtbar, wenn es zuvor unsichtbar war, und umgekehrt.

Inhalte einfügen

Die Methoden zur Änderung der Inhalte (html und text) haben wir bereits in den letzten Folgen kennengelernt. Viel mehr Methoden gibt es, um neue Inhalte in den Dokumentenbaum einzufügen. In der jQuery-Dokumentation findet man Details über die Methoden zur Manipulation des Dokumentbaumes.

Dieses Beispiel (in neuem Fenster) demonstriert das Kopieren von Elementen von einem Quell- in einen Zielbereich. Der JavaScript-Code dafür sieht so aus:

1
2
3
4
5
6

$(document).ready(function() {
  $("#changeButton").click(function() {
    $(".target").empty();
    $(".source").appendTo(".target");
  });
});

Die Methode empty löscht alle Kindelemente der ausgewählten Elemente. In unserem Fall sind das alle Elemente, die mit der CSS-Klasse “target” ausgezeichnet wurden. In Zeile 4 wird der Inhalt aller Elemente mit der CSS-Klasse “source” verkettet und in alle Elemente mit der CSS-Klasse “target” eingefügt.

Subelemente ersetzen

Im nächsten Beispiel (in neuem Fenster) wird der Button durch ein DIV-Element ausgetauscht. Der JavaScript-Code sieht folgendermaßen aus:

1
2
3
4
5

$(document).ready(function() {
  $("#replacingButton").click(function() {
    $(this).replaceWith("<div>Hello, world!</div>");
  });
});

Subelemente löschen

Weiter oben hatten wir bereits ein Beispiel, in dem mit empty() alle Subelemente gelöscht wurden. Mit der Methode remove werden alle selektierten Elemente aus dem Dokumentenbaum entfernt. Die Objekte bleiben erhalten und selektiert, d.h. man kann die entfernten Elemente noch in verketteten Methodenaufrufen verwenden. Im obigen Beispiel haben wir Elemente kopiert. Ich habe das Beispiel ein wenig modifiziert, um die Elemente nicht nur zu kopieren, sondern zu verschieben:

1
2
3
4
5
6

$(document).ready(function() {
  $("#changeButton").click(function() {
    $(".target").empty();
    $(".source").remove().appendTo(".target");
  });
});

Elemente klonen

Die Methode clone() erstellt einen Klon der ausgewählten Elemente und selektiert die Klons für weitere Methodenaufrufe. Ein optionaler Parameter vom Typ bool gibt an, ob Eventhandler ebenfalls geklont werden sollen. Der voreingestellte Wert ist false.

Ich habe das obige Beispiel ein weiteres Mal modifiziert (in neuem Fenster):

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
  $("#changeButton").click(function() {
    $(".source")
        .clone()
	.removeClass("source")
	.addClass("target")
	.appendTo("body");
  });
});

Zuerst werden alle Elemente mit der CSS-Klasse “source” selektiert und geklont. Der Wert des Attributs class aller Klone wird so modifiziert, dass die Klasse “source” nicht mehr vorhanden ist (Methode removeClass()) und die Klasse “target” hinzugefügt wird (Methode addClass()). Die Methode appendTo fügt dann die Klone in das body-Element ein.

Mehr Details zu den Methoden addClass() und removeClass() gibt’s in der jQuery-Dokumentation.

Weitere Methoden

jQuery kennt natürlich noch mehr Methoden, die den Dokumentenbaum manipulieren. Die jQuery-Dokumentation enthält Details dazu.

Zusammenfassung

jQuery bietet jede Menge Methoden an, um den Dokumentenbaum zu manipulieren. Inhalte können geändert, eingefügt, gelöscht, ersetzt und kopiert werden.

In der nächsten Folge werde ich mich mit den in jQuery eingebauten Effekten beschäftigen.

]]> http://www.andreas-schlapsi.at/2008/10/30/jquery-den-dokumentenbaum-manipulieren/feed/ 0 Intellisense für jQuery in Visual Studio 2008 http://www.andreas-schlapsi.at/2008/10/27/intellisense-fur-jquery-in-visual-studio-2008/ http://www.andreas-schlapsi.at/2008/10/27/intellisense-fur-jquery-in-visual-studio-2008/#comments Mon, 27 Oct 2008 21:32:35 +0000 Andreas Schlapsi http://www.andreas-schlapsi.at/?p=145 Bertrand Le Roy hat heute bekanntgegeben, dass die Intellisense-Dokumentationsdateien für jQuery in Visual Studio 2008 von der jQuery-Homepage heruntergeladen werden kann. Tatsächlich gibt es einen Download-Link, der als Dokumentationsdatei für Visual Studio bezeichnet wird.

In der Datei jquery-1.2.6-vsdoc.js befindet sich der jQuery-Quellcode mit XML-Kommentaren. Sie sollten diese jQuery-Variante nur zum Entwickeln verwenden. Bertrand Le Roy schlägt vor, die Datei vorerst nur in einem Server-Codeblock (if (false)) einzubinden. Das ASP.NET AJAX-Team arbeitet an einer besseren Lösung.

]]> http://www.andreas-schlapsi.at/2008/10/27/intellisense-fur-jquery-in-visual-studio-2008/feed/ 0 jQuery: DOM-Elemente auswählen http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/ http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/#comments Thu, 09 Oct 2008 22:46:12 +0000 Andreas Schlapsi http://www.andreas-schlapsi.at/?p=31 Im letzten Beitrag „Ein erster Blick auf jQuery“ haben wir uns die Grundlagen von jQuery angesehen. Diesmal sehen wir uns an, wie wir mit jQuery DOM-Elemente selektieren können.

Selektoren

Eine JavaScript-Applikation ändert die GUI, indem sie den Dokumentenbaum manipuliert. Das DOM bietet dafür die Methoden getElementById, getElementsByName oder getElementsByTagName. Mit jQuery geht’s einfacher.

Zwei weitere Sprachen müssen häufig im Dokumentenbaum navigieren: CSS und XPath. CSS- und XPath-Kenntnisse setze ich voraus.

Sehen wir uns einmal ein Beispiel an. Angenommen irgendwo in einem Dokument befindet sich folgendes Code-Schnipsel: 

<div id="MenuItem">Datei</div>

Das DIV-Element findet man mit dem DOM-API mit folgendem Code: 

var element = document.getElementById('MenuItem');

Die Voraussetzung dafür ist, dass das gesuchte Element ein ID-Attribut besitzt. Mit CSS setzt man die Vordergrundfarbe des Elements so: 

#MenuItem { color: #fe4578; }

Dabei ist „#MenuItem“ der CSS-Selektor. Mit jQuery kann man CSS-Selektoren für die Navigation im Dokumentenbaum verwenden: 

$("#MenuItem").click(function() {
    ...
});

Dem $-Zeichen sind wir schon in der letzten Folge begegnet. Es handelt sich dabei um einen Alias für die Funktion jQuery. jQuery akzeptiert entweder ein DOM-Element oder einen Selektor als Argument.

Mehrere Elemente gleichzeitig manipulieren

Bisher haben wir immer nur ein DOM-Element bearbeitet. Doch was macht folgendes Code-Schnipsel? 

$(".clickable").click(function() {
    ...
});

Der Selektor „.clickable“ wählt alle Elemente mit der CSS-Klasse „clickable“ und registriert darauf einen Click-Eventhandler. Mit jQuery können Sie also mehrere Elemente gleichzeitig bearbeiten.

Methoden-Verkettung

Der Rückgabewert jeder jQuery-Methode ist das jQuery-Objekt selbst. Daher können Methoden-Aufrufe verkettet werden. 

$("p").css("color", "#800000").addClass("paragraph").click(function() {
    ...
});

In diesem Beispiel setzen wir die Vordergrundfarbe aller P-Elemente auf rot, fügen allen P-Elementen die CSS-Klasse „paragraph“ hinzu und registrieren auf allen P-Elementen einen Click-Eventhandler.

In diesem Beispiel sind wir zwei neuen Methoden begegnet: css und addClass. css setzt eine oder mehrere CSS-Eigenschaften. Mehrere CSS-Eigenschaften können so angegeben werden: 

$("p").css({
    "color": "#800000",
    "background-color": "#000000",
    "text-weight": "bold"
});

addClass fügt eine CSS-Klasse hinzu.

Auswahl erweitern und einschränken

jQuery hat einige Methoden, die die Auswahl der DOM-Elemente erweitern oder einschränken. In Verbindung mit der Methodenverkettung ergeben sich daraus interessante Möglichkeiten.

Wenn Sie das folgende Beispiel starten, können Sie die Text aus- und einblenden, indem Sie auf die entsprechende Links klicken.

Beispiel starten (in neuem Fenster)

Hier ist der Source-Code des Beispiels: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>jQuery Sample</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
  </head>
  <body>
    <div>
      <a href="#" class="activateLink">Text 1</a>
      <div>
        Erster Text
      </div>
    </div>
    <div>
      <a href="#" class="activateLink">Text 2</a>
      <div>
        Zweiter Text
      </div>
    </div>
  </body>
</html>

Der JavaScript-Code für dieses Beispiel ist nur fünf Zeilen lang: 

1
2
3
4
5

$(document).ready(function() {
  $("a.activateLink").click(function() {
    $(this).next("div").toggle();
  });
});

Der Click-Eventhandler sucht ein DIV-Element, das dem geklickten Link unmittelbar folgt, und ändert dessen Sichtbarkeit.

Die Methode filter

Beispiel starten (in neuem Fenster)

Hier ist der HTML-Sourcecode: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>jQuery 02 - Filter Methods</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery_02_filter_methods.js" type="text/javascript"></script>
  </head>
  <body>
    <ul>
      <li><a href="http://www.andreas-schlapsi.com" class="external_link">Link 1</a></li>
      <li><a href="http://www.jquery.com" class="external_link">Link 2</a></li>
      <li><a href="http://ui.jquery.com" class="external_link">Link 3</a></li>
    </ul>
    <ul>
      <li><a href="#" class="message_link">Erste Nachricht</a></li>
      <li><a href="#" class="message_link">Zweite Nachricht</a></li>
    </ul>
    <div id="MessageLabel" style="border: 1px solid #000; background-color: #eee; padding: 1em;">
    </div>
    <ul>
      <li><a href="http://www.google.com">Ein normaler Link</a></li>
    </ul>
  </body>
</html>

Und hier der JavaScript-Code: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
  $("a")
    .filter(".external_link")
      .click(function() {
        alert("Sie verlassen die Seite.");
      })
    .end()
    .filter(".message_link")
      .click(function() {
        $("#MessageLabel").text($(this).text());
        return false;
      })
    .end();
});

Das Beispiel filtert aus den selektierten Linkelementen jene heraus, die die Klasse „.external_link“ haben und registriert darauf einen Click-Eventhandler, der eine Messagebox anzeigt. Die Methode end hebt die Filterung wieder auf. Auf allen Linkelementen mit der Klasse „.message_link“ wird ein anderer Click-Eventhandler registriert, der den Textinhalt des geklickten Links in das DIV-Element mit der ID „MessageLabel“ kopiert. Die Methode text ohne Parameter liest den Textinhalt aus, statt ihn zu setzen.

Beachten Sie, dass der zweite Click-Eventhandler false zurückgibt. Bei einem Click-Eventhandler wird dadurch die Ereignisbehandlung abgebrochen, d.h. dass der Browser dem Link, der im Attribut href angegeben ist, nicht folgt.

jQuery-Dokumentation

Folgende Links auf die jQuery-Dokumentation enthalten detailliertere Informationen zu den Themen dieses Artikels:

Zusammenfassung

Dieses Mal haben wir gesehen, wie wir mit Selektoren ein oder mehrere DOM-Elemente finden und bearbeiten können. Die jQuery-Methoden geben das jQuery-Objekt zurück und können daher verkettet werden. Einige Methoden schränken die Auswahl ein oder erweitern diese.

In der nächsten Folge dieser Serie geht es um DOM-Manipulation und Effekte.

]]> http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/feed/ 2 Ein erster Blick auf jQuery http://www.andreas-schlapsi.at/2008/10/08/ein-erster-blick-auf-jquery/ http://www.andreas-schlapsi.at/2008/10/08/ein-erster-blick-auf-jquery/#comments Wed, 08 Oct 2008 21:55:34 +0000 Andreas Schlapsi http://www.andreas-schlapsi.at/?p=28 Scott Guthrie und John Resig kündigten Ende September an, dass die nächste Version von Visual Studio die JavaScript-Library jQuery enthalten wird. Die Entwicklungsumgebung wird Intellisense für jQuery-Methoden bieten und die jQuery-Hilfe in das Hilfesystem integriert sein. Grund genug, um einen ersten Blick auf die JavaScript-Library zu werfen.

Dieser Artikel ist der Beginn einer Blogserie, mit der ich die Grundlagen von jQuery vorstellen möchte. In dieser Folge sehen wir uns ein einfaches jQuery-Script an.

Hello, world!

Um mit jQuery experimentieren und entwickeln zu können, laden Sie die JavaScript-Library von der Homepage runter. Das Beispiel wurde mit Version 1.2.6 entwickelt und getestet. Es gibt drei Varianten für den Download:

  1. Uncompressed - enthält den originalen JavaScript-Code mit Kommentaren und Whitespace.
  2. Packed - ist die kleinste Datei. Am Client wird aber JavaScript-Code ausgeführt, um den eigentlichen jQuery-Code zu entpacken, weshalb die Performance am schlechtesten ist.
  3. Minified - enthält den originalen JavaScript-Code ohne Kommentare und Whitespace. Diese Variante wird für Produktionssysteme empfohlen.

Für unser erstes Beispiel kopieren Sie die heruntergeladene Datei unter dem Namen „jquery.js“ in ein beliebiges Verzeichnis, in dem Sie auch eine neue HTML-Datei mit folgendem Inhalt anlegen: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>jQuery Sample</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#Label").click(function() {
          $(this).text("Hello, world!");
        });
      });
    </script>
  </head>
  <body>
    <div id="Label" style="border: 1px solid #000;">
      This is a test.
    </div>
  </body>
</html>

Wenn Sie die Datei öffnen, zeigt der Browser den Text „This is a test.“ an. Wenn Sie darauf klicken, tauscht der JavaScript-Code den Text gegen „Hello, world!“ aus.

Der Startpunkt des Frameworks ist „$“, ein Alias für die Funktion jQuery, die als Argument einen Selektor oder ein DOM-Element erwartet. In unserem Beispiel verwenden wir die $-Funktion drei Mal: $(document), $("#Label") und $(this). $(document) und $(this) geben jeweils ein Objekt zurück, dessen Methoden auf die angegebenen DOM-Elemente wirken. $("#Label") verwendet einen CSS-Selektor, um das DIV-Element mit der ID „Label“ zu finden.

Das Ready-Ereignis

JavaScript-Code wird sofort nach dem Parsen ausgeführt. Zu diesem Zeitpunkt ist der Dokumentenbaum noch nicht vollständig aufgebaut, was zu Problemen führen kann.

JavaScript-Entwickler verwenden deshalb häufig das Load-Ereignis am window-Objekt für Initialisierungscode. Der Browser löst dieses Ereignis aus, sobald er die Seite geladen hat. Der Code wird aber erst ausgeführt, nachdem auch alle Bilder geladen wurden.

jQuery bietet deshalb das Ready-Ereignis an. jQuery wartet, bis das Dokument bereit ist, um bearbeitet zu werden, und löst dann das Ereignis aus.

Eventhandler

Eventhandler sind für jQuery einfache JavaScript-Funktionen. Wir haben in unserem Beispiel anonyme Funktionen verwendet (Zeilen 8 und 9).

Unser Beispiel registriert einen Eventhandler für das Click-Ereignis am DIV-Element mit der ID „Label“. Ein DOM-Element löst das Click-Ereignis aus, wenn der Benutzer darauf mit der Maus klickt.

Hinweis: In Eventhandlern zeigt this auf das DOM-Element, das das Ereignis ausgelöst hat.

Unser Beispiel verändert in Zeile 10 im Click-Eventhandler des DIV-Elements den Textinhalt des Elements mit der Methode „text“: 

$(this).text("Hello, world!");

Zusammenfassung

Der Startpunkt für jQuery ist die Funktion jQuery mit dem Alias „$“. Mit Selektoren referenzieren Sie DOM-Elemente, auf die Sie mit dem jQuery-API Eventhandler registrieren, DOM-Manipulationen durchführen oder Effekte aufrufen können.

Das Ready-Ereignis können Sie zur Initialisierung Ihrer JavaScript-Anwendung nutzen. Wie bei normalen JavaScript-Eventhandlern referenziert this in einer als Eventhandler registrierten Funktion das DOM-Element, das das Ereignis ausgelöst hat.

In der nächsten Folge wenden wir uns den jQuery-Selektoren zu.

]]> http://www.andreas-schlapsi.at/2008/10/08/ein-erster-blick-auf-jquery/feed/ 4