Web Development

Im ersten Teil des Buches, in den Kapiteln Formular und Javascript, Javascript DOM und jQuery wurde Javascript und jQuery bereits vorgestellt.

Nun wollen wir dieselben Themen nocheinmal genauer betrachten.

das jQuery Objekt

Alle Funktionen die wir hier disskutieren werden geben immer ein jQuery Objekt zurück, dass eine Liste von Nodes anhalten kann. Manchmal ist diese Liste leer, manchmal enthält sie nur ein Element, manchmal mehrere.

Wenn man mit einem jQuery Objekt arbeitet muss man sich also bewusst sein, arbeitet man immer in der Mehrzahl, nie in der Einzahl.

Um die jQuery Objekte besser von anderen Javascript Variablen unterscheiden zu können werden wir ihre Variablennamen immer mit einem Dollar beginnen.

// von Javascript zu jQuery

// Eine Node nach ID auswählen 
node = document.getElementById("id");

// jQuery Objekt konstruieren
$q = $(node);

// von jQuery nach Javascript

// Eine Node mit ID auswählen 
$q = $("#idname");

// DOM-Node extrahieren:
node = $q.get(0);
node = $q[0];

Wenn mehrere Nodes gefunden werden muss das in jQuery nicht besonders behandelt werden, in reinem Javascript schon:

// plain Javascript
// Nodes mit CSS-Selektor auswählen
arr = document
        .querySelectorAll(".class");

// wie viele sind es?
if( arr.length > 1 ) {
  console.log("mehrere");
}

// in jQuery-Objekt
$q = $(arr);

// jQuery
// Nodes mit CSS-Selektor auswählen
$q = $(".class");


// wie viele sind es?
if( $q.length > 1 ) {
  console.log("mehrere");
}

// extrahieren
var i=0, arr=Array();
while( i < $q.length ) {
  arr[i] = $q.get(i);
}

Selektieren

Wie wählt man Nodes aus der DOM aus?

// plain Javascript

// Eine Node nach ID auswählen
node = document.getElementById("id");

// Erste Node auswählen
node = document.querySelector("h2");


// Alle Nodes auswählen
arr= document.querySelectorAll("h2");

// jQuery 

// Eine Node nach ID auswählen 
$q = $("#id");

// Erste Node auswählen
$q = $("h2:first");   
$q = $("h2").first(); 

// Alle Nodes auswählen
$q = $("h2");

Traversieren

Wie wandert man durch den DOM-Baum?

// plain Javascript

// hinauf zur Eltern-Node
p = node.parentNode;

// Kinder sind im Array children
var i = 0;
while( i < node.children.length ) {
  node.children[0];
}

// jQuery 

// hinauf zur Eltern-Node (Mehrzahl!)
$p = $q.parent();

// Kinder 
$c = $q.children();
$c = $q.children(':selected');

// Nachfahren
$n = $q.find();
$n = $q.find(':selected');

// Geschwister
$n = $q.next('p');

Attribute

Wie liest man Attribute aus, wie setzt man sie? Das ist in reinem Javascript sogar etwas einfacher als mit jQuery: die Attribute sind einfach Eigenschaften des jeweiligen Nodes und könnnen direkt manipuiert werden.

jQuery erleichtert einerseits das Verarbeiten einer ganzen Liste von Nodes, und bietet andererseites ein paar besser verständliche Werte für Attribute:

// plain Javascript - nur erstes h2!
document.querySelector('h2').align;
document.querySelector('h2')
  .align = 'center';

// Form-Element deaktivieren
document.querySelector('input')
  .disabled = true;

// existiert nicht

// jQuery - alle h2!
$('h2').attr('align');
$('h2')
  .attr('align', 'center');

// Form-Element deaktivieren
$('input')
  .attr('disabled', true);

// Node nach Attribut auswählen:
// Input-Tag mit ID und Attribut 
// 'name' das auf '_no' endet
$('input[id][name$=_no]')

Bei der Manipulation von CSS ist zu beachten: die Schreibweise von CSS-Eigenschaften mit einem Minus-Zeichen lässt sich nicht nach Javascript übertragen. In Javscript wird deswegen aus background-color die Eigenschaft backgroundColor.

// Style setzen - Schreibweise!
document.querySelector('h2')
  .style.backgroundColor = "yellow";

// Style setzen
 $('h2')
  .css('background-color', 'yellow');

// mehrere Eigenschaften setzen
 $('h2')
  .css({backgroundColor: 'yellow',
    color: 'red'});

Statt den Style direkt zu manipulieren sollte man Klassen setzen:

// Klassen setzen
var cl = d.querySelector('#foo')
           .classList;
cl.add('bar');
cl.remove('bar');
cl.toggle('bar');
// Klassen abfragen
cl.contains('bar');

// Klassen setzen


$('#foo').addClass('bar');
$('#foo').removeClass('bar');
$('#foo').toggle('bar');
// Klassen abfragen
$('#foo').hasClass('bar');

HTML einfügen

Wie fügt man eine Node in die DOM ein?

// plain Javascript

// Text einfügen
t= document.createTextNode("Hello"); 
node.appendChild(t);

// Tag einfügen
l = document.createElement("a"); 
l.setAttribute('href', 'page.html');
l.appendChild(t);
node.appendChild(t);


// hack
node.innerHTML = 
  "<a href='page.html'>Hallo</a>";

// jQuery 

// Text einfügen
$n.append("Hallo");


// Tag einfügen
$l = $(
  "<a href='page.html'>Hallo</a>"
);
$n.append($l);


// oder
$l = $("<a>")
       .attr('href', 'page.html')
       .text('Hallo');
$n.append($l);

Clonen

Wie kopiert oder verschiebt man eine vorhandene Node?

// plain Javascript

// dolly kopieren und einfügen
var d2 = document
  .getElementById('dolly')
  .cloneNode();
document.getElementById('da')
  .appendChild(d2);

// kirk ans ziel verschieben
var beam = document
  .getElementById('kirk')
  .removeChild();
document.getElementById('da')
  .appendChild(beam);

// jQuery

// dolly kopieren und einfügen
$('#dolly').clone().appendTo('#da');





// kirk ans ziel verschieben
$('#da').append($('kirk').remove());

Event-Listener

Wie fügt man einen Event-Handler ein?

// plain Javascript
node.addEventListener("click", f);

// jQuery 
$n.on("click", f);

Wann brauche ich jQuery? Wann brauche ich ein Framework?

Als jQuery im Jahre 2006 erschien brachte es große Fortschritte gegenüber “reinem Javascript”. In den Jahren seither hat jQuery die Weiterentwicklung von Javascript beeinflusst: so wurde querySelector und querySelectorAll erst nach jQuery in den Javascript Standard aufgenommen, und landet z.B. in Firefox 3.5 im Juni 2009.

Die “reine Javascript” Lösung bringt bessere Performance, besonders auf mobilen Endgeräten, wo das Laden der Liberary und der Speicherverbrauch durch die Libraray größere Auswirkungen haben als am Desktop.

Siehe auch

• Vortrag von Estelle Weyl: “You don’t need a Framework for that!”, YouTube, Slides