Intention

Persönliche Intention

Meine Intention ist es ein kompaktes JQuery-Tutorial zu veröffentlichen, welches (nach diesem Abschnitt) ein Überblick über die wichtigsten JQuery-Funktionen gibt.

Warum JQuery?

JQuery ist eine Javascript-Klassenbibliothek, welche zahlreiche Funktionen für die Selektion im HTML-Baum (DOM) und dessen Manipulation (HTML-Manipulation wie z.B. das Austauschen von TABLE-Tags oder dem dynamischen Hinzufügen von TR-Tags…) enthält.

Es bietet Funktionen für…

• Elementselektion im Document Object Model über die Sizzle Selector Engine, die weitgehend den XPATH/CSS-3-Selektoren entspricht
• Document Object Model-Manipulation (HTML-Dokumente dynamisch ändern)
• Erweitertes Event-System
• Hilfsfunktionen
• Effekte und Animationen (einblenden, ausblenden, aufklappen, zuklappen…)
• Ajax-Funktionalitäten (POST/GET, JSON…)
• Zahlreiche frei verfügbare Plug-ins

Wer nutzt JQuery?

Vorwiegend Web-Entwickler, die auf einer etwas niedrigeren Ebene ein Javascript-Framework benötigen. JQuery ist kein High-Level-Framework mit WYSIWYG-Editor.

Moderne AJAX/DHTML-Webanwendungen nutzen immer häufiger High-Level-Frameworks wie GWT, ASP.NET, JSF usw…
Diese Frameworks bieten UI-Komponenten (z.B. Kalender, Tabellen mit DB-Anbindung, Bäume…) an, die herkömmlichen HTML-Seiten durch simples „Draufziehen“ (in einem WYSIWYG-Editor) oder Instanzierung neuer Teile (z.B. in einem UI-Composite-Pattern) die Fähigkeit verleiht sich durch Nutzerinteraktion (z.B. Mausklicks, Tastatureingaben…) zu verändern, ohne die Seite komplett neu zu laden (AJAX/DHTML).
Hierbei findet im Hintergrund eine DOM-Manipulation statt (häufig per AJAX – hier werden z.B. asynchron Abschnitte aus der Datenbank nachgeladen). Der Browser zuckt dabei nicht/Die Seite verschwindet bei einem Klick nicht kurz. Wenn man solche Komponenten selber entwickelt, ist JQuery eine ausgezeichnete Erweiterung zu herkömmlichen Javascript-Funktionen.
Microsoft hat in seiner IDE Visual Studio JQuery integriert und verwendet es bei der Entwicklung von Drag-And-Drop-UI-Komponenten. Aus diesem Grund ist ein Zugriff in Visual Studio auf die Funktionen möglich.

Tutorial

Zu Beginn…

Man benötigt 2 Dinge um mit JQuery zu beginnen

• Das Einbinden der Bibliothek (herunterladen oder wie hier googlecontent nutzen)
• Die READY-Funktion welche ein Ereignis ist, das sofort auftritt wenn das HTML-Dokument (oder das DOM) zur Manipulation bereit ist

…JQuery ermöglichen…

Hierfür fügen wir zwischen die HEAD-Tags des HTML-Dokuments die folgenden Skripte hinzu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">// <![CDATA[
   
// ]]></script><script type="text/javascript">// <![CDATA[
                                         
	// Hier kommt die READY-Methode (s.u.) hin    
    
// ]]></script>Hello World

… und die Ready-Methode implementieren

Hierfür gibt es 3 Möglichkeiten

1. Vollständig:

jQuery(document).ready(function() {
   // Code hier einfügen
})

2. Mit $ als Alias für die jQuery-Klasse

$(document).ready(function() {
   // Code hier einfügen
})

3. Kurzform:

$(function() {
   // Code hier einfügen
})

Die READY-Methode ist das erste Event, was auftreten kann. Das Ereignis tritt ein, wenn auf das DOM zugegriffen werden kann. Ein ALERT-Fenster in dieser Methode aufzurufen macht nicht viel Sinn, da es nicht notwendig ist auf das geladene DOM zugreifen zu müssen. Dies könnte auch früher passieren.

Einschub: Was ist DOM?

Beim DOM handelt es sich um ein Modell, welches den Zugriff auf Elemente, Teilbäume oder Teil-XML-Strukturen erlaubt. Grundsätzlich sieht das DOM eine HTML-Dokumentes mit einer Tabelle folgendermaßen aus:

Verwendung des Selektions-Teils für den DOM

Bei den Beispielen werde ich nur noch die Kurzform der READY-Methode nutzen.

