jQuery Grundlagen
jQuery ist eine freie, umfangreiche JavaScript-Klassenbibliothek, welche komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt. Entwickelt wurde sie von John Resig und 2006 in New York City veröffentlicht. Seit dem wird sie laufend weiter entwickelt.
Funktionen
jQuery besitzt folgende Funktionen:
- Elementselektion im Document Object Model (DOM), die weitgehend den CSS-Selektoren entspricht
- Document Object Model - Manipulation
- Erweitertes Event - System
- Hilfsfunktionen wie zum Beispiel die each - Funktion
- Effekte und Animationen
- Ajax - Funktionalitäten
- Erweiterbarkeit durch zahlreiche freie Plug-ins, die bekannteste ist jQuery UI für Benutzeroberflächen
Verwendung
Da jQuery ein javaScript Framework ist, ist die grundsätzliche Nutzung gleich wie bei javaScript.
(DOM – Manipulation)
Als erstes muss die jQuery Bibliothek eingebunden werden:
<script type="text/javascript" src="path/to/jQuery.js">// <![CDATA[ <script>
Die neueste jQuery Bibliothek kannst du dir HIER herunterladen.
Anschliesend kann mit dem Coden begonnen werden.
Zu beginn wird überprüft ob das HTML Dokument und somit die DOM Struktur vollständig geladen wurde.
$(document).ready(function(){
// Code hier
});Unser Beispiel: Auf unsere Seite befindet sich ein Link und eine unsichtbare div - Box
Beim Klicken auf den Link wird die div - Box animiert eingeblendet.
Folgender Code ist dazu nötig:
Reines HTML mit Styleformatierung
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
</head>
<body>
<a href="#">div Element anzeigen</a>
<div id="box"></div>
</body>
</html>
Der Pfad zur jquery - Datei ist ein Link auf die Google Libraries API
Anschließend wird im head - Bereich folgender Code eingefügt:
<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function() {
$('a').click(function() {
$('#box').slideDown();
});
});
// ]]></script>Erklärung:
$(document).ready() überprüft wie bereits vorhin schon erwähnt ob die DOM Struktur komplett geladen wurde um diese anschließend zu manipulieren.
Mittels $(‘a’) wird das Link – Element ausgewählt und durch das Event .click() überprüft ob er geklickt wird.
.click() gehört zu der Kategorie der Mouse Events
Wird der Link gedrückt wird die Funktion darin ausgeführt.
Diese wiederum wählt via $(‘#box’) das richtige div Element über die ID aus und wendet die .slideDown() Funktion darauf an.
Folgende Auswahlmöglichkeiten eines Elements bestehen:
- Element Name ( $(‘body’) )
- Element Id ( $(‘#ID’) )
- Element Klasse ( ($(‘.CLASS’) )
Ich hoffe ich habe euch mit diesem kurzen Artikel die Funktionsweise von jQuery etwas näherbringen können.
Weitere jQuery Tutorials werden folgen (animierte Navigationsleiste, animiertes Scrollen nach oben via Nach Oben Link).
Weiters gibt es auf der offiziellen jQuery Homepage eine ausführliche Dokumentation zu allen Funktionen.
[...] du jQuery einbindest und wo du es herunterladen kannst erfährst du hier. Du denkst du bist hier falsch, da du keine jQuery Kenntnisse [...]
[...] – Bibliothek im <head></head> – Bereich eures Dokuments eingebunden ist (Siehe hier).Ich persönlich bevorzuge die .ajax() – Funktion von jQuery. Natürlich gibt es auch andere [...]
Sauber erklärt ..
Wenn man eine Google API nutzt, hat man stets die aktuelle Version von jQuery am Start ;-)