Roadmap › 4. Frontend › Step 46

jQuery

Selectors, traversal, DOM manipulation, events and delegation, effects, AJAX, deferreds, plugins, jQuery with ASP.NET MVC validation, performance and migrating from jQuery to modern JavaScript.

What it is & where it is used

jQuery is a small JavaScript library (created by John Resig, 2006) that made DOM manipulation, event handling, animation and AJAX simple and cross-browser with a concise API: $("selector").action(). "Write less, do more."

It is still found in a huge number of existing websites, WordPress, Bootstrap 3/4 sites and classic ASP.NET MVC / Web Forms apps (jQuery Validation + Unobtrusive Validation). New projects usually use plain modern JavaScript or a framework (React/Angular/Vue), so interviews focus on maintaining existing jQuery code and knowing the modern equivalents.

Core ideas:

$ (alias of jQuery) wraps DOM elements in a jQuery object (array-like collection).
Implicit iteration — methods apply to every matched element.
Chaining — most methods return the jQuery object.
$(document).ready() / $(function(){ }) runs code when the DOM is ready.

Versions & history

Version	Year	Notes
1.0	Aug 2006	First release
1.3 / 1.4	2009 / 2010	Sizzle selector engine; `.live()` (later removed)
1.5	2011	Deferred objects, rewritten AJAX
1.7	2011	`.on()` / `.off()` unified event API
1.9 / 2.0	2013	Removal of deprecated APIs; 2.x dropped IE 6–8
3.0	2016	Promises/A+ compatible deferreds, `requestAnimationFrame`, strict mode compatible
3.5	2020	Security fix for `htmlPrefilter` (XSS in `.html()`) — upgrade if below 3.5
3.7.1	2023	Last 3.x feature release
4.0	2026	Drops IE ≤ 10 and old Edge, removes deprecated APIs (e.g. `jQuery.trim`, `isArray`), ES modules, Trusted Types support

Companion projects: jQuery UI (widgets, interactions; maintenance mode), jQuery Mobile (deprecated 2021), jQuery Migrate (plugin that warns about deprecated APIs during upgrades), jQuery Validation (third-party plugin).

Lifecycle

Page and jQuery lifecycle:

Browser loads HTML; <script src="jquery.min.js"> defines window.jQuery/$ (load before plugins and your code).
Plugins (jquery.validate.js, jquery.validate.unobtrusive.js, Bootstrap JS) attach to $.fn.
$(function () { ... }) — the DOM ready callback runs after the DOM is parsed (before images load).
Your code selects elements, binds events (.on()), initialises plugins.
User interacts → event handlers → DOM updates / AJAX calls.
AJAX lifecycle: beforeSend → request → done/success or fail/error → always/complete; global events ajaxStart, ajaxStop, ajaxError.
$(window).on("load", ...) fires when all resources including images are loaded.
When removing elements use .remove() (cleans up jQuery data and events) rather than raw DOM removal to avoid leaks.

Tools used to develop

CDN (code.jquery.com, cdnjs) or npm (npm install jquery) / LibMan in ASP.NET projects.
jQuery Migrate for upgrading between majors.
Browser DevTools (inspect handlers in Elements → Event Listeners).
jQuery UI, jQuery Validation + Microsoft jQuery Unobtrusive Validation, DataTables, Select2, Bootstrap (≤ 4).
You Might Not Need jQuery (website) — modern JavaScript equivalents.
ESLint plugin eslint-plugin-jquery / no-jquery to find and remove jQuery usage.