jquery:start
Inhaltsverzeichnis
jQuery
jQuery ist ein JavaScript-Framework.
Initialisierung
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);
Inhalt ändern
$("#foo").text("Lorem ipsum");
$("#foo").html("Lorem <em>ipsum</em>");
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"); } );
Smooth-Scrolling
$('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; }); });
Quelle: Stack Overflow: How to add smooth scrolling to Bootstrap's scroll spy function?
Cookies
Links
Tutorials
Kostenpflichtige Tutorials
jquery/start.txt · Zuletzt geändert: 2015-08-14 20:36 von a.kamola