Selektoren in jQuery

Ich möchte eine Serie starten in der Stück für Stück der Umgang mit jQuery seinen Elementen, Selektoren, Plugins, etc. beschrieben wird. Beginnen werde ich mit einer Beschreibung der verschiedenen Selektoren..

Grundlegende Selektoren

• $(‘code’)
• $(‘#someID’)
• $(‘.someClass’)
• $(‘*’)

1

XXX.css("border","3px solid red");

Für XXX wird einfach einer der obigen Selektoren eingesetzt. Besonders ist die Form mit *, die auf alle Elemente in dem Dokument angewendet wird.

Einfache Filter Funktionen

• $(‘li:first’)
• $(‘li:last’)
• $(‘li:not(li:first)’)
• $(‘li:even’)
• $(‘li:odd’)

Diese Selektoren wählen Elemente unter einer bestimmten Bedinung aus. “li-first” z.B. ist eine Referenz auf das erste Objekt einer ungeordneten Liste. “li:not(li:first)” gibt Referenzen auf alle Listenpunkte ausser dem ersten aus und erlaubt eine gewünschte Manipulation dieser Objekte.

1

$("tr:even").css("background-color", "#bbbbff");

Dieser Code würde in einer Tabelle für jeden geradzahligen Index die Hintergrundfarbe mittels der CSS Eigenschaft auf einen neuen Farbton ändern.

Content Filter

• $(‘li:contains(‘stringXXX’)')
• $(‘:empty’)
• $(‘li:has(a)’)
• $(‘p:parent’)

“contains” würde hier alle ListenElemente verändern in denen die Stringphrase “stringXXX” vorkommt.
“empty” prüft alle Elemente darauf ob ein Kindknoten im DOM-Baum vorhanden ist. Auch ein einfacher Text in ein p-Tag würde nicht zurückgegeben werden.

1

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

Visibility Filter

• $(‘:hidden’)
• $(‘:visible’)

Siehe dazu: 3-einfache-tips-fur-die-anpassung-auf-jquery-1.3

Attribut Filter

• $(‘li[class]‘)
• $(‘a[rel="self"]‘)
• $(‘[class^="my"]‘)
• $(‘a[title$="blog"]‘)

Eine interessante Möglichkeit ist das Filtern von Elementen anhand eines Attributes. “li[class]” spricht das oder die Element(e) an, die eine Attribut class besitzen.
“a[rel="self"]” zeigt auf Elemente von link Tags, welche im Attribut “rel” den Wert “self” besitzen.
Der dritte Listepunkt zeigt auf alle Knotenelemente die bei ihrem class Attribut mit “my” beginnen.
Der letzte Punkt stellt eine Möglichkeit dar, nach Elementen zu suchen, die am ende eines Attributes ein bestimmten String als Wert besitzen.

1

$("input[class^='my']").val("news here!");

Formulare

• $(‘:input’)
• $(‘:text’)
• $(‘:radio’)
• $(‘:checkbox’)
• $(‘:submit’)
• $(‘:image’)
• …

Hiermit lassen sich in HTML spezifizierten Formen von Formularfeldern ansprechen.

Formular Filter

• $(‘input:enabled’)
• $(‘:disabled’)
• $(‘:checked’)
• $(‘:selected’)

Mit diesen Filtern lassen sich abgeleitet von verschiedenen Eigenschaften der Formularfelder Elemente referenzieren. Also kann mit können mithilfe obiger Selektoren beispielsweise alle Felder die derzeit die Eigenschaft disabled besitzen ansprechen und manipulieren.

1

$("input:disabled").val("this is it");

3 einfache Tips für die Anpassung auf jQuery 1.3

Vor ein paar Monaten erschien der jQuery Realease 1.3. Viele Skripts, die auf den vorherigen Versionen basierten laufen immernoch anständig. Aber hier und da treten doch Probleme beim Upgrade auf. Diese Probleme lassen sich nach Karl Swedberg in 3 Ebenen klassifizieren:

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.

Tips zum Umgang mit jQuery

Fertige Komponenten in die eigenen Sites bauen ist das eine. Das andere ist natürlich die Funktionailität selbst zu bauen. Dafür sind detailierte Kenntnisse über das Coding mittels jQuery notwendig. Hier mal ein paar Beispiele zum warm werden..
each statt for oder while

For-Schleifen mit Inkrementor, While-Schleifen mit Abbruch Bediengung. Kein großes Problem, aber oft umständlich. Viel einfacher geht es mit der each oder for-each Schleife. Vor allem in Verbindung mit Arrays. Auch in Java 5 steht das each wieder zur Verfügung. Hier mal ein kleines Beispiel:

1
2
3
4
5
6
7
8

var myArray = ['MooTools','Prototype','jQuery'];
 
$.each(myArray, function(index, item) {
// Mache etwas mit dem Arrayelement
// return false für Abbruch, true für weitermachen
// each wird automatisch verlassen wenn jedes Element
// durchlaufen ist
});

Filter Funktion

Damit lassen sich Elemente aus dem DOM-Baum einfach entfernen. Im Code kann das wie folgt aussehen:

1
2
3
4

$('div').filter(function(){
    return this.childNodes.length > 5;
    // Gibt einen Boolschen Wert zurück
});

Eventhandling mal anders

Um ein Event an ein Element zu binden ist nicht zwingend die ID des Elements notwendig. Dieser Vorgang lässt sich auch einfach mittels Variable umsetzen.

1
2
3
4
5
6

var myDiv = $('<div>').appendTo('body');
 
// Verwende myDiv um Click Funktion herzustellen
myDiv.bind('click', function(){
    // do something......
});</div>

Logger für Performance Messung

Es gibt für ein Problem immer viele Lösungen. Um rauszufinden welche sich besser eignet stehen mit jQuery Konsolen Befehle zur Verfügung.

1
2
3
4
5
6
7
8
9

console.time('Test1');
   // Programmlogik der ersten Variante..
console.timeEnd('Test1');
 
console.time('Test2');
   // Logik der Zweiten...
console.timeEnd('Test2');
 
// Das Firefox Plugin "Firebug" wird das Ergebnis mitloggen

Einführung zu Mootools

Das MooTools Framework existiert momentan in der Version 1.2.
Für Leute, die noch nichts damit zu tun hatten ist vorsicht angesagt, da sich viele Komponenten noch in der Version 1.11 befinden und die Klasse Fx.Style daraus nicht mehr exisitiert. Sie wurde durch Tween und Morph ersetzt. Ein umschreiben ist zwar möglich aber sehr zeitaufwendig und nur fortgeschrittenen JS-Prorammierern zu empfehlen.

Allgemein lässt sich zum Framework sagen, dass es damit auf relativ einfache Weise möglich ist moderne, flashähnliche Animationen zu bauen, das CSS zu ändern oder auch Content dynamisch via AJAX nachzuladen. Basis hiervon ist die Manipulation von DOM-Elementen über Selektoren. Man spricht einzelne Elemente im MooTools-Syntax an (quasi äquivalent zu document.getElementById) und nutzt die im Framework gegeben Funktionen um die Eigenschaften zu ändern.

MooTools ist eines der neueren Javascript-Frameworks, besitzt aber schon eine große Entwicklergemeinde und eine Menge von fertigen Komponenten zum Download.

Interessante Links für Einsteiger:

• Die offizielle MooTools Website
• Ein inoffizielles aber gut besuchtes MooTools Forum