Du bist hier: Tips » Scripte » jQuery

eq

Text
Elemente
Version

test

.add()

Erstellen Sie ein neues jQuery-Objekt mit Elementen, die dem Satz übereinstimmender Elemente hinzugefügt wurden.

Version hinzugefügt: 1.1.2.eq( index )
- index
  
  Type: Integer
  
  Eine Ganzzahl, die die 0-basierte Position des Elements angibt.
Version hinzugefügt: 1.4.eq( indexFromEnd )
- indexFromEnd
  
  Type: Integer
  
  Eine Ganzzahl, die die Position des Elements angibt und vom letzten Element im Satz rückwärts zählt.

Die jQuery-Selektoren sind die wohl wichtigsten Bestandteile der JavaScript-Bibliothek. Mit ihnen passen Sie die verschiedenen Elemente Ihrer Website an. Dabei gibt es unterschiedliche Selektorenarten, die HTML-Einheiten nach verschiedenen Kriterien wie ID, Klasse, Typ etc. finden und auswählen. Der häufig verwendete Element-Selektor ordnet HTML-Elementen die jeweiligen Aktionen anhand ihres Namens zu.

Selektor	Beschreibung
$("*")	wählt alle Elemente aus
$(this)	wählt das gegenwärtige Element aus
$("p:first")	wählt das erste<p>-Element aus
$("ul li:first-child")	wählt jeweils die erste Listenelemente <li> aller vorhandenen <ul>-Auflistungen
$("[href]")	wählt alle Elemente mit einem href-Attribut aus
$("tr:even")	wählt alle geraden Tabellenzeilen aus
$("tr:odd")	wählt alle ungeraden Tabellenzeilen aus
$("p.intro")	wählt alle <p>-Elemente mit der Klasse class="intro" aus

Ein Element im Document Object Model (DOM) kann Attribute, Text und untergeordnete Elemente haben. Es bietet Methoden zum Durchlaufen der übergeordneten und untergeordneten Elemente und zum Zugriff auf deren Attribute. Aufgrund von Inkonsistenzen in den DOM-API-Spezifikationen und -Implementierungen kann die Verwendung dieser Methoden jedoch eine Herausforderung darstellen. jQuery bietet einen „Wrapper“ um diese Elemente, um die Interaktion mit dem DOM zu erleichtern. Aber manchmal arbeiten Sie direkt mit DOM-Elementen oder sehen Methoden, die (auch) DOM-Elemente als Argumente akzeptieren.

Immer wenn Sie die .each()-Methode von jQuery oder eine ihrer Ereignismethoden für eine jQuery-Sammlung aufrufen, wird der Kontext der Rückruffunktion – this – auf ein DOM-Element gesetzt.

Einige Eigenschaften von DOM-Elementen sind in allen Browsern recht konsistent. Betrachten Sie dieses Beispiel einer einfachen Onblur-Validierung:

$( "input[type='text']" ).on( "blur", function() {
  if( !this.value ) {
    alert( "Please enter some text!" );
  }
});

Sie könnten this.value durch $(this).val() ersetzen, um über jQuery auf den Wert der Texteingabe zuzugreifen, aber in diesem Fall würden Sie nichts gewinnen.

Ein String wird in der jQuery-Dokumentation als htmlString bezeichnet, wenn er verwendet wird, um ein oder mehrere DOM-Elemente darzustellen, die normalerweise erstellt und in das Dokument eingefügt werden. Bei der Übergabe als Argument der jQuery() - Funktion wird der String als HTML identifiziert, wenn er mit beginnt und als solcher bis zum letzten > -Zeichen geparst. Vor jQuery 1.9 galt ein String als HTML, wenn er an einer beliebigen Stelle innerhalb des Strings enthielt.

Wenn ein String als Argument an eine Manipulationsmethode wie .append() übergeben wird, wird er immer als HTML betrachtet, da jQuerys andere übliche Interpretation eines Strings (CSS-Selektoren) in diesen Kontexten nicht gilt.

Für das explizite Parsen eines Strings in HTML steht ab jQuery 1.8 die Methode $.parseHTML() zur Verfügung.

// Appends <b>hello</b>:
$( "<b>hello</b>" ).appendTo( "body" );
 
