Nov 29

jQuery – ein mächtiges und effizientes Werkzeug

Tag: jQueryPatrick @ 5:15 pm

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);
}
}

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.

23 Antworten zu “jQuery – ein mächtiges und effizientes Werkzeug”

  1. heiko sagt:

    Klasse Einführung in jQuery, ich hoffe die versprochene Tutorials kommen noch.

  2. jQuery Version 1.2.2 veröffentlicht | Ajaxschmiede.de sagt:

    […] findest du eine Einführung in jQuery Ähnliche Themen im Blog: DOMAssistant – eine modulare […]

  3. Tobi sagt:

    Mittlerweile sind schon einige interessante Tutorials in der Kategorie jQuery zu finden. Im Lauf der Zeit werden es natürlich noch mehr. :)

  4. jQuery-Newsticker | Ajaxschmiede.de sagt:

    […] unserer Einführung zu jQuery kann man sich die Grundlagen im Umgang mit diesem Framework anschauen. Ähnliche Themen im […]

  5. Drupal 6.0 setzt weiterhin auf jQuery | Ajaxschmiede.de sagt:

    […] auch in Drupal 5 nutzt die neue Version die mächtige Javascript-Bibliothek jQuery in der aktuellen Version 1.2.3, wie wir bereits […]

  6. Dromaeo - JavaScript-Benchmark von Mozilla-Entwickler | Ajaxschmiede.de sagt:

    […] Resig, Mitarbeiter der Mozilla Foundation für JavaScript-Angelegenheiten und Kopf hinter der jQuery-Bibliothek, entwickelt derzeit mit Dromaeo an einem einheitlichen JavaScript-Benchmark für alle […]

  7. Effizientere und schnellere Event-Steuerung dank jQuery 1.2.6 | Ajaxschmiede.de sagt:

    […] John Resig die Ausführungsgeschwindigkeit ihrer Javascript-Bibliothek, über die wir bereits vor einem halben Jahr zum ersten Mal berichteten, vor allem im Bereich Event-Handlung enorm. Zudem wurden einige Feature […]

  8. querySelector-API des W3C erhält umfassende Browserunterstützung | Ajaxschmiede.de sagt:

    […] in nahezu allen Frameworks wie jQuery, mooTools oder DomAssistant implementierte Selector-API, mit deren Hilfe es möglich ist, […]

  9. Einstieg in jQuery | Webzeugkoffer Blog sagt:

    […] Nicht unbedingt sinnvoll dieses Beispiel (Usability), aber gut eingänglich. Mehr dazu unter jQuery – ein mächtiges und effizientes Werkzeug, wo es auch einen Vergleich zum herkömmlichen JS gibt. Einen etwas ausführlicheren Code-Vergleich […]

  10. Deutsches Java Blog von Jörg Herbst » Blog Archive » jQuery - Deklaratives JavaScript ? sagt:

    […] der Ajaxschmiede gibt es ein paar gute einführende […]

  11. ocean90 - blogger und webdesigner » jQuery-ein besonderes Framework sagt:

    […] jQuery Beschreibung (jQuery Kategorie) […]

  12. Webdesign sagt:

    Viele Schöne Tuts habt ihr hier! Weiter so…
    Gruß aus KS

  13. PHP Include durch AJAX Code ersetzen ? - Javascript & Ajax @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe sagt:

    […] […]

  14. Den richtigen Internetanbieter finden | Ajaxschmiede.de sagt:

    […] bereits bestehenden Telekomanschluss weiterhin nutzen möchte (für die Sortierung wird übrigens jQuery […]

  15. jQuery-ein besonderes Framework » Empfehlung, Framework, Javascript, Sammlung » ocean90s weblog sagt:

    […] jQuery Beschreibung (jQuery Kategorie) […]

  16. moodys sagt:

    ein gewöhnliches Tutorial wie seeehr viele andere auch ohne spezifischen Nutzen.
    ein lauffähiges POST-Beispiel mit Parameterübergabe ohne alert wäre wesentlich sinnvoller.
    Dann werde ich mal weitersuchen.
    Tschüss

  17. was ist eigentlich jQuery? - Webmeister Blog sagt:

    […] Frage hat die Ajaxschmiede kurz und informativ zusammengefasst:  jQuery – ein mächtiges und effizientes Werkzeug « […]

  18. Webstandard-Blog sagt:

    Ein Framework welches ich nicht mehr missen möchte. Einfacher geht es wirklich kaum, denn so können selbst Einsteiger in die Thematik relativ schnell sichtbare Ergebnisse erzielen, die sich sehen lassen können.

  19. [Sonstige] Jquery einbinden,wie geht das? sagt:

    […] Schau mal was ich in 2 Sekunden Googeln gefunden habe: http://www.ajaxschmiede.de/jquery/jq…ntes-werkzeug/ Zitieren […]

  20. Rolf sagt:

    und wo wird hier über die Nachteile geschrieben?

  21. Kalle sagt:

    Vielen Dank für diesen tollen Beitrag. Gibt es auch eine Möglichkeit JQuery komplett im Body Tag einzubinden?

  22. Werner sagt:

    @kalle
    natürlich kann jQuery auch am Ende des body Tag eingebunden werden.
    Es wird sogar explizit empfohlen, wegen der verkürzten Ladezeiten.

  23. Norbert sagt:

    Gute Infos zum Thema jQuery. Das mit den ladezeiten kann aber zum problem werden.

Hinterlasse einen Kommentar