JQuery Kochbuch (German Edition)

Beispiel, in dem Sie alle Eingabe-Felder in einer Form selektieren wollen, bevor es abgeschickt wird:
jQuery('form').bind('submit', function(){
    var allInputs = jQuery('input', this);
    // Jetzt können Sie etwas mit 'allInputs' machen
});
    Beachten Sie, dass als zweites Argument
this
übergeben wurde. In diesem Handler bezieht sich
this
dabei auf das Form-Element. Da es als Kontext übergeben wird, gibt jQuery nur
input
-Elemente innerhalb dieses Forms zurück. Hätten wir es nicht übergeben, würden alle
input
-Elemente des Dokuments selektiert – was wir natürlich nicht wollen.
    Wie schon erwähnt können Sie auch einen normalen Selektor als Kontext übergeben:
jQuery('p', '#content');
    Dieser Code liefert das Gleiche zurück wie der folgende Selektor:
jQuery('#content p');
    Durch die Angabe eines Kontext können sich Lesbarkeit und Geschwindigkeit verbessern. Es ist manchmal durchaus hilfreich, dieses Feature zu kennen!
    Diskussion
    Der von jQuery genutzte Standard-Kontext ist
document
, also das oberste Element der DOM-Hierarchie. Geben Sie nur dann einen Kontext an, wenn sich dieser vom Standardwert unterscheiden soll. Ein Kontext kann dabei auch wie folgt genutzt werden:
jQuery( context ).find( selector );
    Genau das passiert auch hinter den Kulissen von jQuery.
    Haben Sie also schon eine Referenz auf den Kontext, sollten Sie diesen anstatt eines Selektors übergeben – es ist nicht sinnvoll, jQuery den Selektionsprozess nochmals durchlaufen zu lassen.

Einen eigenen Filter-Selektor erstellen
    Problem
    Sie brauchen einen wiederverwendbaren Filter, um bestimmte Elemente abhängig von ihren Eigenschaften zu filtern. Sie brauchen etwas, das kurz und bündig ist und das auch in Ihren Selektions-Ausdrücken genutzt werden kann.
    Lösung
    Sie können die Selektions-Ausdrücke von jQuery unterhalb des Objekts
jQuery.expr[':']
erweitern – das ist ein Alias für
Sizzle.selectors.filters
. Jeder neue Filter-Ausdruck wird als Eigenschaft dieses Objekts definiert, wie zum Beispiel:
jQuery.expr[':'].newFilter = function(elem, index, match){
    return true; // Liefert true/false je nach Wunsch zurück
};
    Die Funktion wird für alle Elemente in der aktuellen Collection aufgerufen. Sie muss entweder true zurückgeben (um das aktuelle Element in der Collection zu halten) oder false (um es daraus zu entfernen). Dabei werden drei Parameter übergeben: das betreffende Element, der Index des Elements in Bezug auf die gesamte Collection und ein Ergebnis-Array eines regulären Ausdrucks, das wichtige Informationen für komplexere Ausdrücke enthält.
    Stellen Sie sich zum Beispiel vor, dass Sie alle Elemente erreichen wollen, die eine bestimmte Eigenschaft besitzen. Dieser Filter passt auf alle Elemente, die inline angezeigt werden:
jQuery.expr[':'].inline = function(elem) {
    return jQuery(elem).css('display') === 'inline';
};
    Jetzt haben wir einen eigenen Selektor erzeugt und können ihn in beliebigen Selektions-Ausdrücken nutzen:
// Beispiel #1
jQuery('div a:inline').css('color', 'red');
// Beispiel #2
jQuery('span').filter(':not(:inline)').css('color', 'blue')
    Die jQuery-eigenen Selektoren (
:radio
,
:hidden
und so weiter) sind genauso entstanden.
    Diskussion
    Wie schon erwähnt handelt es sich beim dritten Parameter um ein Array, das das Ergebnis eines Regex-Ausdrucks enthält, den jQuery auf den Selektions-String anwendet. Diese Daten sind insbesondere dann nützlich, wenn Sie einen Filter-Ausdruck erstellen wollen, der selbst Parameter erwartet. Gehen wir einmal davon aus, dass wir einen Selektor erstellen wollen, der von jQuery gehaltene Daten abfragt:
jQuery('span').data('something', 123);

// Wir wollen so etwas machen können:
jQuery('*:data(something,123)');
    Zweck dieses Selektors ist es, alle Elemente auszuwählen, denen mit Hilfe der jQuery-Methode
data()
Daten zugewiesen wurden – genauer gesagt, Daten mit dem Schlüssel
something
und dem Wert 123.
    Der entsprechende Filter (
:data
)könnte so erzeugt werden:
jQuery.expr[':'].data = function(elem, index, m) {
    
    // Entfernen von ":data(" und dem abschließenden ")" aus der
    // Übereinstimmung, da diese Teile nicht benötigt werden
    m[0] = m[0].replace(/:data\(|\)$/g, '');
    
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
     // Datenschlüssel auslesen:
     key = regex.exec( m[0] )[2],
     // Zu prüfenden Datenwert auslesen:
     val = regex.exec( m[0] );
    
    if (val) {
     val = val[2];
    }
    
    // Wenn ein Wert übergeben wurde, prüfen wir den,