Grundlagen und Selektieren

Allgemein: <script src="http:ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="jquery-1.11.1.min.js"></script>
Erweiterungen: DOM Inspector, Fire Query
DOM Laden: $(document).ready(function() { });
$(function() { }); // Kurzschreibweise
Ausgabe: console.log (xyz); // gibt an die Konsole aus
lesen und schreiben: $("#Absatz").html(); liest alles innerhalb des Elements
$("#Absatz").html("Hallihallo"); // schreibt innerhalb des ausgewählten Elements
Verkettung: $("#abc").css("color","blue").slideUp(3000).slideDown(3000); // blau, fährt hoch und runter
this: $( "div.foo" ).click(function() { $(this).slideUp();});
Elementlistte durchlaufen: $('.x') // alle Elemente mit dem Klassennamen x werden durchlaufen
.each(function() { console.log.($(this).html;)})
Selektor als Variable: var vd=$("#autos");
vd.html();

Selektoren

Selektoren: $("*") alle Elemente
$(".orange") Klasse
$("p") Tag
$("#Absatz") Id
$("p.orange") Klasse, wenn diese in p Tag verwendet ist

$("div p") alle p Tags unterhalb eines div Tags
$("#Absatz *") alle Elemente unterhalb von id Absatz
$(".menu > ul > li > a") Selektiert menu, wenn darauf ul und li folgen
$("#Absatz, #Cesar") mehrere

$('tr:even') gerade oder :odd
$('tr:first') gerade oder :last

$("p[class*='ange']") wie %ange%
$("p[class^='o'][class$='k']") Am Anfang o und am Ende k
Filter: $("li").last() letztes Element einer Liste
$("li").first() erstes Element einer Liste
$("li").eq(1)() zweites Element einer Liste
$("li").slice (0,2)() Erstes Element dann erstes nicht zu nehmendes
$("li").filter(":even") Vielzahl an Filtermöglichkeiten

$("li").has("ul"); nur wenn li ul enthält
$("li").not(".intro"); nur wenn li nicht intro ist
Find: $('div').find('span'); Dursucht alles unterhalb eines div Elements; Filter möglich
Nachbarelemte ansprechen: S('div').children(); Kinder sind genau eine Ebene unter der angeprochenden
S('div').parents(); Übergeordnete Elemente
$('div').next(); spricht nächsten Geschwisterknoten an
$('div').previous(); spricht vorherigen Geschwisterknoten an
Abfrage: if (target.is("li")) { target.css( "background-color", "red" ) };
if(block.is(':hidden')) {}

Event Handling

Events: $("#px").click(function() { $(this).hide(); });
$("#px").dblclick();
$("#px").mouseenter(); Mauszeiger wurde auf Objekt bewegt
$("#px").mouseleave();
$("#px").mousedown(); Mausknopf gedrückt
$("#px").mouseup(); Mausknopf losgelassen

$("input").focus(); z.B. input
$("input").blur(); kein Fokus mehr
$("input").keypress(); oder keydown, keyup
$("select").change(); z.B. select
$("form").submit();
On: $( "p" ).on( "click", function() { alert( $( this ).text() ); });
Nur ein Aufruf: $('h2').one('click', function(event) { console.log("h2 wurde angeklickt"); }); // wird nur einmal aufgerufen
Erzeugt Klick: $('#px').trigger('click'); // erzeugt Klick auf alle element mit der id px

Elemente manipulieren

Elemente zugreifen: $("#test").text()); // Text wird auslesen, in dem Text vorkommende Tags werden nicht mit ausgelesen
$("#test").html()); // Text mit HTML wird auslesen
$("#test").val()); // Value eines Feldes
$("#test").attr("href"); // Attribut auslesen
CSS: $("#test").css("color", "red");
$("#test").css({'background-color': 'yellow', 'color': 'black'}); // mehrere Angaben mit Json
Klassen: $("#test").attr("class", "orange"); // ändert Klasse zu orange
$("#test").addClass("orange").addClass("braun"); // Klassen werden hinzugefügt
Elemente einfügen: $("ol").append("<li>neues Element</li>"); // Listen Element drangehängt an bestehede Liste ol
$("ol").prepend("<li>Erstes Element</li>"); // wird am Anfang eingefügt
Inhalt einfügen: $("#abd").after("Soter"); // direkt vor ein Element wir Inhalt eingefügt
$("#abd").before("Sore"); // oder direkt danach, also nach schliessen des Endtags
Element entfernen: $("#div").remove();
$("#div").empty(); // löscht alles innerhalb des Selektors
Positionierung: $('#block').width(); // nur Breite ohne Padding - height()
$('#block').innerWidth(); // Breite und Padding rechts und links - innerHeight()
$('#block').outerWidth(); // Breite, Padding, Border - outerHeight()
$('#block').outerWidth(true); // Breite, Padding, Border, Margin - outerHeight(true)

