jQuery

The classic DOM and Ajax convenience library.

jQuery is taught here in 12 lessons, running from Selectors and traversal through to Migrating off jQuery to vanilla JavaScript. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Selectors and traversalWhat the jQuery function really returns, how to move around the document with traversal methods, and why chaining works at all.
2. Events, effects and attributesThe single on/off API, delegated handlers that survive re-rendering, the animation shortcuts and their queues, and the attribute helpers.
3. AJAX helpers and why modern code moves onThe ajax family, its Deferred objects, and an honest comparison with fetch and the native APIs that replaced the rest of jQuery.
4. Setting up jQuery and the module storyLoad jQuery from a CDN or a bundler, pick the slim build, handle a page that already uses a different dollar sign, and know what changed in jQuery 4.
5. DOM manipulation, insertion and cloningInsert, wrap, replace and detach nodes with the right method, and understand when a node is moved rather than copied.
6. Attributes, properties and the data cacheattr versus prop versus data, why the data cache surprises people, and how to read form values without guessing.
7. Form handling, serialization and validationRead every input type correctly, serialise a form including files, intercept submission, and get a clear picture of what the Validate plugin adds.
8. Deferreds, promises and async patternsUse $.Deferred and $.when for real sequencing and parallel work, understand then versus done, and map the same flows onto native promises.
9. Writing a jQuery pluginExtend $.fn properly, store per-element state, namespace your events, guard against double initialisation, and ship a teardown that actually works.
10. Performance, event delegation and memoryCache selections, delegate from a stable root, avoid layout thrashing, and find the leak patterns that grow a long-lived page.
11. Testing jQuery codeRun jQuery under jsdom with Vitest or Jest, simulate real events, assert on the DOM, test a plugin's lifecycle, and escalate to a real browser for the cases jsdom cannot reach.
12. Migrating off jQuery to vanilla JavaScriptAn idiom-by-idiom translation table, how to use jQuery Migrate to find what breaks, and a migration order that ships incrementally.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular ECharts Chart.js SVG Font Awesome

FAQ