JQuery Kochbuch (German Edition)

Rückgabe-Array besteht dann aus den veränderten Array-Elementen.

Zwei Arrays durch jQuery.merge kombinieren
    Problem
    Sie haben zwei Arrays, die Sie kombinieren oder konkatenieren müssen.
    Lösung
(function($) {
    $(document).ready(function() {
     var horseBreeds = ['Quarter Horse', 'Englisches Vollblut', 'Araber'];
     var draftBreeds = ['Brabanter', 'Percheron'];

     var breeds = $.merge( horseBreeds, draftBreeds );
     $('#horses').html( '

' + breeds.join('

') + '

' );
    });
})(jQuery);
    Diskussion
    In diese Beispiel haben wir zwei Arrays mit Pferderassen. Diese werden nun kombiniert, so dass der Inhalt des zweiten Arrays auf den des ersten folgt. Das Ergebnis-Array sieht also so aus:
['Quarter Horse', 'Englisches Vollblut', 'Araber', 'Brabanter', 'Percheron']

Doppelte Array-Einträge mit jQuery.unique ausfiltern
    Problem
    Sie haben zwei jQuery-DOM-Collections, aus denen die doppelten Einträge entfernt werden sollen:
(function($) {
    $(document).ready(function() {
     var animals = $('li.animals').get();
     var horses = $('li.horses').get();
     $('#animals')
     .append( $(animals).clone() )
     .append( $(horses).clone() );
    });
})(jQuery);
    Lösung
(function($) {
    $(document).ready(function() {
     var animals = $('li.animals').get();
     var horses = $('li.horses').get();
     var tmp = $.merge( animals, horses );
     tmp = $.unique( tmp );
     $('#animals').append( $(tmp).clone() );
    });
})(jQuery);
    Diskussion
    Die jQuery-Funktion
$.unique()
entferntdoppelte DOM-Elemente aus einem Array oder einer Collection. Im Rezept haben wir die Arrays
animals
und
horses
per
$.merge()
kombiniert. jQuery nutzt
$.unique()
in vielen Core- und internen Funktionen, wie zum Beispiel
.find()
und
.add()
. Daher wird man selbst diese Methode vor allem dann nutzen, wenn man mit Arrays arbeitet, deren Elemente nicht per jQuery erzeugt wurden.

Callback-Funktionen mit jQuery.isFunction testen
    Problem
    Sie haben ein Plugin geschrieben und müssen prüfen, ob es sich bei einer der Einstellungen um eine gültige Callback-Funktion handelt.
    Lösung
(function($) {
    $.fn.myPlugin = function(settings) {
     return this.each(function() {
     settings = $.extend({ onShow: null }, settings);
     $(this).show();
     if ( $.isFunction( settings.onShow ) ) {
     settings.onShow.call(this);
     }
     });
    };
    $(document).ready(function() {
     $('div').myPlugin({
     onShow: function() {
     alert('Mein Callback!');
     }
     });
    });
})(jQuery);
    Diskussion
    In JavaScript ist zwar der Operator
typeof
verfügbar,aber bei einer Browser-übergreifenden Programmierung müssen inkonsistente Ergebnisse und Grenzfälle berücksichtigt werden. jQuery stellt die Methode
.isFunction()
bereit,um die Arbeit des Entwicklers zu vereinfachen. Seit Version 1.3 funktioniert diese Methode für Benutzer-definierte Funktionen, während sie bei »eingebauten« Funktionen wie
jQuery.isFunction( document.getElementById );
    auch inkonsistent reagieren kann – im Internet Explorer wird hier ein false zurückgegeben.

Whitespace aus Strings oder Form-Werten mit jQuery.trim entfernen
    Problem
    Sie haben eine Form und müssen den Whitespace entfernen, den der Anwender am Anfang oder Ende des Strings eingegeben hat.
    Lösung



(function($) {
    $(document).ready(function() {
     $('input.cleanup').blur(function() {
     var value = $.trim( $(this).val() );
     $(this).val( value );
     });
    });
})(jQuery);
    Diskussion
    Nachdem der Anwender ein Feld verlassen hat, wird der eingegebene Wert –
$(this).val()
– ausgelesen und an die Methode
$.trim()
weitergegeben,die alle Whitespace-Zeichen (Leerzeichen, Tab und Zeilenumbruch) am Anfang und Ende des Strings entfernt. Der so beschnittene String wird dann wieder als Wert in das Input-Feld eingefügt.

Objekte und Daten per jQuery.data an DOM-Elemente anhängen
    Problem
    Schauen Sie sich folgenden DOM-Code an:
var node = document.getElementById('myId');
node.onclick = function() {
    // Click-Handler
};
node.myObject = {
    label: document.getElementById('myLabel')
};
    Hier haben Sie einem DOM-Objekt zur einfacheren Referenzierung Metadaten hinzugefügt. Aufgrund von fehlerhaften Garbage Collections in einigen Web-Browsern kann dieser Code zu Speicherlecks führen.
    Lösung
    Fügt man einem DOM-Knoten zur Laufzeit Eigenschaften hinzu (genannt Expandos ), führt das aufgrund von fehlerhaften Implementierungen der Garbage Collection in manchen Web-Browsern zu