This "All about JQUERY"-repository catches up its focus on all the JQuery I've learned, commented and written through the years as a SAE-Web Development student with exercise lessons every week as well as tutorial videos on Youtube.
Direct Link to the place where I'm studying are you going to find HERE
What is JQuery:
-
JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. GET YOUR API HERE
-
Are you new to JQuery? Check out the LEARNING CENTER HERE
- 01_Basics
- 02_Animations
- 03_Sliders
- 04_Accordeons
- 05_Tabs
- 06_Timelines
- 07_ModalPopUps
- 08_AllComponentsTask
| Topic | Content |
|---|---|
| 01 Basics | $(document).ready(function(){}) // Selectors // .append() vs .prepend() // Functions (colour change) // .click(event) (Add and delete content) // .hover()(over text) // Mouse-Coordinates-Hover |
| 02 Animations | ShowAndHide-Buttons for Text // Toggle = ShowAndHide with ONE Button // ShowAndHide + Change Class of Object // HELPFUL Toggle vs Hide // boxy animation using animate() |
| 03 Sliders | Basic Slider with Back and Forward Button + Autoload // Responsive Slider with the same functions as the basic slider but responsive |
| 04 Accordeons | Basic Accordeon: Show and Hide Content VERTICALLY by clicking the +Button |
| 05 Tabs | Tab Basic: Tab through the content HORIZONTALLY by clicking the tab peak folder |
| 06 Timelines | Vertical timeline with basic show by click // Vertical Timeline with animated show by click // Horizontal Timeline |
| 07 ModalPopUps | Like a selfmade "Sweetalert" = Click the button to pop up a modal message |
| 08 AllComponentsTask | Kittenpage example (used JQUERY for kitten image gallery and form validation) NOTE: Basic exercises with image gallery and form validation was originally made with vanilla JS |
| Term (word): | Explenation in German for a better personal understanding for myself: |
|---|---|
| OBJECTS | "Sammlung von Datenwerten, Eigenschaften (Properties) z.B. = const = Tasse {farbe: "blau", grösse: "mittel"} etc |
| PROPERTIES | Eigenschaft des Objektes: Tasse.farbe in dot-notation oder Tasse["farbe"] in bracket-notation welcher einen Wert (value) mitteilt |
| VALUES | Wert einer Eigenschaft: z.B. "blau" |
| VARIABLES | Behälter als "Speicherplatz" const mit unveränderlichem Namen, dazu Scope-Typ (const = konstant, unveränderlich, let = lokal wiederverwendbar, var = Gültigkeitsbereich auf allen Seiten) und genau einem Wert |
| METHODS | Methoden brauchen für ihren Aufruf immer ein zugehöriges Objekt und werden in einer Klasse definiert. Man kann sie somit gerne "Objektorientierte Funktionen mit Beziehung zur eingespeicherten Klasse" nennen... public methode() |
| FUNCTIONS | "Eine Funktion ist eine Gruppe von Anweisungen, die durch einen Namen aufgerufen werden. Beim Aufruf der Funktion können Daten übergeben werden, um sie innerhalb der Funktion zu bearbeiten." WICHTIG: Funktion immer beim Namen aufrufen, um sie zu aktivieren |
CDNJS:
- Shown in in the head of each HTML file. Dont forget to copy the most recent CDNJS CODE FROM HERE before you start a new project! Please dont forget to add this Script-tag BEFORE your Javascript link in your head-html!
Feel free to contact me if you've seen something wrong, found some errors or struggled on some mistakes! Always happy to have a clean sheet here! :)
0 Questions have been asked, 0 answers have been given, 0 changes have been made.
| Questions | Anwers | Changes |
|---|---|---|
| 0 | 0 | 0 |