Benutzer-Werkzeuge

Webseiten-Werkzeuge


jquery:start

Dies ist eine alte Version des Dokuments!


jQuery

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

DOM-Manipulation

Element einfügen

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

Element kopieren

// Element kopieren
var foo = $('.foo').clone();
 
// Element wieder im DOM einfügen
$('.bar').append(foo);

jQuery API: clone()

Inhalt ändern

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

CSS

jQuery API: CSS

$('#foo').css('color', 'red');

Events

Hover

Toggle

jQuery API: Toggle
Die toggle-Funktion als Event wurde als jQuery (ab Version 1.9) entfernt.

Snippets

ID eines Elements

var elementID = $('#foo').attr('id');

ID des Eltern-Elements

$(this).parent().attr('id');

Kind-Elemente von $(this) finden

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

$(".class", this);
$(this).find(".class");

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

$(this).children(".class");

Quelle: Stack Overflow

(Direkte) Kind-Elemente eines Elements zählen

var listItemsCount = $('ul > li').length;

Quelle: Stack Overflow

Mausposition

var currentMousePos = { x: -1, y: -1 };
 
$(document).mousemove(function(event) {
	currentMousePos.x = event.pageX;
	currentMousePos.y = event.pageY;
});

Quelle: How to get mouse position in jQuery without mouse events – Stack Overflow

Bild austauschen

$("#foo").attr("src","foobar.jpg");

Bild bei Maus-Hover austauschen

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

Tutorials

Kostenpflichtige Tutorials

jquery/start.1425912309.txt.gz · Zuletzt geändert: 2015-03-09 15:45 von a.kamola