JQuery

Quickstart

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

Gut durchlesen, hier werden die meisten Basics angesprochen.

jQuery - Snippets

Links

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

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

Reagieren auf Klick

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

Weitere Funktionen

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

Ereignisse

jQuery - Events

AJAX

jQuery - AJAX

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)