JQuery

Quickstart

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

jQuery - Snippets

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)

jQuery - Snippets

JQuery - Events

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 für den ready handler:

    $( 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:

JQuery - Events

 $(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

jQuery - Animation

Weitere Funktionen

find()
addClass()
removeClass()
hover()
each()
append()

Ereignisse

jQuery - Events

AJAX

jQuery - AJAX

Funktionen in jQuery definieren (5 Wege)

Funktionen in jQuery

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>");
}

Troubleshooting - Probleme Lösen

jQuery - Probleme lösen (Troubleshooting)