PHP (OOP, MVC), HTML, MySQL, Javascript, AJAX und vieles mehr!

So, Zeit mal meine Artikelreihe über jQuery fortzuführen. Wir wissen, was jQuery ist, wie man es herunterladen und einbinden kann und so ungefähr, wofür es gut ist.

Jetzt kommt natürlich die Frage auf, wie funktioniert das überhaupt? Was muss ich jQuery sagen, damit es auch das macht was ich will? Nun, damit beschäftigen wir uns jetzt.

Man beginnt jede normale jQuery-„Ausführkette“ mit diesem Schnipselchen, wie im Beispiel in meinem letzten Artikel.

Zur Erinnerung

$(document).ready(function() {
     //Code
});

Das Ganze bedeutet nichts anderes als: „Wenn der DOM (Document Object Model) bereit ist, dann mache das, was zwischen {} steht“.
Hierbei werden zwei der wichtigsten jQuery-„Funktionen“ eingesetzt. Zum einen ein Selector ($), der beschreibt, um welches Element es sich handelt und zum Anderen eine Funktion, in diesem Fall ein so genanntes Event.

Selector:

$(document)

= >Schaue dir das document an
Dies ist eher eine Ausnahmeerscheinung. Für gewöhnlich benutzt man den Selector, um ein spezifisches Element anzusprechen, wie z.B. ein Div oder eine Tag-Gruppe.

$('#div_id')
$('.div_classe')
$('tag') //wie "div" oder "span"

In diesen (besseren) Beispielen sind die Selectoren die Raute # für eine ID, der Punkt . für eine Classe oder einfach der Name. Man kann auch mehrere Selectoren (durch Kommata getrennt) angeben, im Prinzip funktioniert es wie in CSS. Auch parent > child, prev + next Beziehungen sind erlaubt. Aber jQuery ist ja nicht CSS und bietet darüber hinaus noch weitere möglichkeiten zur Differenzierung. Belibt sind „:last“ und „:first“ um z.B. das erste Element einer Liste anders zu gestalten.

$('ul#navigation li:first')

Funktionen:
jQuery bietet von Hause aus eine menge Funktionen. Dabei wird unterschieden zwischen

• Events
• Effekte
• Manipulation
• CSS
• Traversing (Zum Navigieren zwischen Elementen im DOM)
• Ajax

Wie bereits erwähnt, ist ready() eine Funktion aus der Rubrik Events. Ein Event führt etwas aus, immer wenn etwas Tolles passiert. Sozusagen als eine Reaktion auf etwas, wie dass der DOM ready ist. Die meisten Events sind von JS übernommen, wie onClick als click() oder die hover()-Funktion.

Mehr muss man eigentlich nicht wissen, um loslegen zu können.

//Schön einleiten
$(document).ready(function() {
    //Ein Element selektieren  Ein Event auswählen
    $('#tolles_div').hover(function() {
        //Und irgend ein Javascript Code ausführen, wie z.B. einen jQuery Effekt
        //this, also das aktuelle Element
        $(this).hide(); //hide is denke ich selbsterklärend
   });
});

jQuery bietet auch eine tolle Dokumentation mit allen Funktionen, geordnet nach Rubriken, man kann ja schließlich nicht alles im Kopf haben.

Bis zum nächsten mal

Hydra

(3 Stimme, durchschnittlich 3,33 / 5)

Loading...