JQuery
Quickstart
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Gut durchlesen, hier werden die meisten Basics angesprochen.
Links
jQuery or Vanilla JS
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors
Ereignisse: http://docs.jquery.com/Events
Gute Tools out of the Box: Erste Wahl mit allem was man so braucht sind die jQuery Tools:
http://flowplayer.org/tools/index.html
Oder in Kurzform hier: JQuery Tools (flowplayer.org)
Validierung mit jQuery: Validate (jQuery Plugin)
Einbinden
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.
Über Google
Hinweis: Google gibt an man solle zuerst den API Code übergeben damit es funktioniert (Obsolet). Der direkte Zugriff funktioniert aber auch ohne. Vielleicht geht es nicht wenn man die google. load Funktion nutzt (hier nicht weiter behandelt) .
Beispiel API Code Übergabe:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
Beispiel:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
ui steht für User Interface (Plugins)
Über jQuery Server
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Libary auf eigenem Server
Geo-bit webmynet
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen. Zweck: einfache Einbindung, Statistik, Testing
Typo3
siehe JavaScript Frameworks nutzen
Der Beginn
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:
$(document).ready(function() {
// do stuff when DOM is ready
});
Oder Abgekürzt
$(function() {
// do stuff when DOM is ready
});
Stiftet manchmal Verwirrung. Es gibt einige Möglichkeiten in der Syntax:
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )
Document ready oder window ready ?
$(document).ready... wartet bis alle Elemente im HTML soweit geladen sind und startet mit der Ausführung der Skripte. Bilder etc. werden im Laufe der Zeit nachgeladen. Soll die Ausführung auf die Bilder warten geht das anders:
$(document).ready(function() {
// wait til DOM is ready and do s.th.
});
$(window).on("load", function() {
// wait till everything (inkl. Images) is loaded and do s.th.
});
Reagieren auf Klick
Siehe auch:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren
Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.
Zugriff auf Elemente
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
Hier wird noch eine Klasse eingebaut
Weitere Beispiele:
$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.
Elemente manipulieren, hinzufügen, entfernen
jQuery - Animation
Weitere Funktionen
find() addClass() removeClass() hover() each() append()
Ereignisse
AJAX
Funktionen in jQuery definieren (5 Wege)
Weitere Beispiele
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});
// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});
// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
Testen ob jQuery geladen ist
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen
jQuerySrc = 'fileadmin/js/jquery-min.js';
// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}
// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
