jQuery

0 | 31164 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "jQuery" mit Ihrem Wissen!

Anzeige Hier werben

jQuery ist ein freies, umfangreiches JavaScript-Framework, das mächtige Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. Zur Navigation unterstützt es große Teile von XPath und vor allem CSS-Selektoren. Hinzu kommen verschiedene Programmierhilfen für Ajax wie vereinfachtes Event-Handling und animierte Effekte.

Bild zu jQuery
jQuery Logo

Selektoren

Anhand der $ (Dollar) Funktion kann man auf einfache Weise auf Elemente zugreifen. Die Funktion liefert die zum Ausdruck gefundene Elemente zurück. Das erste Argument ist ein String mit einem CSS-Selektor, als optionales zweites Argument kann man den Kontext angeben, in dem gesucht werden soll. Die Funktion gibt immer ein Array zurück, auch wenn nur ein Element gefunden wird.

Beispiele

Einfache Selektoren
Ausdruck Rückgabe
$("li") Alle <li>-Elemente.
$("#content") Das Element mit der ID content.
$(".warning") Alle Elemente mit der Klasse warning.
$("*") Alle Elemente.
$("strong, span, p.legend") Alle <strong>-Elemente und alle <span>-Elemente sowie auch alle <p>-Elemente mit der Klasse legend.
Hierarchische Selektoren
Ausdruck Rückgabe
$("form input") Alle <input>-Elemente, die sich in einem <form>-Element befinden.
$("#content > *") Alle Elemente, die als Eltern-Element das Element mit der ID content haben.
$("label + input") Alle <input>-Elemente, die unmittelbar nach einem <label>-Element folgen.
Pseudo-Selektoren
Ausdruck Rückgabe
$("a:first") Das erste <a>-Element im Dokument.
$("a:last") Das letzte <a>-Element im Dokument.
$("tr:odd") Alle ungeraden Tabellenzeilen, also die 1., 3., 5. usw.
$("tr:even") Alle geraden Tabellenzeilen, also die 2., 4., 6. usw.
$("tr > td:eq(2)") Genau die 3. Zelle aller Tabellenzeilen (Zählung beginnt bei 0).
$("tr > td:gt(3)") Alle Zellen einer Tabellenzeile die sich nach der 4 Zelle befinden.
$("tr > td:lt(3)") Alle Zellen vor der 4. Zelle also die ersten 3 Zellen einer Tabellenzeile.

Ausführen von Code bei geladenem Dokument

Im Normalfall muss man, wenn JavaScript zum Einsatz kommt, warten bis das Dokument geladen ist, damit man Zugang zu allen Elementen hat. Man kann dies wie folgt machen:

 
JavaScript
1
2
3
window.onload = function() {
    alert("Dokument geladen. Auf alle Elemente kann nun zugegriffen werden.");
}

Der Nachteil dabei ist, dass window.onload erst aufgerufen wird, wenn auch alle Bilder im Dokument vollständig geladen ist, was in einigen Fällen länger dauern kann. Dabei könnte bereits auf alle Elemente zugegriffen werden. jQuery hat eine Methode, mit der man bereits nach dem Laden des DOM-Baums Code ausführen kann.

 
JavaScript
1
2
3
$(document).ready(function(){
    alert("Dokument geladen. Auf alle Elemente kann nun zugegriffen werden.");
});

Es wird ein alert ausgegeben, sobald alle Knoten oder Nodes auf der Seite ansprechbar sind, jedoch kann es sein, dass allfällige Bilder noch nicht vollständig geladen sind.

Content Filters:

Ausdruck: Rückgabe:
$("div:contains('luggi')") Alle <div>-Elemente in denen das Wort luggi vorkommt.
$("div:empty") Alle <div>-Elemente, die keinen Inhalt haben.
$("div:has(p)") Alle <div>-Elemente, in den das <p>-Element vorkommt.
$("div").is(".myclass,.myclass2") Alle <div>-Elemente, denen die Klassen myclass1 & myclass2 zugewiesen sind.
$("div").not(".myclass, #myid, [myattribut]") Alle <div>-Elemente außer, die der Klasse myclass1 zugewiesen sind oder, die die ID myid haben oder das Atrribut myattribut besitzen.
$("div").slice(0, 10) Alle <div>-Elemente, die den Index 1-10 haben.
$("div").add("p, #myid") Alle <div>-Elemente und <p>-Elemente & alle Elemente mit der ID myid.
$("#myid").children(); Alle Elemente, die sich im Element mit der ID myid befinden.
$("#myid").siblings() Alle Elemente, die Siblings-Elemente zum Element mit der ID myid bilden.
$("#myid").parents() Alle Parent-Elemente vom Element mit der ID myid.
$(".myclass").find("span") Es wird nach allen <span>-Elementen gesucht, die der Klasse myclas zugewiesen sind.
$("#myid").nextAll("span") Alle <span>-Elemente, sich nach dem Element mit der ID myid befinden.
$("#myid").prevAll("span")
Alle <span>-Elemente, sich vor dem Element mit der ID myid befinden.


Visibility Filters:

Ausdruck: Rückgabe:
$("div:hidden") Alle <div>-Elemente, die das style Attribut auf none gesetzt haben.
$("div:visible") Alle <div>-Elemente, die das style Attribut auf block gesetzt haben.

Attribute Filters:

Ausdruck: Rückgabe:
$("img[src='mypic.jpg']") Es werden alle <img>-Elemente ausgewählt, bei denen das Attribut src den Wert mypic.jpg hat.

Form Selektor:

Ausdruck:
$(:input | :text | :passwort | :radio | :checkbox | :submit | :image | :reset | :button | :file | :hidden )
Es werden all <input>-Elemente ausgewählt, bei denen das Type-Attribut den Wert text,submit.. besitzt.

Form Filters:

Ausdruck:
$(:enabled |:disabled | :checked | :selected)
Es werden all <input>-Elemente ausgewählt, die folgenden Status-Attribut haben.

jQuery Object Accessors:

Ausdruck:
Rückgabe:
$("#myid").index(this) Gibt den index des Elements mit der ID myid zurück.
$(".myclass").size() Gib die Anzahl der Elemente der Klasse myclass zurück. z.B 0,1,2,3
$(".myclass").length Gib die Anzahl der Elemente der Klasse myclass zurück.
$(".myclass").size(); == $(".myclass").length

$("li").each(function(){ $(this).html('foo') Jedem <li>-Element wird der Text foo eingesetzt.
$(".myclass").eq(0).text('halloichbindererste') Myclass wird ausgewählt. Wenn nun mehrere <div>-Elemente mit der Klasse myclass existieren, wird exakt dem ersten der Text halloichbindererste eingefügt.

jQuery Attributes:

Attributes:

Ausdruck:
Rückgabe:
$("#myid").attr("title") Gibt den Inhalt des Attributs des Elements mit der ID myid zurück.
$("img").attr({src: "meinbild.gif",title: "jQuery"}) Alle <img>-Elemente bekommen nun das Attribut src mit dem Wert »meinbild.gif« und ein title-Attribut mit dem Wert »jQuery«.

Class:

Ausdruck:
Rückgabe:
$("p").addClass("myclass") Jedem <p>-Element wird nun die Klasse myclass zugewiesen.
$("#myid").hasClass("myclass") Prüft bei allen <p>-Elementen mit der ID myid ob die Klasse myclass zugewiesen ist.
$("p").removeClass("myclass") Entfernt die Klasse myclass von jedem <p>-Element.

Html

Ausdruck:
Rückgabe:
$("#myid").html() Gibt den html-Inhalt des Elements mit der ID myid zurück:
$("#myid").html("<div id='bla'>hallo</div>") Schreibt den HTML-Code <div id='bla'>hallo</div> in das Element mit der ID myid.

Text:

Ausdruck: Rückgabe:
$("#myid").text() Gibt den Text-Inhalt des Elements mit der ID myid zurück:
$("#myid").text("<b>meintext<b>") Schreibt den Text <b>meintext<b> in das Attribut des Elements mit der ID myid.

Value:

Ausdruck:
Rückgabe:
$("#myid").val() Gibt den Inhalt des Attributs value mit der ID myid zurück.
$("#myid").val('hallo') Schreibt den Text hallo in das Element mit der ID myid.

Manipulation:

Changing Contents :

jQuery Attributs -> html & text.

Inserting Inside:

Ausdruck:
Rückgabe:
$("#myid").append("<b>Hallo</b>") Fügt in den Text <b>Hallo</b> in des Element mit der ID myid ein.
$("#myid").appendTo("#foo") Fügt das Element mit der ID myid in das Element mit der ID foo ein.

Inserting Outside:

Ausdruck:
Rückgabe:
$("#myid").insertAfter("#foo") Stellt das Element mit der ID myid nach dem Element mit der ID foo.
$("#myid").after("#foo")
"
$("#myid").insertBefore("#foo") Stellt das Element mit der ID myid vor dem Element mit der ID foo.
$("#myid").before("#foo")
"

Inserting Around:

Ausdruck:
Rückgabe:
$("img").wrap("<div class='meinbild'></div>") Umschließt jedes <img>-Elemente mit den Containern und der Klasse meinbild. Bsp: <div class='meinbild'><img></div><div class='meinbild'><img></div>
$("img").wrapAll("<div class='meinfotoalbum'></div>") Umschließt jedes <img>-Elemente mit dem container und der Klasse meinfotoalbum. Bsp: <div class='meinfotoalbum'><img><img><img><img></div>
$("p").wrapInner("<b></b>")

Fortsetzung folgt ;-)


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 7 Personen an der Seite "jQuery" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "jQuery" hier bearbeiten.