JQuery

Quickstart

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

Gut durchlesen, hier werden die meisten Basics angesprochen.

Links

Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

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

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)

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

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