$(function() {
   // Wähle alle <a>-Tags aus und definiere ein CLICK-Ereignis
   $("a").click(function(event){
       // wird bei jedem klick auf einen Link aufgerufen
       alert('Hello JQuery!');

       // verhindert das Aufrufen des in Link-Zieles
       event.preventDefault();
   });
});
</a>

Wer den obigen Code bereits versteht, hat auch das Selektions-Konzept von JQuery verstanden.

Der erste Aufruf ist immer eine Selektion auf das DOM/HTML-Dokument. Mit $(„a“) (alternativ auch jQuery(„a“) ) wurden alle -Tags im gesamten HTML-Dokument ausgewählt. Das Anhängen von .click hängt dann an die Selektion (also alle Links, bzw. -Tags) ein onClick-Ereignis, welches ein ALERT-Fenster öffnet. Die Methode preventDefault() des Event-Objektes verhindert das Standardverhalten des Links, nämlich den Aufruf der Seite. Somit könnte man für alle Links die Zielseite ändern oder abfangen. Der Funktionskörper function() deklariert eine anonyme, namenlose Methode die ausgeführt wird, wenn das onClick-Ereignis des Links (also des -Tags) aufgerufen wird.

Man kann grundsätzlich alle – oder XML-Tags eines „Baumes“ (nämlich dem DOM) selektieren.

Doch was gibt es für Möglichkeiten der Selektion?

Oberflächlich gesehen gibt es 2 Möglichkeiten…

1. Kombination aus CSS und XPATH -> $(„div > ul a“)
2. Nutzung verschiedener Methoden des JQuery-Objektes (z.B. $(„a“).each mit $(this) Referenz

Selektion …

… auf eine TAG-ID

$(„#eineDivID“).addClass(„red“);

Die Raute # sagt der Selektion, das sie ein Attribut id=“..“ suchen soll. Die Selektion beinhaltet dann das Element (z.B. ein DIV). Hier wird diesem DIV die CSS-Klasse .red zugewiesen.

Beispiel:


Div-Inhalt

… auf alle Kind-Elemente   aller Tabellen eines Dokumentes

$(„table > tr > td“).addClass(„blue“);Die Selektion wählt alle td-Tags aller Tabellen aus und fügt diesen die CSS-Klasse .blue hinzu. Für Kind-Elemente (Unter-Tags) wird das Ist-Größer-Als-Zeichen > verwendet.

… auf das letzte
-Element aller Tabelle eines Dokumentes

$(„table > tr > td:last“).hover(function(){$(this).addClass(„green“);},function(){$(this).removeClass(„green“);})

Unter Verwendung vom HOVER-Event, welches 2 Parameter onMouseOver/onMouseOut als „functions“ übergeben bekommt, wird ein Mouse-Over-Event auf alle letzten Zeilen aller Tabellen gelegt. Fährt man mit der Maus drüber nimmt dieses die Farben/Styles an, die in der CSS-Klasse .green definiert wurden. Ist die Maus wieder außerhalb der Zeile wird die Klasse entfernt.

… auf alle 

-Tags, die ein Class-Attribut haben

$(„p[@class]“).hide()

Selektiert alle p-Tags im Dokument, die ein Attribut für eine CSS-Klasse vorgegeben haben class=“…“ und versteckt diese.

… auf den ersten 

-Tag einer Seite

$(„p:eq(0)“)…..

… auf alle sichtbaren DIVs der Seite

$(„div:visible“)…

… auf alle -Tags die unter einem -Tag sind

$(„ul > li“)…. alternativ auch $(„ul/li“)

… auf alle 

-Tags mit einer CSS-Klasse „foo“, die einen Link haben

$(„p.foo[a]“)…

… auf alle -Tags mit einem Link mit dem Text „Register“

$(„li[a:contains(‚Register‘)]“)…

… auf alle -Tags mit dem Name „bar“

$(„input[@name=bar]“)…..

… auf alle angehakten/gecheckten Radio-Buttons

$(„input[@type=radio][@checked]“)….

CSS Selektoren

Selektionen nach Stylesheet folgen der Syntax

E:STYLE

wobei E ein HTML-Element/HTML-Tag bezeichnet.

… auf ein 

-Element als einziges Kind-Element seines Eltern-Tags

$(„p:only-child“) …

… auf ein 

-Tag als letztes Kind-Element seines Eltern-Elements

$(„p:last-child“) …

Mit regulären Vergleichsoperatoren…

… z.B. bei der Suche nach Attributen

… auf alle -Tags, in deren href-Attribut der String /content/gallery vorkommt

$(„a[href*=’/content/gallery‘]“)…

… auf alle 

-Tags dessen Attribut „foo“ mit „bar“ beginnt

$(„p[@foo^=bar]“)

… auf alle 

-Tags dessen Attribut „foo“ mit „bar“ endet

$(„p[@foo$=bar]“)

… will be continued (Fortsetzung folgt…)