Mit diesem Beitrag möchte ich über meine ersten Eindrücke des überaus mächtigen und dennoch schlanken Javascript-Frameworks jQuery veröffentlichen.
Zum Aufbau dieses Beitrags:
- Was ist jQuery?
- Wie verwendet man jQuery?
- Die jQuery-Syntax …
- … im Vergleich zum gewöhnlichen JavaScript
- Vorteile / Nachteile
Was ist jQuery?
jQuery ist ein von John Resig entwickeltes, frei verfügbares Javascript-Framework, das über sehr umfangreiche und mächtige Funktionen zur Navigation und Manipulation der DOM-Syntax bereit stellt. Vor allem die vereinfachte Navigation und Einbindung gehören zu den Stärken des JS-Programmiergerüsts. Des Weiteren bietet das Framework elegante und leicht verständliche Funktionen für animierte Effekte, Ajax und Event-Handling.
Aktuell liegt jQuery in der Version 1.2.2 vor.
Wie verwendet man jQuery?
Um jQuery nutzen zu können, bindet man das Framework wie jede andere externe Javascript-Datei in seine Homepage ein. Das Integrieren sollte möglichst bereits im Header geschehen.
<script src="jQuery.js" type="text/javascript"></script></pre>
Die jQuery-Syntax …
Auf die Funktionen von jQuery greift man mittels des $-Operator zu. Zum Verketten von Anweisungen dient der Punkt-Operator ( . ).
Die jQuery-Syntax ist sehr an XPath und CSS-Selektoren angelehnt.
Der Zugriff auf Elemente, denen das id-Attribut zugewiesen wurde, erfolgt mit $(„#meine_id“).
Um auf alle Elemente eines bestimmten Tags zuzugreifen, verwendet man eine Anweisung wie $(„div“).
Der Zugriff aus Kindelemente kann über zwei verschiedene Ausdrücke erreicht werden. Zum einen besteht die Möglichkeit die entsprechenden Anweisungen in einem Aufruf auszuführen, zum Beispiel $(„#meine_id div“) um alle div’s innerhalb des meine_id-Objekts zu addressieren. Zum anderen bietet sich die children-Funktion an. Ein solcher Ausdruck sähe z.B. so aus $(„#meine_id“).children(„div“).
Einen ausführlicherer Überblick über die jQuery-Selektoren wird demnächst folgen.
Um beispielsweise a-Elementen beim Anklicken einen simplen Alert-Aufruf zu spendieren, verwendet man folgende Syntax:
$("a").click(function(){
alert("Vielen Dank für Ihren Besuch!");
return false;
});
Mit $(„a“) wird auf alle a-Element im Document Zugriff genommen. Auf diese Elemente wird ein click-Event angewandt, das beim Anklicken eine Alert-Box öffnet.
Das Absenden eines Ajax-Requests sieht dann wie folgt aus:
$.ajax(
{
type: "POST",
url: "datei.php",
data: "seite=ajaxschmiede&endung=de&inhalt=jquery",
success: function(antwort){
alert( "Senden erfolgreich: " + antwort );
}
});
Weiteres Event-Handling entfällt.
… im Vergleich zum gewöhnlichen JavaScript
Das oben genannte Beispiel mit dem Hinzufügen eines click-Events zu einer Reihe von a-Elementen, würde in normalen Javascript etwa wie folgt aussehen:
var path = document.getElementsByTagName("a");
for ( var i = 1; path[i]; i++ )
{
path[i].onclick(alert("Vielen Dank für Ihren Besuch!");
}
Ein gut implementiertes Script zur Verarbeitung von Ajax-Requests wäre im Vergleich zum übersichtlichen jQuery um einiges umfangreicher und weniger leicht verständlich. Bisher verwendete ich folgendes Script zur Übermittlung von Daten per Ajax:
var isWorking = false;
function my_ajax_request( file, data )
{
var xmlHttp = false;
/* create xmlhttp-element*/
// Mozilla, Opera, Safari and Internet Explorer 7
if (typeof(XMLHttpRequest) != ‚undefined‘)
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) // IE <= 6
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;
}
}
}
/* if xmlhttp-element and no request exist */
if (xmlHttp && !isWorking)
{
/* file request */
xmlHttp.open('POST', file, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
/* executed if state changed */
xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == 4) // data loaded
{
if(xmlHttp.status == 200)
{
// function starts when loaded
alert("Senden erfolgreich: " + xmlHttp.responseText);
isWorking = false;
}
if (xmlHttp.status == 404)
{
// file not found
isWorking = false;
alert("no file found");
}
}
}
isWorking = true;
xmlHttp.send(data);
}
}
[/source]
Quelle: http://de.wikipedia.org/wiki/XMLHttpRequest
Vorteile / Nachteile
jQuery ist ein Tool um viel Zeit und Code zu sparen. Mit Hilfe des Frameworks erschafft leicht lesbaren Javascript-Code, der sich leicht weiterverwenden lässt. Durch die enorme Flexibilität der Selektoren, bieten sich dem Designer / Coder nahezu grenzenlose Möglichkeiten. Die vielen bereits vorimplementierten Funktionen wie das Hin- und Herschalten zweier Funktionen auf einem Element (Toggle) oder die Effektfunktionen (Slide, Hide, usw.) ermöglichen es, in wirklich kurzer Zeit interessante Effekte in seine eigene Homepage einzubetten.
Einige praktische jQuery-Beispiele werden folgen.
