jQuery tutorial
Write less JavaScript and do more: select, change and animate the page
About this tutorial
jQuery is a small JavaScript library that makes common jobs short and simple: finding elements, changing them, reacting to clicks and typing, animating, and talking to the server. It is still used on millions of websites, including many built with Bootstrap and PHP.
You should know basic HTML, CSS and JavaScript first. Every lesson has examples you can run in the CodeLab Playground, an exercise and a quiz. Finish by building an interactive project and taking the final quiz.
Lessons
Getting started
Changing the page
- Changing content and attributesRead and change text, HTML, form values and attributes with text(), html(), val(), attr() and prop().
- CSS and classesChange styles with css() and switch looks by adding, removing and toggling classes.
- Adding and removing elementsCreate new elements and put them in the page with append, prepend, before and after; remove them with remove and empty.
Events and effects
- EventsReact to clicks, typing, hovering and form submits with on(), use the event object, and handle elements added later.
- Effects and animationShow and hide elements with hide, show, fade and slide effects, and animate CSS values.
- Traversing the pageMove from one element to related ones with parent, closest, children, find, siblings, next and each.
Forms and projects
- Working with formsRead every kind of field, validate a form before it is sent, show messages, and serialize form data.
- Building content from dataTurn arrays of objects into lists and cards with $.each, remember choices with localStorage, and update the page on a timer.
- Project: a filterable course listCombine selecting, events, traversing, classes and effects into a searchable, filterable list with a favourites counter.
- jQuery final quizFifteen questions covering the whole jQuery beginner class. Score yourself to finish the course.