• Elemente ansprechen
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode document.getElementById("someID"); //mit Mootools $('someID');

Mit Mootools weit kürzer und vor allem problemlos zwecks CamalCases.

• “Value” bearbeiten
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode var val= document.getElementById('input').value; //mit Mootools var val = $('input').getValue();

Mootools bietet diverse Methoden um Objekteigenschaften zu verändern oder auszulesen.

• Verketten von Methoden
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8

//javascript methode $('div').style.height = '100px'; $('div').style.background = '#ffc'; //mit Mootools $('footer').setStyles({ height: '100px', background: '#ffc' });

Einfaches Beispiel für eine Verkettung von Funktionen.

• Absetzen eines AJAX-Requests
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10

//falsche Methode new Ajax('eine.php?var1=test&var2=request');   //besser mit new Ajax('eine.php', { data: { var1: 'test', var2: 'request' } });

Beide Möglichkeiten führen zum selben Ergebnis. Allerdings ist die Überschaubarkeit für letzteres deutlich größer. Für nicht statische Variabeln wie z.B. der ‘test’-String lassen sich an dieser Stelle natürlich auch Selektoren benutzen.

• Event-Handling
^?View Code JAVASCRIPT

1 2 3 4 5

//Falsche Methode $('Container').onclick = doSomething;   //besser mit $('Container').addEvent('click', doSomething);

Die zweite Variante ist weitaus sicherer, da sich damit der Mootools Core um die Umsetzung auf den jeweiligen Browser kümmert.

• Einfache Iteration über Elementgruppen
^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.collapsed').each(function(el){ el.addEvent('click', expand); });   //besser mit $$('div.collapsed').addEvent('click', expand);

Beide Versionen selektieren in diesem Fall jedes div mit der Klasse “collapsed” und legen darauf ein Click-Event. Das “$$” gibt Elemente in Form eines Arrays zurück, so dass eine Iteration mit der each-Funktion nicht mehr nötig ist.
Gleiches gilt für:

^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.hidden').each(function(el){ el.removeClass('hidden'); })   //besser mit $$('div.hidden').removeClass('hidden');

Ich hoffe dem ein oder anderen Einsteiger wird damit klar, inwiefern sich Standard Javascript von dem Einsatz von MooTools unterscheidet und wie man diese Zusatzfunkionalitäten nutzen kann.

Ähnliche Artikel

• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem
• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 25. Juni 2009 -- jQueryList – Plugin und Beispielsammlung

1. Update des “Selector” Attributes

Der wohl am häufigsten auftretende Fehler entsteht durch die redefinition des Selectors auf Attribute. In vorherigen Versionen wurden die Attribute eines Elements mit dem XPath Ausdruck “@Attribute” angesprochen und geändert. Ab 1.3 basiert das Ansprechen auf dem CSS Syntax. Hierzu ein kleines Beispiel:
Früherer Syntax:

1
2

   $('a[@href^=http]');
   $('[@title=foo]');

Aktuell in jQuery 1.3:

1
2

      $('a[href^=http]');
      $('[title=foo]');

2. Überprüfung eigener Selektoren

Werden eigene Selektoren benutzt, kommt es hin und wieder zu Fehlern wenn das zweite Argumente des neuen Objektes ein String ist.

1
2
3

      jQuery.extend(jQuery.expr[':'], {
        hasSiblings: "jQuery(a).siblings(m[3]).length>0"
      });

Das lässt sich einfach durch eine anonyme Javascript Funktion beheben die als return-Wert den String besitzt.

1
2
3

 jQuery.extend(jQuery.expr[':'], {
    hasSiblings: function(a,i,m) {return jQuery(a).siblings(m[3]).length>0;}
 });

3. Notation von auf “Hidden” oder “Visible” gesetzten Elementen

Wenn man vor der Version 1.3.2, ein Element mit der Eigenschaft “display:block” hatte, dass innerhalb eines anderen Elementes mit “display:none” lag, dann wurde das innere Elemente trotzdem bei Abfrage im Code als sichtbar ausgegeben.

1
2
3
4
5

<div id="outer1" style="display:none">
        <div id="inner1">
            Nicht sichtbares div
        </div>
      </div>

Vor der Version 1.3.2 hätte der Aufruf $(‘#inner’1).is(‘:visible’) zu return true geführt und $(‘#inner1:hidden’) hätte 0 Elemente zurückgegeben.

Ab 1.3.2 führt $(‘#inner’1).is(‘:visible’) zu dem Wert false und $(‘#inner:hidden’) findet 1 passendes Element.

Ähnliche Artikel

• 1. Dezember 2010 -- jQuery Mobile – Der Seitenaufbau
• 25. November 2010 -- jQuery Mobile – Web-Apps mit jQuery
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)