Bearbeiten von „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

Gute Tools out of the Box:

http://flowplayer.org/tools/index.html 

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

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

=== Ü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 ==
<pre>
 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

</pre>
  $("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
<pre>
 $(document).ready(function() {
   $("#orderedlist").addClass("red");
 });

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

  $("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
 #orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
 $(document).ready(function() {
   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==

== Weitere Funktionen ==
 find()
 addClass()
 removeClass()
 hover()
 each()
 append()

== Ereignisse ==

== Weitere Beispiele ==
<pre>
   // 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");
   });


</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

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

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]