$('div').offset({ top: 10, left: 30 }); // zur linken oberen Ecke des Dokuments
$('div').position({ top: 10, left: 30 }); // zur linken oberen Ecke der Referenzbox

Effekte

Ein- und ausblenden: $("div").hide(2000); // 2 Sekunden lang von unten aufgerollt
$("div").show( "fold", 1000 ); // zum zeigen
$("div").toggle( "fold", 1000 );// toggle, d.h. hin und her zwischen show und hide

$("div").fadeIn(4000); // wird eingeblendet, sonst wie show
$("div").fadeOut(3000);
$("div").fadeToggle(3000);

$("div").slideDown(); // wie show nur das div sich wie slide öffnet
$("div").slideUp();
$("div").slideToggle();
Callback: $("#id").hide( 2000, function() { console.log ('fertig') } );; // erst wenn hide fertig weiteres ausführen
Transparenz: $("div").fadeTo("slow",0.7); // blendet bis zu bestimmter Transparenz aus
Animate: $("div").animate ({ left:'150px'}, "slow"); // Element bewegt sich nach links
$("div").animate ({ left:'150px', opacity:'0.5', height:'180px', width:'180px' }); // nach links, transparenter, größer
$("div").animate ({ left:'150px', height:'+=150px', width:'+=150px' }); // relativ Angaben
$("div").animate ({ height:'toggle' }); // auf und zu klappen
Stop: $("#stopbutton").click(function() { $("div").stop(); }); // unterbricht Effekt

AJAX

Php Datei aufrufen: $('.content').load("datei.php"); // läd php datei
$("#div1").load("demo_test.txt");
AJAX: result = $.ajax({
type: 'POST', async: 'true', url: 'datei.php', dataType: 'json',
data: ( { variable: 'abc' }),
success: function(data) { cosole.log (data.inhalt); }
}).responseText;
Formular Daten übertragen: $(form).serialize() // alle daten eines Formular, Sonderzeichen codiert

Jquery UI

Dragable: $("#draggable").draggable(); // Element ist verschiebbar
Droopable: $("#droppable").droppable({ drop: function(event, ui) { $(this).html( "Dropped!" ); } }); Das Element reagiert, wenn Elemente draufgezogen werden
Größe ändern: $( "#resizable" ).resizable(); // Größe kann geändert werden
Mehrfachauswahl: $( "#selectable" ).selectable(); // Mehrere Listenelement auswählbar
Reihenfolge ändern: $( "#sortable" ).sortable(); // Liste, welche sortierbar
Akkordion: $( "#accordion").accordion(); // Darstellung untereinander, ein Element wird geschlossen, wenn neues ausgewählt wird.
Autocomplete: $('#inputid').autocomplete
({ source:function(request, response) // source bekommt in request übergeben was eingegeben wird, response ist der Rückgabewert
$.getJSON('irgendwas.php', request, function(data) { response(data) })
}); von PHP werden die Daten in json zurückgegeben
Button UI Themes mit Icon: $('#button_t').button ({ icons: { primary: "ui-icon-clock" } })
.button("disable") .button("enable");
<button id="button_t">Test!</button>// Icons sind auf der Seite einsehbar
Buttonsets: $('#checkboxes').buttonset(); // für Radiobuttons und Checkboxes, in neuem Layout
$('#radios').buttonset();

<input type="checkbox" id="test2" /><label for="test2">B</label>
<input type="radio" id="test5" name="group" /><label for="test5">A</label>
Datum auswählen: $("#Datum").datepicker();
Dialog: .click(function() { $('#dialog').dialog({ show: 'explode', hide: 'explode' }); }); // Dialog im versteckten div Element
Menu: $( "#menu" ).menu(); // #menu ist div, welches liste und unterlisten einschliesst; wird ausklappbar untereiander dargestellt
Progressbar: $( "#progressbar" ).progressbar({ value: 37 }); // zeigt an, wielange Seite zu laden noch braucht
Slider: $( "#slider" ).slider(); // Balken auf dem man Werte einstellen kann
Spinner: // zum hoch und runterzählen, rechts neben select Eingabepfeile
Tabs: $( "#tabs" ).tabs({ collapsible: true });
Tooltip: $( document ).tooltip();
Effekte: $( "#effect" ).effect( "bounce", "slow"); // Vielzahl von Effekte können auf Boxen angewandt werden