====== jQuery ======

//jQuery// ist ein [[javascript:start|JavaScript-Framework]].

===== Initialisierung =====

<code javascript>
jQuery(document).ready(function($) {
	// jQuery code goes here ...
});
</code>

===== DOM-Manipulation =====

[[http://api.jquery.com/category/manipulation/|jQuery API: Manipulation]]

==== Element einfügen ====

<code javascript>
$('#foo').append('<div>Hello World</div>');
</code>

==== Element kopieren ====

<code javascript>
// Element kopieren
var foo = $('.foo').clone();

// Element wieder im DOM einfügen
$('.bar').append(foo);
</code>

[[http://api.jquery.com/clone/|jQuery API: clone()]]

==== Inhalt ändern ====

<code javascript>
$("#foo").text("Lorem ipsum");
</code>

<code javascript>
$("#foo").html("Lorem <em>ipsum</em>");
</code>

===== CSS =====

[[http://api.jquery.com/css/|jQuery API: CSS]]

<code javascript>
$('#foo').css('color', 'red');
</code>

===== Events =====

==== Hover ====

[[http://api.jquery.com/hover/|jQuery API: Hover]]

==== Toggle ====

<del>[[http://api.jquery.com/toggle-event/|jQuery API: Toggle]]</del>\\ Die ''toggle''-Funktion als Event wurde als jQuery (ab Version 1.9) entfernt.

===== Snippets =====

==== ID eines Elements ====

<code javascript>
var elementID = $('#foo').attr('id');
</code>

==== ID des Eltern-Elements ====

<code javascript>
$(this).parent().attr('id');
</code>

==== Kind-Elemente von $(this) finden ====

Bestimmte, untergeordnete Elemente (bspw. bestimmte Klassen) von ''this'' lassen sich über folgende zwei Wege selektieren (beide Arten sind equivalent):

<code jquery>
$(".class", this);
</code>

<code jquery>
$(this).find(".class");
</code>

Wenn die Elemente **direkte** Kinder von ''this'' sind, kommt auf folgende Möglichkeit in Frage:

<code jquery>
$(this).children(".class");
</code>

Quelle: [[http://stackoverflow.com/questions/306583/this-selector-and-children#answer-306904|Stack Overflow]]

==== (Direkte) Kind-Elemente eines Elements zählen ====

<code jquery>
var listItemsCount = $('ul > li').length;
</code>

Quelle: [[http://stackoverflow.com/questions/3546659/how-can-i-count-the-number-of-children|Stack Overflow]]

==== Mausposition ====

<code javascript>
var currentMousePos = { x: -1, y: -1 };

$(document).mousemove(function(event) {
	currentMousePos.x = event.pageX;
	currentMousePos.y = event.pageY;
});
</code>

Quelle: [[http://stackoverflow.com/questions/4517198/how-to-get-mouse-position-in-jquery-without-mouse-events|How to get mouse position in jQuery without mouse events – Stack Overflow]]

==== Bild austauschen ====

<code javascript>
$("#foo").attr("src","foobar.jpg");
</code>

==== Bild bei Maus-Hover austauschen ====

<code javascript>
$("img#foo").hover(
	function() {
		this.src = this.src("image2.jpg";
	},
	function() {
		this.src = this.src("image1.jpg");
	}
);
</code>

==== Smooth-Scrolling ====

<code javascript>
$('a[href^="#"]').on('click', function(e) {
	// Prevent default anchor click behavior
	e.preventDefault();

	// Store hash
	var hash = this.hash;

	// Animate
	$('html, body').animate({
		scrollTop: $(hash).offset().top
	}, 300, function(){
		// when done, add hash to url (default click behaviour)
		window.location.hash = hash;
	});
});
</code>

Quelle: [[http://stackoverflow.com/a/14805098|Stack Overflow: How to add smooth scrolling to Bootstrap's scroll spy function?]]

===== Cookies =====

  * [[https://github.com/carhartl/jquery-cookie/|jQuery Cookie Plugin]]

===== Links =====

  * [[http://jquery.com/|jQuery]]
  * [[https://pinboard.in/u:aberaberarne/t:jquery|Arnes Link-Sammlung zu jQuery]]

==== Tutorials ====

  * [[http://try.jquery.com/|Code School & jQuery: Try jQuery]]

=== Kostenpflichtige Tutorials ===

  * [[https://www.video2brain.com/de/videotraining/jquery|video2brain: jQuery]]
  * [[https://www.video2brain.com/de/videotraining/jquery-fuer-webdesigner|video2brain: jQuery für Webdesigner]]
  * [[https://www.video2brain.com/de/videotraining/jquery-mobile-crashkurs|video2brain: jQuery Mobile: Crashkurs]]
  * [[https://www.video2brain.com/de/videotraining/jquery-ui-fuer-einsteiger|video2brain: jQuery UI für Einsteiger]]