Leer jQuery: Code & Praktijk
Leer jQuery: Code & Praktijk — Leer jQuery op je telefoon: schrijf een chain en kijk hoe een echte pagina reageert
Leer jQuery: Code & Praktijk is een gratis iOS- en Android-app waarmee je begint met leren en die de jQuery JavaScript library uitlegt — DOM-manipulatie, events, effecten en AJAX — voor beginners, studenten en developers die jQuery-sites onderhouden. Elke les wordt gecombineerd met een live editor en paginavoorbeeld. jQuery 3.7.1 is ingebouwd, zodat wat je schrijft op je telefoon werkt, zelfs offline. Een AI Mentor beantwoordt vragen over een selector, een fout of een AJAX-call.
- Prijs
- Gratis, Pro-upgrade
- Platforms
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Vereist
- iOS 15.1 of nieuwer
Als je een CSS-selector kent, ken je de meeste basisprincipes van jQuery al.
jQuery ontleent zijn selectors aan CSS en laat je acties aan het resultaat chainen. Daardoor is het een laagdrempelige eerste kennismaking met de DOM, events en asynchrone code, en een praktische vaardigheid voor de vele bestaande websites die er nog steeds van afhankelijk zijn.
Wat het is
Leer jQuery: Code & Praktijk is een iOS- en Android-cursusapp voor de jQuery JavaScript library. De app bevat 22 cursussen met 48 lessen van niveau A1 tot C1, een live JavaScript-editor met een paginavoorbeeld dat op het apparaat draait met jQuery 3.7.1 ingebouwd, 20 debuggingmissies, 20 begeleide HTML- en CSS-projecten, 50 interviewvragen, 50 quizvragen en een cheatsheet met 91 items. Een AI Mentor legt selectors, fouten en AJAX-calls uit in duidelijke taal.
In de app
Hoe het eruitziet
De cursus
Wat de jQuery-cursus behandelt
Gebaseerd op de cursuslijst van CoddyKit voor jQuery, van de eerste $-aanroep tot plugins, testen en samenwerken met moderne JavaScript.
Welkom bij jQuery en de eerste stappen
Wat jQuery is, welk echt probleem het oploste en waarom zoveel sites het nog steeds gebruiken, gevolgd door een eerste chain en de basis voor beginners.
Elementen selecteren en door de DOM navigeren
Elementen selecteren, daarna geavanceerde selectors voor attributen en pseudo-klassen gebruiken en door de DOM gaan van het ene element naar het volgende.
DOM-manipulatie en styling
Elementen aanmaken, invoegen, verplaatsen en verwijderen in twee cursussen, en CSS en classes vanuit code wijzigen.
Events en delegatie
Eventbeheer, gevolgd door eventdelegatie voor elementen die later worden toegevoegd en beheer van aangepaste events.
Animaties en effecten
Basisanimaties, daarna complexe animaties en aangepaste effecten zoals gekoppelde reeksen en aangepaste easing.
Formulieren, data en templating
Dynamische content met data-attributen en templating, plus geavanceerde formulierverwerking en validatie.
AJAX, Deferred objects en promises
AJAX-bewerkingen en het verwerken van externe data, gevolgd door Deferred objects en promises voor het beheren van asynchrone code.
Plugins, prestaties en testen
Aangepaste selectors en filtering, robuuste plugins ontwikkelen, prestaties en best practices, jQuery integreren met moderne JavaScript en jQuery-applicaties testen.
Hoe het werkt
Zo werkt een les
Elke les zet een korte uitleg naast code die je zelf uitvoert, zodat je het idee test voordat je verdergaat.
Lees één korte les
Open een onderwerp en lees een korte uitleg over een selector, een event of een effect. De lessen zijn kort genoeg voor een busrit, en de cursus gaat van de eerste chain tot plugins en testen.
Schrijf de chain en zie hoe de pagina reageert
In de live editor schrijf je HTML, CSS en jQuery en voer je die meteen uit. De editor voert je code opnieuw uit zodra je stopt met typen, zonder server en zonder buildstap, en het paginavoorbeeld toont het resultaat.
Los een bug op en vraag het daarna aan de mentor
In missies krijg je kapotte code en moet je de fout vinden: een click-handler waarin this de window is, een menu dat steeds blijft uitschuiven, of een save die twee keer wordt uitgevoerd. Als een concept of fout niet duidelijk is, legt de AI Mentor het opnieuw uit in eenvoudigere woorden.
Wat erin zit
Wat je bij de app krijgt
22
Cursussen, A1 tot C1
22 cursussen met 48 lessen die beginnen bij de $-functie en je eerste chain en doorgaan met selectors, DOM-manipulatie, events, animaties, formulieren, AJAX, plugins en performance.
3.7.1
jQuery ingebouwd
Het paginavoorbeeld draait op het apparaat met jQuery 3.7.1 inbegrepen, dus de editor werkt ook offline.
20
Debuggingmissies
Realistisch aanvoelende bugs om op te lossen, zoals een chain die eindigt in een string of een delete-button die alleen bij de eerste rijen werkt.
20
Begeleide paginaprojecten
Twintig HTML- en CSS-projecten die de markup opbouwen waarop je selectors later werken.
91
Cheatsheet en quizzen
Een cheatsheet met 91 items over selectors, events, effecten en AJAX-methoden, plus 50 quizvragen en 50 interviewvragen.
AI
AI Mentor
Vraag naar een selector, fout of AJAX-call en krijg een antwoord in duidelijke taal. Het gratis abonnement bevat 3 vragen per dag.
Achtergrond
Is jQuery nog steeds de moeite waard om te leren, en waarvoor wordt het gebruikt?
jQuery is een JavaScript library die het korter maakt om elementen op een webpagina te selecteren, ze te wijzigen, op clicks te reageren en data te laden zonder de pagina opnieuw te laden. Nieuwere frameworks hebben veel nieuwe projecten overgenomen, maar een groot deel van de bestaande websites draait nog steeds op jQuery. Daarom blijft code lezen, repareren en uitbreiden een praktische vaardigheid voor webdevelopment. Het is ook een laagdrempelige manier om kennis te maken met de DOM, events en asynchrone JavaScript voordat je overstapt op grotere tools.
De $-functie en chainingéén regel, meerdere acties
Als je $ aanroept met een selector, krijg je een jQuery-object terug, en bijna elke methode retourneert dat object opnieuw. Daardoor kun je bijvoorbeeld een lijst selecteren, een class toevoegen en die laten infaden in één leesbare regel, in plaats van vier afzonderlijke statements.
SelectorsCSS-kennis komt goed van pas
Class-, id-, attribuut- en pseudo-class-selectors werken ongeveer zoals in een stylesheet. Traversal-methoden lopen vervolgens van een element naar de parents, children of siblings. Zo bereik je de juiste rij wanneer een pagina honderden vergelijkbare rijen bevat.
Eventdelegatiede oplossing voor later toegevoegde elementen
Een handler die aan een button is gekoppeld, bestaat alleen voor buttons die aanwezig waren toen de code werd uitgevoerd. Door de handler aan een parent te koppelen en op selector te filteren, werkt hij ook voor rijen die later worden toegevoegd. Dat is een klassieke oorzaak van een delete-button die alleen bij oude rijen werkt.
Waar dit naar verwijsteen veelvoorkomende bug
Binnen een jQuery-handler verwijst this naar het element dat het event heeft ontvangen, maar een arrow function of verkeerd geplaatste callback kan dat veranderen. Een handler debuggen waarin this de window is geworden, is een typische eerste echte bug.
AJAX en promisesdata zonder opnieuw laden
$.ajax() verstuurt een request en laat de pagina bijwerken zodra het antwoord terugkomt. Deferred objects en promises structureren meerdere van zulke requests, zodat de ene stap op de andere wacht in plaats van callbacks in elkaar te nesten.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Je kent een beetje HTML en CSS en wilt pagina's laten reageren op klikken en formulieren
- Je onderhoudt een site die op jQuery is gebouwd en moet de code kunnen lezen en repareren
- Je bereidt je voor op een front-end-interview waarin legacy jQuery nog steeds voorkomt
- Je wilt code schrijven op een telefoon en meteen een paginavoorbeeld bekijken
- Je leert het liefst in korte sessies en stelt graag vragen aan een mentor
Niet het juiste hulpmiddel als je
- Je wilt een modern framework zoals React leren; deze app leert je jQuery en de DOM
- Je wilt dat elke cursus gratis is: de eerste cursus, het eerste project en twee missies zijn gratis, en Pro ontgrendelt de rest
- Je verwacht een gratis versie zonder advertenties, omdat Pro die verwijdert
Vragen
Veelgestelde vragen
Wat is de beste manier om jQuery op een telefoon te leren?
De effectiefste manier is code schrijven en zien hoe de pagina verandert, in plaats van alleen over selectors te lezen. Leer jQuery: Code & Praktijk geeft elke korte les een live-editor met een paginavoorbeeld. jQuery 3.7.1 is ingebouwd, zodat de code op het apparaat wordt uitgevoerd, en een AI Mentor legt alles uit wat niet duidelijk is. Je kunt gratis beginnen op iOS en Android.
Is jQuery hetzelfde als JavaScript?
Nee. JavaScript is de programmeertaal; jQuery is een library die in JavaScript is geschreven en veelvoorkomende taken verkort, zoals elementen selecteren, reageren op klikken en AJAX-verzoeken versturen. Leer jQuery: Code & Praktijk leert je jQuery in een JavaScript-editor, zodat je beide tegelijk oefent en ziet hoe een chain overeenkomt met gewone DOM-code.
Is het nog steeds de moeite waard om jQuery te leren?
Voor nieuwe projecten kiezen veel teams andere tools, maar een groot deel van de bestaande websites draait nog steeds op jQuery. Daarom is het lezen en repareren van die code een praktische vaardigheid. Het is ook een eenvoudige kennismaking met de DOM, events en asynchrone JavaScript. Leer jQuery: Code & Praktijk bevat interviewvragen voor front-endbanen waarin legacy jQuery nog steeds voorkomt.
Is Leer jQuery: Code & Praktijk beschikbaar op iPhone en Android?
Ja. Leer jQuery: Code & Praktijk is beschikbaar in de App Store voor iPhone (iOS 15.1 of nieuwer) en op Google Play voor Android. De interface is beschikbaar in 22 talen, waaronder Engels, Spaans, Duits, Frans, Portugees, Japans, Koreaans, Arabisch, Hindi en Turks, terwijl de code die je schrijft in elke taal jQuery en JavaScript blijft.
Kan ik jQuery-code offline in de app uitvoeren?
Ja, voor de editor. jQuery 3.7.1 is ingebouwd in Leer jQuery: Code & Praktijk, zodat het paginavoorbeeld op het apparaat wordt uitgevoerd, zelfs offline. Voor functies die afhankelijk zijn van de AI Mentor is een internetverbinding nodig.
Welke onderwerpen behandelt de jQuery-cursus?
De 22 cursussen lopen van de $-functie en selectors via DOM-manipulatie, styling, events en delegatie tot animaties, formulieren, AJAX, Deferred objects en promises. Daarna volgen aangepaste selectors, plugins schrijven, prestaties, jQuery integreren met moderne JavaScript en testen.
Wat zijn de debuggingmissies?
Het zijn 20 oefeningen waarin je kapotte jQuery-code krijgt en de bug moet vinden, net zoals dat op het werk gebeurt. Voorbeelden zijn een click-handler waarbij this het window is, een chain die eindigt in een string, een verwijderknop die alleen op oude rijen werkt, een menu dat blijft uitschuiven nadat je bent weggegaan en een opslagactie die twee keer wordt uitgevoerd.
Moet ik JavaScript of HTML al kennen?
Een beetje HTML en CSS helpt, omdat jQuery-selectors op markup werken en elementen uit CSS overnemen. Leer jQuery: Code & Praktijk bevat ook 20 begeleide HTML- en CSS-paginaprojecten, zodat je de markup kunt bouwen die je selectors gebruiken. De cursus begint bij de eerste chain.
Is Leer jQuery: Code & Praktijk gratis?
Je kunt gratis beginnen met de eerste cursus, het eerste begeleide project, twee missies, de editor, quizzen, interviewvragen, het spiekbriefje en 3 vragen per dag aan de AI Mentor. In de gratis versie worden advertenties getoond. Pro ontgrendelt elke cursus, elk project en elke missie, het certificaatexamen en onbeperkt gebruik van de AI Mentor, en verwijdert advertenties. Pro is beschikbaar als wekelijks, maandelijks of jaarlijks abonnement, of als een eenmalige aankoop voor levenslange toegang. Een certificaatexamen aan het einde van de cursus maakt deel uit van Pro.
Is de app verbonden aan jQuery?
Nee. jQuery is een handelsmerk van de OpenJS Foundation en Leer jQuery: Code & Praktijk is een onafhankelijke leerapp die niet is gelieerd aan of goedgekeurd door de OpenJS Foundation.
Aan de slag
Schrijf vandaag nog je eerste jQuery-keten
Gratis te starten op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS en Android.