JAVASCRIPT LEVEL 1

Teil 3 - jQuery

Was ist jQuery?

jQuery (auch: jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt.

$

Das jQuery Objekt

var $object = $('.irgend .ein > .selektor');
  • Kann nur ein Element betreffen
  • Kann auch mehrere Elemente gleichzeitig betreffen
  • Alle Funktionsaufrufe auf einem jQuery Objekt wirkt sich auf alle betroffenen Elemente aus

Native vs. jQuery

Schleife über mehrere DOM Elemente

$(selector).each(function(i, el){

});
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) {

}

jQuery

Native DOM API

Vorteile von jQuery

  • Vereinfachtes Handling vom DOM
  • Browserkompatibilität (nicht mehr so relevant)
  • Weniger Code === Weniger Komplexität
  • Extreme Verbreitung und unzählige 
    Erweiterungen!

Wichtigste Funktionen jQuery Objekt

  • $(selector).addClass(klassenName);
  • $(selector).css(styleName, styleWert);
  • $(selector).each(function (index, element) { });
  • $(selector).find(selector);
  • $(selector).on(eventName, function (event) { });
  • $(selector).hide(); *
  • $(selector).show(); *

http://oscarotero.com/jquery/

* Es sollte mit CSS Klassen und addClass / removeClass gearbeitet werden

Übung Calculator

JSBins

Made with Slides.com