• 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

• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 25. Juni 2009 -- jQueryList – Plugin und Beispielsammlung
• 18. Mai 2009 -- jQuery noConflict Mode

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

• 20. Juli 2010 -- jMediaelement – jQuery HTML5 Audio-Video Kit
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 8. Dezember 2009 -- jQuery load function – Ajax the simple way (Part 1)