Aktionen |
Beschreibung |
.monospace[hide()], .monospace[show()], .monospace[toggle()] |
Verstecken/Anzeigen/Wechselndes Anzeigen von HTML-Elementen |
.monospace[fadeIn()], .monospace[fadeOut()], .monospace[fadeToggle()] |
Einblenden/Ausblenden von HTML-Elementen |
.monospace[slideDown()], .monospace[slideUp()], .monospace[slideToggle()] |
Hereingleiten/Herausgleiten von HTML-Elementen |
.monospace[click()] |
Simulation eines Klicks auf ein HTML-Element |
]
---
# Beispiele von .darkblue[jQuery Selektoren]
.small-font[
Selektor |
selektiert: |
.monospace[$(.hljs-string["*"])] |
alle Elemente |
.monospace[$(.hljs-keyword[this])] |
das momentane HTML Dokument/ Element .darkgray[(z.B. in Callback-Funktionen)] |
.monospace[$(.hljs-string["p"])] |
alle .inline-code.small-font[```html
```]-Elemente |
.monospace[$(.hljs-string["#test"])] |
das Element mit Id .monospace.hljs-string["test"] (Id-Selektor), z.B. .inline-code.small-font[```html
```] |
.monospace[$(.hljs-string[".test"])] |
alle Elemente der Klasse .monospace.hljs-string["test"] (Klassenselektor), z.B. .inline-code.small-font[```html
```] |
.monospace[$(.hljs-string["p.intro"])] |
alle .inline-code.small-font[```html
```]-Elemente |
.monospace[$(.hljs-string["p:first"])] |
das erste .inline-code.small-font[```html
```]-Element |
.monospace[$(.hljs-string["ul li:first-child"])] |
das erste .inline-code.small-font[```html
```]-Element jedes .inline-code.small-font[```html
|
.monospace[$(.hljs-string["[href]"])] |
alle Elemente mit .monospace.hljs-attr[href]-Attribut |
.monospace[$(.hljs-string["a[target='_blank']"])] |
alle .inline-code.small-font[```html
```]-Elemente mit .monospace.hljs-attr[target]-Attribut mit Wert .monospace.hljs-string["_blank"] |
.monospace[$(.hljs-string["tr:even"])] |
alle geraden .inline-code.small-font[```html
|
```]-Elemente
.monospace[$(.hljs-string[":𝛼"])] |
alle .inline-code.small-font[```html
```]-Elemente vom Typ .monospace.em[α] .monospace[∈] {.monospace.hljs-string[text], .monospace.hljs-string[passwort], .monospace.hljs-string[radio], .monospace.hljs-string[checkbox], .monospace.hljs-string[submit], .monospace.hljs-string[reset], .monospace.hljs-string[button], .monospace.hljs-string[image], .monospace.hljs-string[file]} |
]
---
# .darkblue[Callback-Funktionen]
.condensed[
- .darkblue[Optionale] Parameter vieler Aktionen
.small-font.margin-bottom[```javascript
$(selector).hide(speed, callback);
```]
- .darkblue[Geschwindigkeitsangabe]
+
Ermitteln |
Setzen |
Aktion |
Beschreibung |
Aktion |
Beschreibung |
.monospace[text()] |
.darkblue[Textinhalt] eines selektierten Elementes |
.monospace[text(t)] |
.darkblue[Setzen des Textinhalts] eines selektierten Elementes auf .monospace[t] |
.monospace[html()] |
.darkblue[Inhalt eines] selektierten .darkblue[Elementes] (.darkblue[mit HTML-Auszeichnung]) |
.monospace[html(t)] |
.darkblue[Setzen] des Inhalts .darkblue[eines] selektierten .darkblue[Elementes] (.darkblue[mit HTML-Auszeichnung]) auf .monospace[t] .darkgray[Bsp.: .inline-code[```javascript
html("Hello world!")```]] |
.monospace[val()] |
.darkblue[Wert eines] selektierten .darkblue[Formularfeldes] |
.monospace[val(v)] |
.darkblue[Setzen] des Werts .darkblue[eines] selektierten .darkblue[Formularfeldes] auf .monospace[v] |
.monospace[attr(name)] |
.darkblue[Wert des Attributes] .monospace[name] eines selektierten Elementes |
.monospace[attr(n,v)] |
.darkblue[Setzen] des Werts .darkblue[des Attributes] .monospace[n] eines selektierten Elementes auf .monospace[v] |
]
---
Anfrage |
Short-Hand-Funktion |
Äquivalenter Aufruf von .monospace[$.ajax] |
HTTP Post |
.monospace[$.post( u, d, s )] |
.inline-code[```javascript
$.ajax({url: u, method: "POST", data: d})```] .inline-code[```javascript
.done(s);```] |
HTTP Get |
.monospace[$.get( u, d, s )] |
.inline-code[```javascript
$.ajax({url: u, method: "GET", data: d})```] .inline-code[```javascript
.done(s);```] |
HTTP Get von JSON-Datei |
.monospace[$.getJSON(u, d, s)] |
.inline-code[```javascript
$.ajax({dataType: "json", url: u,```] .inline-code[```javascript
method: "GET", data: d})```] .inline-code[```javascript
.done(s);```] |
HTTP Get & Ersetze Dokumenten- inhalt |
Lädt Daten unter der angegebenen URL .monospace[u] vom Server und setzt die Daten in das selektierte Element .monospace[sel]
|
.monospace[$(sel).load( u, d )] |
.inline-code[```javascript
$.ajax({url: u, method: "GET", data: d})```] .inline-code[```javascript
.done(function(result){```] .inline-code[```javascript
$(sel).html(result);```] .inline-code[```javascript
});```] |
.center.margin-top[
.legend.padding-left.padding-right[.monospace[d] und .monospace[s] sind jeweils optional]
]
]
---
# Links zu JQuery
-
Elements |
- .darkblue[Grundlegende Menge von Elementen] (z.B. AJAX, Animation, Layout) .darkblue[als Baukasten für Applikationen] durch Kapselung von Browser APIs und CSS layouts
|
Core |
- .darkblue[Notwendige Infrastruktur für benutzderfinierte HTML-Elemente] (aufbauend auf den Native and Foundations-Schichten)
|
Foundations |
- .darkblue[Polyfills, welche alle benötigten Features implementieren, die noch nicht] nativ .darkblue[von den Browsern unterstützt werden]
- .darkblue[Diese Schicht soll mit steigender Unterstützung durch die Browser] nach und nach .darkblue[verschwinden]
- u.a. Shadow DOM, HTML Imports, Custom Elements
|
Native |
- .darkblue[Benötigte Features], die momentan .darkblue[in allen gängigen Browsern nativ verfügbar] sind
|
]
---
# Web-Komponenten –