JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

Avalanche


    Figure 3-2 zeigt das Ergebnis dieses HTML-Codes.
    Figure 3-2. Code-Ausgabe
    Wie Sie sehen können, haben wir einfach eine geordnete Liste genutzt, um alle Teams in der Platzierungsreihenfolge auszugeben. Dann haben wir mit jQuery eine Linie unterhalb des achten Elements in jeder Liste ausgegeben. Wir mussten jeder geordneten Liste eine ID hinzufügen, um sie jeweils in einer eigenen Abfrage ansprechen zu können. Hätten wir nur
$("li").eq(7);
genutzt, wäre nur die erste Liste berücksichtigt worden, weil die Abfrage alle

-Elemente auf der Seite gemeinsam durchgezählt hätte.
    Diskussion
    Die Methode
.eq()
wird genutzt, um ein Selektions-Set auf ein einzelnes Element aus diesem Set zu reduzieren. Das Argument ist dabei der Index des gewünschten Elements. Dieser beginnt bei 0 und endet bei length −1. Ist das Argument ein ungültiger Index, liefert die Methode nicht null, sondern ein leeres Set zurück.
    Die Methode
.eq()
entspricht der Verwendung von
$(":eq()");
direkt in der Selektion, aber mit ihrer Hilfe können Sie auch Verkettungen vornehmen und das Ergebnis besser kontrollieren. Zum Beispiel:
$("li").css("background-color","#CCCCCC").eq(0).css("background-color","#ff0000");
    Damit wird die Hintergrundfarbe aller

-Elemente geändert und dann das erste ausgewählt und nochmals mit einer anderen Hintergrundfarbe versehen (vielleicht, um es als Überschrift zu kennzeichnen.

Ein selektiertes jQuery-Objekt in ein reines DOM-Objekt konvertieren
    Problem
    Selektiert man auf einer Seite durch jQuery-Methoden Elemente, erhält man ein Set aus jQuery-Objekten, aber nicht aus reinen DOM-Objekten. Da es sich um jQuery-Objekte handelt, können Sie diese nur mit jQuery-Methoden bearbeiten. Um DOM-Methoden und -Eigenschaften nutzen zu können, muss das Set in ein DOM-Objekt konvertiert werden.
    Lösung
    jQuery stellt eine Core-Methode
get(
)
bereit, die alle gefundenen jQuery-Objekte in ein Array mit DOM-Objekten zurückwandelt. Zusätzlich können Sie einen Index-Wert als Argument angeben, der nur das Element an der entsprechenden Index-Position als DOM-Objekt zurückgibt, zum Beispiel
$.get(1);
. Allerdings ist diese Möglichkeit eher aus historischen Gründen vorhanden. Statt
$.get(index)
sollten Sie lieber die Notation über
[]
nutzen, zum Beispiel also
$("div")[1];
.
    ----
    Warning
    Wir reden hier über die Core-Methode
.get()
, die ein jQuery-Objekt in ein DOM-Array umwandelt. Es gibt auch eine Ajax-Methode
get
, mit der eine Seite per HTTP GET-Anfrage geladen wird.
    ----
    Da
get()
ein Array zurückgibt, können Sie dieses durchlaufen, um an die DOM-Elemente zu gelangen. Durch die Umwandlung können Sie all die klassischen DOM-Eigenschaften und -Methoden nutzen. Lassen Sie uns ein einfaches Beispiel mit
innerHTML
betrachten:
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Kapitel 3 - Rezept 3 - Konvertieren eines selektierten jQuery-Objekts in ein <br />     reines DOM-Objekt

     jQuery die JavaScript-Bibliothek für weniger Schreiben und mehr Erreichen.
     Hilft Entwicklern seit 2006.

    Figure 3-3 zeigt das Ergebnis.
    Figure 3-3. Code-Ausgabe
    Wir selektieren zunächst alle

-Elemente auf der Seite und rufen dann
[0]
auf. Dabei übergeben wir den Index des Objekts, an dem wir interessiert sind. Da es nur ein

auf der Seite gibt, übergeben wir hier
0
. Schließlich rufen wir eine Eigenschaft, hier
innerHTML
, auf, um das reine DOM-Element zu erhalten.
    Diskussion
    Die Core-Methode
get()
kann sehr nützlich sein, da es einige Nicht-jQuery-Methoden gibt, die wir für unsere Zwecke einsetzen können. Stellen Sie sich vor, wir haben eine Liste und wollen diese in umgekehrter Reihenfolge ausgeben. Da
get()
ein Array zurückliefert, können wir dessen Methoden nutzen, um die Liste umgekehrt zu sortieren und sie dann wieder auszugeben:
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"