C++, C , Java,

JQuery

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.9.1 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>

 


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”).


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

© 2011 - 2013 Moerifeone
Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden