JQuery kurz & gut

 
Andreas Vdovkin (Autor)
 
O'Reilly Verlag
2. Auflage | erschienen am 1. März 2011 | 176 Seiten
 
E-Book | ePUB ohne DRM | Systemvoraussetzungen
E-Book | PDF ohne DRM | Systemvoraussetzungen
978-3-86899-503-9 (ISBN)
 
jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation sowie zur Durchführung von Ajax-Anfragen zur Verfügung stellt. jQuery kurz & gut vermittelt dem Leser zu Beginn die notwendigen Grundlagen von JavaScript, dem W3C-Dokumentenmodell und die grundlegende Arbeitsweise mit jQuery. 'Suchen' und 'Ändern' stellen die Kernkapitel der Befehlsreferenz dar und beschreiben die Navigation und Manipulation von DOM-Elementen. Wie man Events und Ajax mit jQuery nutzt und welche Werkzeuge bei der Entwicklung besonders hilfreich sind, sind neben der Anleitung, wie man eigene Plugins erstellt, weitere Kapitel, die dem Leser kurz und präzise die Arbeit mit dem JavaScript-Framework nahe bringen. Die zweite Auflage wurde auf die Version jQuery 1.4.4 aktualisiert.
Deutsch
Köln
4,18 MB
978-3-86899-503-9 (9783868995039)
386899503x (386899503x)
weitere Ausgaben werden ermittelt
  • Cover
  • Titel
  • Copyright
  • Inhalt
  • Einführung
  • Kapitel 1: JavaScript
  • JavaScript-Grundlagen
  • Programmiertechniken
  • Dokumentenmodell
  • Kapitel 2: jQuery-Grundlagen
  • jQuery einbinden
  • Nützliche Werkzeuge
  • Kompatibilität mit anderen Bibliotheken
  • Method Chaining
  • Die jQuery-Funktion
  • Zugriff auf die Elemente des Selektors
  • Speicherfunktionen
  • Queues: Warteschlangen für Methoden
  • Kapitel 3: Suchen
  • Selector Engine
  • CSS-Selektoren
  • Suchfilter
  • Mit dem Suchergebnis arbeiten
  • Suchergebnis bearbeiten
  • Kapitel 4: Ändern
  • Attribute
  • Klassen
  • HTML
  • Kapitel 5: DOM-Elemente
  • CSS
  • Kapitel 6: Events
  • DOM Ready-Event-Handler
  • Das Event-Objekt
  • Behandeln von Events
  • Event-Typen
  • Kapitel 7: Animationen
  • Grundlagen
  • Animationen durchführen
  • Kapitel 8: Ajax
  • Ajax-Anfragen durchführen
  • Kapitel 9: Hilfsmittel
  • Browsereigenschaften
  • Array-Funktionen
  • Datentypbezogene Methoden
  • String-Methoden
  • Kapitel 10: Plugins
  • Grundlagen
  • Beliebte Plugins
  • Index
  • A
  • B
  • C
  • D
  • E
  • F
  • H
  • J
  • K
  • M
  • N
  • P
  • S
  • U
  • V
  • W

Suchfilter


Suchfilter können verwendet werden, um einen Selektor weiter einzugrenzen um damit schneller bzw. effizienter suchen zu können. Mit Suchfiltern kann man Suchen nach bestimmten Attributen bzw. dem Inhalt dieser Attribute oder aber dem Inhalt von Elementen durchführen.

Was ihre Syntax angeht, lehnen sich Suchfilter an den CSS-Modifikator für Links an.

a:visited

Dieser Selektor liefert alle Links, die bereits geöffnet worden sind.

Ein vorangehender Selektor ist für die Suchfilter optional. Das bedeutet, dass man einen normalen Selektor voranstellen kann, aber nicht muss.

$(":first");

Liefert das allererste Element im HTML-Baum.

$("#header").find(":first");

Liefert das erste Kind der Node mit der ID header.

$("p:first");

Liefert den ersten Absatz.

Die obigen Beispiele verdeutlichen, wie man die Suchfilter anwenden kann. Das erste Beispiel zeigt einen alleinstehenden Suchfilter, das zweite die Verwendung von Suchfiltern mit Angabe eines Suchbereichs und das dritte die Verwendung von Suchfiltern mit normalen Selektoren.

Basisfilter


Erstes Element


$("p:first");

Dieser Selektor gibt den ersten Absatz zurück. :first liefert das erste Element des vorangestellten Selektors. Ist keiner vorangestellt, bezieht sich :first auf das erste Element im aktuellen Suchbereich. Ist kein Suchbereich angegeben, wird das (X)HTML-Dokument als Kontext angenommen.

Letztes Element


$("p:last")

Dieser Selektor gibt den letzten Absatz zurück. :last liefert das in Bezug auf den vorangestellten Selektor letzte Element.

Negierungsfilter


:not(Selektor)

Der Negierungsfilter liefert alle Elemente, die nicht Selektor entsprechen.

$("div:not(#header)");

Diese Anfrage liefert alle <div>-Elemente, die nicht die ID header haben.

Man kann mehrere :not(Selector)-Filter in einem Selektor kombinieren und auch mehrere Selektoren dem Filter übergeben.

$("div:not(#header):not(#footer)"); $("div:not(#header,#footer)");

Beide Anfragen finden alle <div>-Elemente, die weder header noch footer als ID haben.

$("body > div:not(.hidden)");

Dieser Selektor liefert alle <div>-Elemente, die ein Kind von <body> sind und nicht die Klasse hidden haben.

$(":not(.hidden)");

Dieser Selektor liefert alle Elemente, die nicht die Klasse hidden haben.

Gerade/ungerade Filter


Selektor:even

Der Filter :even liefert aus allen Elementen, die Selektor liefern würde, jedes gerade (also das zweite, vierte usw.) Element.

Selektor:odd

Der Filter :odd liefert aus allen Elementen, die Selektor liefern würde, jedes ungerade (also das erste, dritte usw.) Element.

$(":even");

Ist kein Tag-Selektor angegeben, wird * angenommen.

$("div:even");

Dieser Selektor liefert jedes zweite gefundene <div>-Element.

$("div:odd");

Dieser Selektor liefert jedes ungerade div.

Indexfilter


Mit den Indexfiltern kann man direkt die Menge der zurückgegebenen Elemente beeinflussen.

n-tes Element


Mit dem :nth(Nummer) Filter kann man das n-te Element der Ergebnismenge direkt ansprechen.

$("div:nth(5)");

Dieser Selektor gibt das 5-te <div>-Element zurück.

Elemente größer n


Mit dem :gt(Nummer)-Filter bekommt man alle Elemente, deren Position in der Ergebnismenge größer als Nummer ist.

$("div:gt(3)");

Dieser Selektor gibt alle <div>-Elemente zurück, deren Array-Index größer als 3 ist. gt steht für greater than (größer als).

Elemente kleiner n


Mit dem :lt(Nummer)-Filter bekommt man alle Elemente, deren Position in der Ergebnismenge kleiner als Nummer ist.

$("div:lt(3)");

Dieser Selektor gibt alle <div>-Elemente zurück, deren Array-Index kleiner als 3 ist. lt steht für less than (weniger als).

Titelselektor


:header

Dieser Selektor findet alle Elemente, die ein Titel sind, z. B. <h1>, <h2> und <h3>.

Ein möglicher vorangestellter Selektor kann den Filter unbrauchbar machen; es empfiehlt sich, hier als vorangestellten Selektor nur die Einschränkung auf Klassen bzw. auf Element-IDs durchzuführen.

$(".myTitle:header")

Diese Suche liefert alle Titelelemente mit der Klasse myTitle.

$(":header.myTitle");

Auch diese Suche liefert alle Elemente mit der Klasse myTitle.

Filter für animierte Elemente


:animated

Der Filter :animated liefert alle Elemente, die zum Zeitpunkt der Suchanfrage animiert werden.

$("div#header").fadeOut(2000).fadeIn(2000); $("div:animated").stop();

In diesem Beispiel wird zunächst in der ersten Zeile eine Animation auf den <div>-Block mit der ID header angewandt. In der zweiten Zeile werden anschließend alle <div>-Elemente gesucht und jede darauf ausgeführte Animation mit stop() angehalten. Mehr dazu finden Sie in Kapitel 7.

Inhaltsfilter


:contains(Text)

Der Filter :contains(Text) findet alle Elemente, die Text enthalten. Text bezieht sich dabei auf die reine Textrepräsentation eines Elements.

Achtung: Ohne passenden Suchbereich bzw. vorangestellten Selektor gibt dieser Suchfilter alle Elemente auf dem Weg zum Element zurück, das den Text enthält.

<html> <body> <div> <h1>jQuery ist toll</h1>

write less, do more

</div> </body> </html> $(":contains(jQuery ist toll)");

Diese Suchanfrage gibt alle Elemente auf dem Weg zu <h1> zurück, die den angegebenen Text enthalten:

[html, body, div, h1]

Deshalb sollte der vorangestellte Selektor bei Verwendung dieses Suchfilters den Tag enthalten, in dem man den gesuchten Text vermutet.

$("h1:contains(jQuery ist toll)");

Dieser Selektor liefert das h1-Element, das den Text jQuery ist toll enthält.

Leere Elemente


:empty

Dieser Filter liefert alle Elemente, die leer sind. Elemente sind dann leer, wenn sie weder Kindelemente noch Text enthalten. Nach dieser Definition sind z. B. img-Elemente immer leer, da sie per Definition keine Kindelemente enthalten können und auch keinen Text haben.

$("img"); $("img:empty");

Diese Selektoren liefern beide dasselbe Ergebnis.

Dieser Selektor kann als Synonym für :not(:parent) verstanden werden.

Selektor enthält


$("div:has(h1)");

Der has(selector)-Selektor liefert alle Elemente, die Elemente enthalten, die im inneren Selektor beschrieben werden. Im Beispiel werden alle Elemente gefunden, die ein h1-Element enthalten. Der Selektor kann umschrieben werden mit: »Finde alle Vorfahren aller Elemente, die durch den inneren Selektor gefunden werden.«

Elternselektor


:parent

Dieser Selektor liefert alle Elemente, die einen Kind-Node haben. Ein Kind-Node kann dabei ein HTML-Element oder Text sein.

$("div:parent");

Das kann als Alias für :not(:empty) verstanden werden.

n-Kind-Filter


Der n-Kind-Filter liefert alle Elemente, die das gerade, ungerade usw. Kind ihres jeweiligen Elternelements sind. Dieser Filter liefert im Vergleich zum Filter eq(x) mehr als nur ein Element: Wird even als Parameter übergeben, liefert der Selektor alle Elemente, die ein gerades Kind ihres Elternelements sind.

:nth-child(n)

Dieser Filter liefert alle Elemente, die das n-te Kind ihres Elternelements sind.

$("div p:nth-child(3)");

Wird dieses Beispiel auf eine Seite angewandt, die vier <div>-Blöcke mit je 2, 3, 4, 5

-Elementen hat, wird das Ergebnis drei

-Elemente umfassen. Der Index ist eins-basiert, 1 als Parameter liefert...

Dateiformat: EPUB
Kopierschutz: ohne DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Verwenden Sie eine Lese-Software, die das Dateiformat EPUB verarbeiten kann: z.B. Adobe Digital Editions oder FBReader - beide kostenlos (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat EPUB ist sehr gut für Romane und Sachbücher geeignet - also für "glatten" Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an. Ein Kopierschutz bzw. Digital Rights Management wird bei diesem E-Book nicht eingesetzt.

Weitere Informationen finden Sie in unserer E-Book Hilfe.


Dateiformat: PDF
Kopierschutz: ohne DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Verwenden Sie zum Lesen die kostenlose Software Adobe Reader, Adobe Digital Editions oder einen anderen PDF-Viewer Ihrer Wahl (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie die kostenlose App Adobe Digital Editions oder eine andere Lese-App für E-Books (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nur bedingt: Kindle)

Das Dateiformat PDF zeigt auf jeder Hardware eine Buchseite stets identisch an. Daher ist eine PDF auch für ein komplexes Layout geeignet, wie es bei Lehr- und Fachbüchern verwendet wird (Bilder, Tabellen, Spalten, Fußnoten). Bei kleinen Displays von E-Readern oder Smartphones sind PDF leider eher nervig, weil zu viel Scrollen notwendig ist. Ein Kopierschutz bzw. Digital Rights Management wird bei diesem E-Book nicht eingesetzt.

Weitere Informationen finden Sie in unserer E-Book Hilfe.


Download (sofort verfügbar)

4,99 €
inkl. 19% MwSt.
Download / Einzel-Lizenz
ePUB ohne DRM
siehe Systemvoraussetzungen
PDF ohne DRM
siehe Systemvoraussetzungen
Hinweis: Die Auswahl des von Ihnen gewünschten Dateiformats und des Kopierschutzes erfolgt erst im System des E-Book Anbieters
E-Book bestellen