Frage stellen
hier folgt ein kleines Tutorial zur Nutzung von jQuery und dessen Funktion CSS zu manipulieren.
Erzeugt wird hierbei jedoch immer ein inline-style!
Vorab
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 bereitstellt. Vor allem die vereinfachte Navigation und Einbindung gehören zu den Stärken des Programmier-Gerüsts. Des Weiteren bietet das Framework elegante und leicht verständliche Funktionen für animierte Effekte, Ajax und Event-Handling.
Wie verwendet man jQuery?
Um jQuery nutzen zu können, bindet man das Framework (aktuell Version 1.6.2) wie jede andere externe Javascript-Datei in seine Homepage ein. Das Integrieren sollte möglichst bereits im <head>-Bereich geschehen.
- Code: Alles auswählen
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
Die jQuery-Syntax* (*Syntax = “Grammatik“)
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, bzw. CSS angelehnt.
Auf IDs, Klassen oder HTML-Tags zugreifen:
- Code: Alles auswählen
$('#idname') oder $('.klassenname')
oder mehrere $('#idname, .klassenname, #idname2')
oder HTML-Tag $('p')
oder verschachteltes HTML-Tag $('#idname p')
Eine Anweisung hinzufügen (Punkt-Operator):
- Code: Alles auswählen
$('#idname').hide();
oder
$('#idname p').fadeIn('slow');
Die Anweisung* (*Anweisung = “Mach etwas!“) befindet sich immer nach dem Funktionsaufruf, bzw. dem Punkt-Operator (z.B. hide, fadeIn).
Eine Liste mit verfügbaren Anweisungen findet sich hier: http://api.jquery.com/
Tipp:
Hinter jede runde Klammer ) die am Ende einer Zeile steht gehört meist ein Semikolon ;
Also?
Durch die Anweisung "css" nach dem Punkt-Operator lassen sich alle Eigenschaften von CSS nutzem um der ID, Klasse oder dem HTML-Tag einen Inline-Style zu verpassen.
Einzelne Eigenschaft:
- Code: Alles auswählen
$('#idname p').css('color', '#FF000');
Mehrere Eigenschaften:
- Code: Alles auswählen
$('#idname p').css({
'color': '#FF000',
'font-weight': 'bold'
});
