jQuery Tutorial

Read, maintain and modernise jQuery code: every lesson shows the jQuery way and the plain JavaScript way side by side.

13 free lessons Beginner to Intermediate Covers jQuery 4.0

Start the first lesson

Getting Started

  1. 1jQuery Introduction
  2. 2Adding jQuery to a Page
  3. 3Document Ready & DOMContentLoaded
  4. 4The $ Function & Chaining

Selecting Elements

  1. 5Selectors
  2. 6Filtering Selections
  3. 7Traversing the DOM

Changing the Page

  1. 8Text, HTML & Values
  2. 9Adding & Removing Elements
  3. 10Attributes, Properties & Data
  4. 11CSS, Classes & Dimensions

Events

  1. 12Events with on() and off()
  2. 13Event Delegation & Custom Events

Effects

  1. 14Show, Hide, Fade & Slide (coming soon)
  2. 15Animations & CSS Alternatives (coming soon)

AJAX & Forms

  1. 16AJAX with $.ajax() (coming soon)
  2. 17$.get(), $.getJSON() & load() (coming soon)
  3. 18Forms & Serialization (coming soon)

Utilities & Plugins

  1. 19Utility Functions (coming soon)
  2. 20Using & Writing Plugins (coming soon)
  3. 21Performance Tips (coming soon)

Modernising jQuery Code

  1. 22jQuery 3 to 4: What Changed (coming soon)
  2. 23Migrating to Plain JavaScript (coming soon)
  3. 24Project: AJAX Task Tracker (coming soon)

Learn jQuery with a mentor

Free lessons get you started. Our Full Stack Web Development training adds real projects and code reviews from working developers.

  • Project-based learning
  • Mentor code reviews
  • Free counselling call