jQuery Tutorial

Write less JavaScript – selectors, DOM changes, events, effects, AJAX and plugins with jQuery.

Start lesson 1 Take the quiz Cheat sheet

12 lessons

jQuery is a small JavaScript library that makes selecting elements, handling events, animating and loading data simpler. It still runs on a huge number of websites, including many WordPress themes. This track teaches jQuery 4 from the first selector to AJAX – and shows the plain JavaScript way next to it, so you understand both.

Every lesson has examples you can edit and run in your browser, a short quiz and a practice exercise. Basic HTML, CSS and JavaScript help.

1 jQuery IntroductionWhat jQuery is, when it still makes sense in 2026, how to add jQuery 4 to a page and how…
2 jQuery SelectorsSelect elements in jQuery with CSS selectors, then narrow the set with .first(), .eq(), .filter() and other methods that replace…
3 jQuery EventsHandle clicks, typing and hovers in jQuery with .on(), .off() and .one(), use the event object, and add delegated events…
4 jQuery Get and Set ContentRead and change text, HTML, form values, attributes, properties and data-* values with .text(), .html(), .val(), .attr(), .prop() and .data().
5 jQuery CSS and ClassesChange how elements look with .addClass(), .removeClass(), .toggleClass() and .css(), and measure them with .width() and .outerHeight().
6 jQuery Add and Remove ElementsCreate new elements safely, insert them with .append(), .prepend(), .before() and .after(), and take them out with .remove(), .detach() and…
7 jQuery TraversingMove around the DOM tree from any element with .parent(), .closest(), .children(), .find(), .siblings(), .next() and filter sets with .not()…
8 jQuery EffectsShow, hide, fade and slide elements with jQuery effects, control speed and callbacks, chain effects in a queue and respect…
9 jQuery animate()Build custom animations with .animate(): numeric CSS properties, relative values, duration, easing, callbacks, the queue and the step option.
10 jQuery AJAXLoad and send data without reloading the page using $.getJSON() and $.ajax(), handle loading and error states, and compare it…
11 jQuery Forms and ValidationRead form values with .val(), .prop() and .serialize(), validate on submit and as people type, and show accessible inline error…
12 jQuery vs Vanilla JavaScriptCompare jQuery with plain JavaScript side by side, learn to mix them safely, and decide when jQuery is worth using…