// Appends <b>hello</b>:
$( "<b>hello</b>bye" ).appendTo( "body" );
 
// Syntaxfehler, unbekannter Ausdruck: bye<b>hello</b>
$( "bye<b>hello</b>" ).appendTo( "body" );
 
// Appends bye<b>hello</b>:
$( $.parseHTML( "bye<b>hello</b>" ) ).appendTo( "body" );
 
// Appends <b>hello</b>wait<b>bye</b>:
$( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" );

Ein jQuery-Objekt enthält eine Sammlung von Document Object Model (DOM)-Elementen, die aus einer HTML-Zeichenfolge erstellt oder aus einem Dokument ausgewählt wurden. Da jQuery-Methoden häufig CSS-Selektoren verwenden, um Elemente aus einem Dokument abzugleichen, wird der Satz von Elementen in einem jQuery-Objekt häufig als Satz „übereinstimmender Elemente“ oder „ausgewählter Elemente“ bezeichnet.

Das jQuery-Objekt selbst verhält sich ähnlich wie ein Array; Es verfügt über eine length-Eigenschaft und auf die Elemente im Objekt kann über ihre numerischen Indizes [0] bis [length-1] zugegriffen werden. Beachten Sie, dass ein jQuery-Objekt eigentlich kein Javascript-Array-Objekt ist und daher nicht über alle Methoden eines echten Array-Objekts wie join() verfügt.

Am häufigsten verwenden Sie die Funktion jQuery(), um ein jQuery-Objekt zu erstellen. Auf jQuery() kann auch über den bekannten Einzelzeichen-Alias $() zugegriffen werden, es sei denn, Sie haben jQuery.noConflict() aufgerufen, um diese Option zu deaktivieren. Viele jQuery-Methoden geben das jQuery-Objekt selbst zurück, sodass Methodenaufrufe verkettet werden können:

Bei API-Aufrufen, die jQuery zurückgeben, ist der zurückgegebene Wert das ursprüngliche jQuery-Objekt, sofern von dieser API nichts anderes dokumentiert wird. API-Methoden wie .filter() oder .not() ändern ihren eingehenden Satz und geben so ein neues jQuery-Objekt zurück.

$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );

Immer wenn Sie eine „destruktive“ jQuery-Methode verwenden, die möglicherweise die Menge der Elemente im jQuery-Objekt ändert, wie z. B. .filter() oder .find(), gibt diese Methode tatsächlich ein neues jQuery-Objekt mit den resultierenden Elementen zurück. Um zum vorherigen jQuery-Objekt zurückzukehren, verwenden Sie die Methode .end().

Ein jQuery-Objekt kann leer sein und keine DOM-Elemente enthalten. Sie können mit $() ein leeres jQuery-Objekt erstellen (d. h. ohne Übergabe von Argumenten). Ein jQuery-Objekt kann auch leer sein, wenn ein Selektor keine Elemente auswählt oder wenn eine verkettete Methode alle Elemente herausfiltert. Es ist kein Fehler; Alle weiteren Methoden, die für dieses jQuery-Objekt aufgerufen werden, haben einfach keine Auswirkung, da sie keine Elemente haben, auf die sie reagieren können. Wenn es in diesem Beispiel also keine fehlerhaften Einträge auf der Seite gibt, werden keine Elemente rot gefärbt:

$( ".badEntry" ).css({ color: "red" });

Bei einer jQuery Objekt, das eine Reihe von DOM Elemente darstellt, die .eq() baut eine neue Verfahren jQuery Objekt von einem Element innerhalb dieses Satzes. Die mitgelieferte Index identifiziert die Position dieses Elements im Set.

Beispiel:

Schalten Sie das div mit dem Index 2 blau durch Zugabe eines geeigneten Klasse.

<DOCTYPE html>
  <html>
    <head>
      <style>
        div { width:60px; height:60px; margin:10px; float:left;
              border:2px solid blue; }
        .blue { background:blue; }
      </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
  <body>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
$("body").find("div").eq(2).addClass("blue");
    </script>
  </body>
</html>

» .end()
» .error()

eq

Version hinzugefügt: 1.1.2.eq( index )

Version hinzugefügt: 1.4.eq( indexFromEnd )