Blog

jQuery – Javascript Effekte und AJAX sauber vom HTML trennen

jQuery_logo.gifIch habe Javascript (JS) bisher nicht gerade gemocht. Zum Glück gibt es mittlerweile genug Bibliotheken um schöne Effekte ( ein-/ausblenden,  drag/drop, AJAX ..) zu nutzen, ohne viel Javascript schreiben(verstehen) zu müssen. Ein noch einfacherer Weg ist die Nutzung eines Frameworks wie CakePHP oder Ruby on Rails, welches die Javascripte von selber generiert.

Doch Scripte wie Scriptacoulus, OpenRico oder die Generierung mittels Framework bergen einen Nachteil: Sie verschmutzen den HTML Code durch ihr inline Markup. Das lässt sich mit CSS vergleichen, welches direkt in das html Element geschrieben werden kann(inline css) oder eben getrennt in der CSS Datei liegt.

 jQuery erlaubt diese Trennung von HTML und JS.  So wie CSS die grafische Formatierung von HTML abtrennt, werden JS Effekte und AJAX  entkoppelt. Der HTML Code bleibt sauber, das JS lässt sich leichter warten und wiederverwenden. Zu alledem birgt jQuery aber noch zwei weitere essentielle Vorteile: Es ist verdammt klein (15kb) und die Syntax der JS Aufrufe ist hammer simpel.

jQuery findet die HTML Elemente über die DOM Struktur, spezielle CSS Klassen und/oder ID´s. Es ist z.B möglich alle Links innerhalb aller p´s und div´s  zu finden und diese fett zu markieren:

$("p,div").find("a").css("fontWeight","bold");

Richtig lustig wird das Ganze natürlich erst mit Effekten. z.B.  Wenn das Element mit ID "show" geklickt wird, öffnet sich ID "content".

——————————————-
$("#show").click(function(){
$("#content").slideDown("slow");
return false;
});
———HTML———
< h2 id="show" >aufklappen</h2>
<div id="content">text</div>
——————————————-

Die Effekte in jQuery selber sind noch etwas reduziert. Es gibt aber Plugins, die den Spass nicht so schnell enden lassen, einer ist jQuery Corner. Wer sich an runden Ecken mit Rico versucht hat, weiss wie sehr das abnervt. Mit jQuery Corner klappt es im Nu:

——————————————
 $("#meine_Box").corner();
———HTML———
<div id="meine_Box"> Ich JS Dummi </div>
——————————————-

Als ich jQuery vor ca. einem halben Jahr fand, dachte ich mir: "Das ist so klein und simple, das kann ja nichts sein.".
Zum Glück machte mich Teemow auf die Vorteile aufmerksam, so dass ich gestern eine kleine jQuery Nacht eingeschoben habe. Ich könnte noch weiter von dem Script schwärmen, doch checkt es einfach selber an.

Das jQuery mit seinem Ansatz auf dem richtigen Weg ist, zeigt auch die Integration in sehr grosse Seiten wie z.B. Technorati.

2 Comments to jQuery – Javascript Effekte und AJAX sauber vom HTML trennen

  1. 03.06.2009 at 16:30

    Wie kann man das machen, das ein div nur zu 50 % zuklappt?

  2. 14.09.2006 at 11:29

    hi….hört sich super an, da ich allerdings gerade erst am anfang dieses themas befinde habe ich auch zugleich eine frage.
    funktioniert diese trennung javascript und html nur jquery? und wie siehts mit yui aus? ist die yahoo-ui-bibliothek also eher mit gefrimel am html-markup verbunden?
    grüsse
    toul

  1. By on 02.10.2006 at 14:27