Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
jQuery – ein mächtiges und effizientes Werkzeug | Ajaxschmiede.de


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. under armour outlet sagt:

    e3300eb16b6f8e5bae9c229bc9332b8bThe world has never seen a calamity of this scale. One which has left thousands dead, many injured and millions homeless. It is the worst humanitarian crisis in the world presently, which has affected 20 million people. The floods have drained our villages and towns,Michael Kors, destroyed roads and bridges, and smashed our schools, colleges and hospitals. Our fertile agricultural land is under water and there has been a great devastation to the country
    under armour outlet

  2. mwybhsldc sagt:

    jQuery – ein mächtiges und effizientes Werkzeug | Ajaxschmiede.de
    amwybhsldc
    mwybhsldc http://www.g2i7or0g1dm77s07ys680gifmgw65652s.org/
    [url=http://www.g2i7or0g1dm77s07ys680gifmgw65652s.org/]umwybhsldc[/url]

  3. RubenMog sagt:

    [url=https://www.postyourbeaver.com/amateur-porn/julykudbelarus]Юля Ковган голые сиськи[/url] – Юля Ковган любит сперму, Юлия Ковган фото.

  4. JeffreyIsolf sagt:

    [url=http://moto159.ru/]купить детский квадроцикл[/url]

  5. cheap jerseys sagt:

    Buy Exclusive NBA Team Jerseys! The Official Store of the NBA. http://www.throwbacknbajerseystore.com

  6. 锯床进口清关 sagt:

    2、 首先发展制造环境下作业的工业机器人,逐步发展仓储、搬运等非制造环境下的服务机器人, 2月份。 再通过含水率检测,另外,再磨细度-200网目约占90%~95%。成为一段中美企业竞争与合作的佳话。2015年全部取消非行政许可审批,为今年防抗台风、抢险救灾工作提供了强有力的支撑。为解决因水文监测站地处偏僻架设成本高、短波信道畅通率低、设施耗电量大无法满足农村电网电压要求等影响预警预报和指挥决策的问题。

  7. Custom Jigsaw Puzzles sagt:

    At last, someone who comes to the heart of it all
    Custom Jigsaw Puzzles

  8. 小麦进口清关 sagt:

    2、 由于消费者从传统的印刷媒体转向平板电脑和电子书阅读器等设备。角瓊?4、0. LTD 香港

  9. Fastener Weighging And Counting Packaging Machine sagt:

    jQuery – ein mächtiges und effizientes Werkzeug | Ajaxschmiede.de

Hinterlasse einen Kommentar