Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/svendolin/all-about-jquery

This "All about JQuery"-repository catches up its focus on all the Javascript 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.
https://github.com/svendolin/all-about-jquery

ajax api code javascript javascript-applications javascript-plugin javascript-tools javascript-vanilla jquery js json typescript

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/svendolin/all-about-jquery
Owner: Svendolin
Created: 2021-10-09T19:07:40.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2022-05-24T22:44:25.000Z (over 2 years ago)
Last Synced: 2024-11-26T02:42:01.552Z (2 months ago)
Topics: ajax, api, code, javascript, javascript-applications, javascript-plugin, javascript-tools, javascript-vanilla, jquery, js, json, typescript
Language: HTML
Homepage:
Size: 3.63 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

        ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/Svendolin/All-about-JQuery?style=for-the-badge) ![GitHub contributors](https://img.shields.io/github/contributors/svendolin/All-about-JQuery?style=for-the-badge) ![GitHub forks](https://img.shields.io/github/forks/Svendolin/All-about-JQuery?color=pink&style=for-the-badge) ![GitHub last commit](https://img.shields.io/github/last-commit/Svendolin/All-about-JQuery?style=for-the-badge) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/Svendolin/All-about-JQuery?color=yellow&style=for-the-badge)

***



#  - ALL ABOUT JQUERY - 🔅

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](https://www.sae.edu/che/de?utm_source=PS01&gclid=Cj0KCQjw-4SLBhCVARIsACrhWLVIaD_aUt7y4brT7tqMW9o7tskgb1vjQqJFkzQwkwdN_40_Ls7MgAEaAtXxEALw_wcB)

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](https://api.jquery.com/)

* Are you new to JQuery? Check out the  [LEARNING CENTER HERE](https://learn.jquery.com/)







***

## Folder Directory

***

* [01_Basics](https://github.com/Svendolin/All-about-JQuery/tree/master/01_Basics)

* [02_Animations](https://github.com/Svendolin/All-about-JQuery/tree/master/02_Animations)

* [03_Sliders](https://github.com/Svendolin/All-about-JQuery/tree/master/03_Sliders)

* [04_Accordeons](https://github.com/Svendolin/All-about-JQuery/tree/master/04_Accordeons)

* [05_Tabs](https://github.com/Svendolin/All-about-JQuery/tree/master/05_Tabs)

* [06_Timelines](https://github.com/Svendolin/All-about-JQuery/tree/master/06_Timelines)

* [07_ModalPopUps](https://github.com/Svendolin/All-about-JQuery/tree/master/07_ModalPopUps)

* [08_AllComponentsTask](https://github.com/Svendolin/All-about-JQuery/tree/master/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|







## Important TERMS in Javascript: 📈

***

| 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 |







***

## Technologies ✅

***

 CDNJS:

* Shown in in the head of each HTML file. Dont forget to copy the most recent [CDNJS CODE FROM HERE](https://cdnjs.com/libraries/jquery) before you start a new project! Please dont forget to add this Script-tag BEFORE your Javascript link in your head-html!







***

## Collaboration ✅

***

> 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! :)







***

## FAQs ✅

***

0 Questions have been asked, 0 answers have been given, 0 changes have been made.

| Questions | Anwers | Changes |

|:--------------|:-------------:|--------------:|

| 0 | 0 | 0 |