# jQuery EINSTEIGER GUIDE -- Erklärungen

:::success
**jQuery** ist ein Leichtgewicht. Wenig Arbeit viel Erfolg. Mit **jQuery** wird Javascript in der Programmierung vom Code-Aufwand stark reduziert. Man erstellt ==leicht abrufbare Methoden, die vieleviele Zeilen Code Javascript ersetzen== und mit einer einzigen Zeile code abrufbar sind.

**JavaScript** ist eine Skriptsprache die für Interaktionen im Browserinterface da ist. **JQuery** ist eine Bibliothek von Javascript Skripten, die Ereignisse, Animationen und vieles andere auch, vereinfachen. Der einzige Unterschied ist das jQuery dazu optimiert wurde, bekannte Skriptfunktionen in weniger Codezeilen auszudrücken
:::

# GRUNDLEGENDES

### jQuery code in eigener Datei

Umso größer das Programm wird umso mehr Code benötigt man. Um eine gute Struktur zu haben empfiehlt man für geschriebenen jQuery code eine eigene Datei anzulegen.
Um jQuery nutzen zukönnen, muss man auf eine Befehlsdatenbank zu greifen.

Man greift im <head-/head> darauf zu.


### Was bedeuted ***$( )***

* gemacht um ***HTML-Elemente*** zu suchen und **Aktionen auszuführen**
:::danger
**Syntax:**

$(selector).action();
:::
* das ==**$ - Zeichen**== steht für Programmiersprache jQuery
* der ==**Selector**== um **Abfrage zustellen** oder **HTML Element zu finden**
* die ==**action()**== wird **auf das Element angewendet**

## Document Ready Event

:::success
***In diesem Event steht unser gesamter jQuery Quellcode.***
:::

$(document).ready(function(){
  // jQuery methods go here...
  // jQuery methods go here...
  // jQuery methods go here...
});


:::warning
Der Sinn des Document ready events ist, dass nichts passiert bevor die Seite komplett geladen wurde.
Das ermöglich uns ausserdem den JS-Code vor dem body-tag zu setzen.
:::
++Fehler könnten passieren wenn:++
* versucht wird ein Element zu verbergen, das noch nicht existiert
* die Größe eines Bildes festzustellen, das nicht geladen ist.

## Selektoren

==Es gibt verschiedene Selektoren die man finden kann.==
* das aktuelle Element
* alle Elemente mit einem bestimmten <TAG>
* class - Elemente
* id - Elemente

SYNTAX

$(this).action() - current element
$("*").action() - all elements
$(".test").action() - all elements with class="test"
$("#test").action() - the element with id="test"

### weitere gängige Selektoren

### Diese Selektoren gibt es

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

### Selektorentester:
https://www.w3schools.com/jquery/trysel.asp
:::info
Der Selektorentester elaubt es dir durch eine Beispieldatei zu gehen und ==alle möglichen Kombinationen aus Selektoren==, auf die man zugreifen kann, zuzugreifen.
:::

## Befehle

### Elemente AUSBLENDEN

    $("p").hide();

:::info
Wie im Beispiel zu erkennen ist, ==fügt== der Befehl **$("p").hide()**; in jedem <p-TAG> ==die CSS-Styleinformation: **display: none;** ein==.
Das führt dazu, dass ==alle </p-TAG> verborgen== bleiben.

Diese Aktion ist ==für alle **Selektoren** ausführbar==.
:::

## EVENTS

### click(function().....)and dblclick(function().....)

$("p").click(function(){
  $(this).hide();
});
--------------------------------
$("p").dblclick(function(){
  $(this).hide();
});


:::info
* suche alle P-tags
* nach Klick auf einen p-TAG führe ==$(this).hide();== aus
* **dieser** p-TAG verschwindet
:::

### mouseenter(function()........)

$("p").mouseenter(function(){
  $(this).hide();
});

:::info
Sobald die Maus über das Element fährt, verschwindet es.
:::

### keypress(function()........)

$("input").keypress(function(){
    $(this).hide();
});

:::info
Sobald man etwas in das Inputfeld tippt, verschwindet es.
:::

### on() method

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

:::info
Hier kann man mehrere Funktionen einem Selektor gleichzeitig zuweisen. Das erspart etwas Schreibarbeit.

Es wird auch verwendet um dem Selektor im nachhinein, eventuell nach einem Bestimmten Ereignis andere Eigenschaften zuzusprechen.
:::

### weitere gängige Events

### Diese Events gibt es
https://www.w3schools.com/jquery/jquery_ref_events.asp