320NN Development Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: start » jquery
jquery:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
jquery:start [2015-01-11 12:32] – [Links] Link zu meiner Link-Sammlung eingefügt a.kamolajquery:start [2015-08-14 20:36] (aktuell) – [Snippets] "Smooth-Scrolling" eingefügt a.kamola
Zeile 1: Zeile 1:
 ====== jQuery ====== ====== 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 ===== ===== Links =====
  
 +  * [[http://jquery.com/|jQuery]]
   * [[https://pinboard.in/u:aberaberarne/t:jquery|Arnes Link-Sammlung zu jQuery]]   * [[https://pinboard.in/u:aberaberarne/t:jquery|Arnes Link-Sammlung zu jQuery]]
  
Zeile 8: Zeile 169:
  
   * [[http://try.jquery.com/|Code School & jQuery: Try jQuery]]   * [[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]]
jquery/start.1420975930.txt.gz · Zuletzt geändert: 2015-01-11 12:32 von a.kamola