Your country

Tools that support it use your country for local currency, number formats, units and paper size. Your choice is saved only in this browser.

Type a name or a two-letter code. Use the up and down arrow keys to move through the countries, Enter to choose one and Escape to close.

jQuery 4 (legacy code and migration to DOM APIs)  Module 1 – Start here: jQuery in 2026

jQuery in 2026: versions, support and where it runs

The current jQuery, Migrate and jQuery UI releases, which branches still get fixes, where a site's copy of jQuery comes from, and when to keep or upgrade it.

  • Beginner
  • 15 minutes
  • Examples run with Node.js 24.21.0, jQuery 4.0.0 and quickjs 0.32.0
  • By MySmartCoPilot
Free lesson, Pro answers: 15 minutes
Free: the whole lesson. With a pass: the model answers to its 2 interview questions.

What you will learn

  • Name the current jQuery, jQuery Migrate and jQuery UI releases and the branches that still get fixes
  • Read which jQuery version and build a page runs, and whether jQuery Migrate is loaded
  • Explain how a copy of jQuery reaches a site through a platform, a theme, a plugin or a project template
  • Choose between maintaining, upgrading and removing jQuery for a given site
What you’ll learn

What you will learn

  • Name the current jQuery, jQuery Migrate and jQuery UI releases and the branches that still get fixes
  • Read which jQuery version and build a page runs, and whether jQuery Migrate is loaded
  • Explain how a copy of jQuery reaches a site through a platform, a theme, a plugin or a project template
  • Choose between maintaining, upgrading and removing jQuery for a given site
On this page

W3Techs finds jQuery on 64.5 % of all websites, and 78.8 % of those sites run a version 3 release; version 4 does not even appear in its list of versions. So when you take over a site that uses jQuery, the first questions are practical ones: which copy does the page run, does anyone still fix it, where did it come from, and should you keep it, upgrade it or remove it?

This lesson answers each question with the jQuery project’s own release and support facts, a short script that reports what any page runs, the versions that WordPress, Drupal, Magento and the ASP.NET Core template ship, and a table that weighs the three paths for your own site.

jQuery 4.0.0 is current, and 3.x gets only critical fixes

The jQuery team released jQuery 4.0.0 in 2026, the first major version in almost ten years: 3.0 came out in 2016. According to the release post, it removes APIs that had been deprecated for years, drops Internet Explorer 10 and older, and makes the slim build: A smaller build of jQuery without its Ajax and effects modules; in jQuery 4 it also leaves out Deferreds, Callbacks and queues. Its version string is 4.0.0+slim. More in “Loading jQuery: CDN, SRI, npm, slim and noConflict” smaller. Two companion projects followed within two weeks: jQuery Migrate: A plugin from the jQuery team, loaded right after jQuery, that brings back APIs a newer jQuery removed or changed and, in its development build, logs a warning each time code uses one, so the code can be fixed before the upgrade. 4.0.2, the plugin that reports and restores what changed between 3.x and 4.x, and jQuery UI 1.14.2, whose team says the library is “in a maintenance state” and tested it with five jQuery releases, from 1.12.4 to 4.0.0. Walk through the releases behind the code you will meet:

Timeline · 6 events in order The jQuery releases behind the code you maintain Walk through the releases in order. The tags say which branch each one belongs to today, from no support to current.
  1. 2006

    jQuery 1.0 no support

    The first stable release. The 1.x line kept Internet Explorer 6, 7 and 8 working to its end, and its last release, 1.12.4, came out in 2016.

  2. 2013

    jQuery 1.9 and jQuery Migrate no support

    jQuery 1.9 removed many old APIs, and $() stopped treating a string as HTML just because a tag appeared somewhere in it: the string has to start with one. jQuery Migrate came out with it, to warn about what was removed and to bring it back while code was fixed.

  3. 2013

    jQuery 2.0 no support

    The 2.x line dropped Internet Explorer 6, 7 and 8 while 1.x kept them. Its last release, 2.2.4, came out in 2016.

  4. 2016

    jQuery 3.0 critical fixes only

    The line most sites run today. Its newest release, 3.7.1, came out in 2023, and the branch now gets critical fixes only.

  5. 2020

    jQuery 3.5.0 security fix

    Fixed CVE-2020-11022 and CVE-2020-11023, flaws that let HTML passed to .html(), .append() and similar methods run code. The npm registry marks every older release as deprecated.

  6. 2026

    jQuery 4.0.0, Migrate 4.0.2 and jQuery UI 1.14.2 current

    The first major release in almost ten years: APIs deprecated for years are gone, Internet Explorer 10 and older are dropped, and the slim build is smaller. Migrate 4.0.2 and jQuery UI 1.14.2 followed within two weeks.

The timeline has 6 events, from 2006 to 2026.

Each major line is a branch. The jQuery repository rates the support each one gets today, and the support page says what critical-only means: 3.x “will only receive critical security patches and bug fixes”.

Branch Newest release Support from the jQuery team
4.x 4.0.0 Full: the current branch
3.x 3.7.1 Critical-only
2.x 2.2.4 None
1.x 1.12.4 None

A site on 3.7.1 is not abandoned, but it will get critical fixes and nothing more. A site on 1.x or 2.x gets nothing at all, and the same support page points the owners of such sites to commercial support providers.

The npm registry draws a line of its own. 50 of the 64 releases of the jquery package carry a deprecation message: exactly the releases older than 3.5.0. That release fixed CVE: Common Vulnerabilities and Exposures: the public list that gives each known security flaw an identifier such as CVE-2020-11023, so that advisories, scanners and fixes all refer to the same problem.-2020-11023, a flaw that let HTML containing <option> elements run code when it was passed to .html(), .append() and similar methods, even after sanitising, in every release from 1.0.3 to 3.4.1 (NVD). In 2025 the US Cybersecurity and Infrastructure Security Agency added it to its catalogue of vulnerabilities known to be exploited.

One more trap: the API documentation runs ahead of the releases. api.jquery.com already describes an addition “as of jQuery 4.1”, the responseURL of a request object, and lists 3.8 among its versions, though neither release exists. Check the version a feature needs against the version your page runs before you use it.

Not affiliated

Based on public information about the jQuery project. MySmartCoPilot is not affiliated with the jQuery project, and the jQuery project’s real release plans may differ from what this lesson describes.

Checkpoint

Check: Current releases and support

  1. Question 1 of 2 Which branch of jQuery gets only critical security patches and bug fixes from the jQuery team?

    Choose one answer.

    Show the answer: Question 1 of 2

    Answer: 3.x

    The README of the jQuery repository lists 4.x with full support, 3.x as critical-only and 2.x and 1.x with none. jquery.com/support says the same: 3.x receives only critical security patches and bug fixes.

  2. Question 2 of 2 npm marks a site's jQuery 3.4.1 as deprecated but not 3.5.0. What does 3.5.0 have that 3.4.1 lacks?

    Choose one answer.

    A hint

    Look at what the 3.5.0 entry of the timeline fixed.

    Show the answer: Question 2 of 2

    Answer: The fix for CVE-2020-11022 and CVE-2020-11023, which let HTML passed to .html() or .append() run code

    All 50 deprecated releases on npm are older than 3.5.0. 3.5.0 fixed CVE-2020-11022 and CVE-2020-11023, and CISA lists CVE-2020-11023 as exploited, so a release before 3.5.0 is a known risk, not only an old version.

Most jQuery sites run version 3 or older, and so does the advice you find

jQuery is still everywhere. W3Techs finds it on 85.6 % of the websites whose JavaScript library it can identify, which is 64.5 % of all websites, and the Stack Overflow developer survey of 2025 puts it third among web technologies, used by 23.4 % of the developers who answered, after Node.js (48.7 %) and React (44.7 %). For a maintainer, the list of versions matters more than the totals:

Version, among sites that use jQuery Share in W3Techs’ survey Support for that branch
3 78.8 % Critical fixes only
1 17.0 % None
2 4.2 % None
4 Not listed Full

About one jQuery site in five runs a branch that nobody fixes, and almost all the others run 3.x. Version 4 is too new to register yet.

The help you find online is just as old. Stack Overflow holds over a million questions tagged jquery. In 2021 people asked 21,672 new ones, about 1,800 a month; since jQuery 4.0.0 came out, only a few dozen have been asked in all, by the counts of the Stack Exchange API. Almost every answer, tutorial and snippet you will find was written for 1.x to 3.x, so it may call an API that jQuery 4 removed, such as $.trim() or $.isArray(), which the 4.0 upgrade guide replaces with the string’s own .trim() and Array.isArray().

Copying an old answer onto a jQuery 4 page

Wrong: pasting $.trim(name) from an answer written for jQuery 3, which throws TypeError: $.trim is not a function on 4.0.0. Right: check each jQuery function an answer uses against the version your page reports, and use the replacement the upgrade guide names, here name.trim().

Checkpoint

Check: Where jQuery is used today

  1. One question In W3Techs' list of versions, 17.0 % of the sites that use jQuery run version 1 and 4.2 % run version 2. What share of jQuery sites runs a branch that gets no fixes at all?

    Type a number.

    A hint

    Which branches get no support, and which shares belong to them?

    Show the answer: One question

    Answer: 21.2 % (anything from 21.15 to 21.25 counts)

    Branches 1.x and 2.x get no fixes, so their shares add up: 17.0 % + 4.2 % = 21.2 %, about one jQuery site in five. Nearly all the others run 3.x, which gets critical fixes only.

Ask the page which jQuery it runs

Before you plan anything, check what the page loads. Every jQuery object carries the version string in jQuery.fn.jquery (API documentation), and three more checks tell you the rest: what follows the version number names the build, jQuery Migrate sets jQuery.migrateVersion (Migrate README), and comparing window.$ with window.jQuery says whether $ is jQuery at all. This script reads all of them; paste it into the browser console of the page you are checking:

report.js: which jQuery does this page run? JavaScript · report.js
// report.js: which jQuery does this page run? Paste it into the browser console of any page.
(function (win) {
  const jq = win.jQuery;
  if (!jq || !jq.fn || !jq.fn.jquery) {
    console.log('No jQuery on this page: window.jQuery is not set');
    return;
  }
  // "3.7.1" or "4.0.0" for a full build, "4.0.0+slim", or "3.7.1 -ajax,…" with the modules left out.
  const full = jq.fn.jquery;
  const number = full.split(/[ +]/)[0];
  const slim = full.includes('+slim') || (full.includes('-ajax') && full.includes('-effects'));
  const build = full === number ? 'full build' : slim ? 'slim build' : 'custom build';
  console.log(`jQuery ${number}, ${build}`);
  console.log(`jQuery Migrate: ${jq.migrateVersion || 'not loaded'}`);
  console.log(`window.$: ${win.$ === jq ? 'this jQuery' : win.$ ? 'another library' : 'not set'}`);
  // The plugins your own code calls, by the name it calls them with.
  for (const name of ['cartBadge', 'datepicker']) {
    console.log(`.${name}(): ${typeof jq.fn[name] === 'function' ? 'loaded' : 'missing'}`);
  }
})(window);

It ran on three pages in jsdom, a DOM implementation for Node.js, with the official files of code.jquery.com: a shop theme on jQuery 3.7.1 with Migrate 3.4.1, loaded the way WordPress 7.1 loads them; the same shop upgraded to 4.0.0 with the development build of Migrate 4.0.2; and a landing page on the slim build of 4.0.0:

The three pages

pages/theme.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bakery shop: a theme on jQuery 3.7.1</title>
  </head>
  <body>
    <p id="cart">Cart</p>
    <!-- As WordPress 7.1 loads them: jQuery 3.7.1, which its copy follows with noConflict(), then Migrate 3.4.1. -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>jQuery.noConflict();</script>
    <script src="https://code.jquery.com/jquery-migrate-3.4.1.min.js" integrity="sha256-UnTxHm+zKuDPLfufgEMnKGXDl6fEIjtM+n1Q6lL73ok=" crossorigin="anonymous"></script>
    <script src="../cart-badge.js"></script>
    <script src="../report.js"></script>
  </body>
</html>

pages/upgraded.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bakery shop: upgraded to jQuery 4.0.0</title>
  </head>
  <body>
    <p id="cart">Cart</p>
    <!-- During an upgrade: jQuery 4.0.0 with the development build of Migrate 4.0.2, which logs what it finds. -->
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-migrate-4.0.2.js" integrity="sha256-4jeVh9jfwyyopEc4//vH8BKuFP0q9ElJZLsJrTEcZjI=" crossorigin="anonymous"></script>
    <script src="../cart-badge.js"></script>
    <script src="../report.js"></script>
  </body>
</html>

pages/slim.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Landing page: the slim build of jQuery 4.0.0</title>
  </head>
  <body>
    <p id="cart">Cart</p>
    <script src="https://code.jquery.com/jquery-4.0.0.slim.min.js" integrity="sha256-8DGpv13HIm+5iDNWw1XqxgFB4mj+yOKFNb+tHBZOowc=" crossorigin="anonymous"></script>
    <script src="../report.js"></script>
  </body>
</html>

cart-badge.js

// cart-badge.js: a small plugin. It adds .cartBadge() to the copy of jQuery that is loaded when it runs.
(function ($) {
  $.fn.cartBadge = function (count) {
    return this.each(function () {
      $(this).attr('data-count', String(count));
    });
  };
})(jQuery);
What report.js logged on each page JavaScript · report.mjs
// Prints what report.js logged on three pages in jsdom (recorded.mjs), page by page.
import { show } from './show.mjs';

for (const page of ['pages/theme.html', 'pages/upgraded.html', 'pages/slim.html']) {
  console.log(`${page}:`);
  show(page);
}

Output

pages/theme.html:
JQMIGRATE: Migrate is installed, version 3.4.1
jQuery 3.7.1, full build
jQuery Migrate: 3.4.1
window.$: not set
.cartBadge(): loaded
.datepicker(): missing
pages/upgraded.html:
JQMIGRATE: Migrate is installed with logging active, version 4.0.2
jQuery 4.0.0, full build
jQuery Migrate: 4.0.2
window.$: this jQuery
.cartBadge(): loaded
.datepicker(): missing
pages/slim.html:
jQuery 4.0.0, slim build
jQuery Migrate: not loaded
window.$: this jQuery
.cartBadge(): missing
.datepicker(): missing

Recorded with Node.js 24.21.0 on macOS 26 arm64. To run it yourself: mise exec node@24.21.0 -- node report.mjs

Read the output page by page:

  • The theme page says window.$: not set. Its copy of jQuery handed $ back with jQuery.noConflict(), as the copy that WordPress builds does at its end (Gruntfile.js), so code on that page must write jQuery(…) or receive $ as a parameter, the subject of this module’s third lesson.
  • Migrate speaks first. Its production build of 3.4.1 says that it is installed; the development build of 4.0.2 says that its logging is on, so its warnings appear in the console while you test.
  • The slim page reports slim build because its version string is 4.0.0+slim. On 3.x, a slim build’s string lists the modules it leaves out instead.
  • .cartBadge() is missing on the slim page because that page never loads the plugin. When the console says that a plugin method “is not a function”, the plugin was not loaded, was loaded before jQuery, or belongs to another copy of jQuery on the same page.
HTML, CSS & JS Playground (Online Editor) Load jQuery from code.jquery.com in the HTML tab, paste report.js into the JavaScript tab and read the report in the console.

Key idea

Ask the running page, not the files: jQuery.fn.jquery gives the version and the build, jQuery.migrateVersion says whether Migrate is loaded, and window.$ === window.jQuery says whether $ is jQuery.

Checkpoint

Check: Reading what a page runs

  1. Question 1 of 2 On a page, jQuery.fn.jquery returns '4.0.0+slim'. Which call fails there?

    Choose one answer.

    Show the answer: Question 1 of 2

    Answer: $.ajax({ url: '/cart.json' })

    "+slim" after the number names the slim build of jQuery 4. It has no Ajax, no effects and, from 4.0, no Deferreds or Callbacks either, so code that calls $.ajax() needs the full build.

  2. Question 2 of 2 report.js prints window.$: not set on a WordPress page, after jQuery 3.7.1, full build. What does that mean for code in a theme?

    Choose one answer.

    Show the answer: Question 2 of 2

    Answer: WordPress's copy called jQuery.noConflict(), so the theme must use jQuery, or receive $ as a parameter

    jQuery sets window.jQuery and window.$ when it loads; noConflict() puts $ back to what it was before, here nothing. Code on such a page writes jQuery(...) or wraps itself in a function that receives jQuery as $.

A site’s jQuery comes with its platform, theme or template

Few sites choose their jQuery release on purpose: it arrives with the platform, the theme or the project template, and each of them pins its own. These are the copies the main platforms ship, read from their source code:

Platform or template The jQuery it ships Where it says so
WordPress 7.1 3.7.1, with jQuery Migrate 3.4.1 wp-includes/script-loader.php
Drupal 11.3 4.0.0 core/core.libraries.yml
Magento Open Source, 2.4 development branch 3.7.1 lib/web/jquery.js
ASP.NET Core 10 MVC template 3.7.1 wwwroot/lib/jquery
Bootstrap 4.6 starter template The slim build of 3.5.1 The Bootstrap 4.6 introduction

Bootstrap is the odd one out: the introduction of version 4.6 says that many of its components “require jQuery”, while Bootstrap 5 dropped that dependency (migration guide). So a framework can be the only reason a page loads jQuery.

The other copies come from themes and plugins that bring their own jQuery, and from old templates that load it from a CDN: A content delivery network: servers in many places that keep copies of files such as jquery-4.0.0.min.js and send each visitor the copy from a server near them. More in “Loading jQuery: CDN, SRI, npm, slim and noConflict”. Google Hosted Libraries offers no jQuery 4: its newest jQuery is 3.7.1, so a page that loads ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js cannot be upgraded by editing the number in the address. When a report shows a version that the platform does not ship, such as 3.6.0 on WordPress 7.1, look for the theme or plugin that loaded a copy of its own.

Write down where each copy comes from

Next to the version that report.js prints, note who loads that copy: the platform, a theme, a plugin or your own template. The answer decides who can upgrade it, and the last lesson of this module shows what two copies on one page do.

Checkpoint

Check: Where a site's copy comes from

  1. Question 1 of 2 report.js on a WordPress 7.1 site prints jQuery 3.6.0. Where does that copy most likely come from?

    Choose one answer.

    Show the answer: Question 1 of 2

    Answer: A theme or a plugin that loads its own copy of jQuery

    The version a page reports is the last copy that loaded. When it differs from the platform's own release, look for a theme, plugin or template that loads another copy, often from a CDN.

  2. Question 2 of 2 A tutorial loads https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js. What happens if you change 3.7.1 to 4.0.0 in that address?

    Choose one answer.

    Show the answer: Question 2 of 2

    Answer: The request fails, because Google Hosted Libraries has no jQuery 4 release

    To load jQuery 4 from a CDN, use one that hosts it, such as code.jquery.com, which publishes the integrity value of every file. Editing the version number of an old Google address only breaks the page.

Maintain, upgrade or remove: one decision per site

Every site that runs jQuery is on one of three paths, and the version it runs today narrows the choice:

  • Maintain: keep the release and fix bugs carefully. This is a fair choice on a supported branch, 4.x or 3.x, when an upgrade would cost more than the site’s remaining life is worth. On 1.x and 2.x it means living with CVE-2020-11023 and with no fixes at all.
  • Upgrade: move to jQuery 4 with jQuery Migrate. The Migrate README pairs Migrate 3 with jQuery 3.x and Migrate 4 with 4.x, and says that the way to 4.x goes through 3.x, so a site on 1.x or 2.x takes at least two steps.
  • Remove: replace jQuery with the browser’s own DOM APIs, one part of the code at a time, the subject of this track’s migration module. It pays off on code that keeps changing, and only for the jQuery your own code loads.

A platform changes the picture: WordPress.org’s plugin rules say that plugins “must use the versions of those libraries packaged with WordPress”, so a plugin works with the platform’s jQuery instead of loading a copy of its own. Answer four questions about a site you look after, and the table marks the paths that fit it:

Interactive · answer and compare Keep, upgrade or remove: which path fits your site? Answer four questions about the site you look after. The table marks the paths that fit and says why the others do not.
Which major version of jQuery does the site run today?
Does a platform such as WordPress, Drupal or Magento load jQuery for the site?
Do the jQuery plugins the site needs work on jQuery 4?
Will the site keep changing for years?

Answer the questions above: the table then marks what fits your case and says why the rest does not.

Three paths for a site that runs jQuery, against the four things that decide between them
Path Security fixes Work now Platform and plugins Cost in later years
Maintain What you do: keep the version and fix bugs safely Mixed 3.x gets critical fixes only; 1.x and 2.x get none at all Good nothing changes but the bugs you fix Good keeps what the platform and its plugins were built for Poor answers, plugins and the platforms move on to 4.x
Upgrade What you do: move to jQuery 4 with jQuery Migrate Good 4.x is the branch with full support Mixed Migrate lists what to change; 1.x and 2.x go to 3.x first Mixed every plugin must work on 4.x, and a platform may still ship 3.x Good the next upgrades are small steps inside 4.x
Remove What you do: replace jQuery with DOM code, one part at a time Good no jQuery of your own left to patch Poor every jQuery call is rewritten and tested again Poor a platform or a plugin may load jQuery anyway Good one library fewer to keep up to date
How the answers decide
  • “Which major version of jQuery does the site run today?” 1.x or 2.x: rules out Maintain. Branches 1.x and 2.x get no fixes at all, and every release older than 3.5.0 has CVE-2020-11023, which CISA lists as exploited.
  • “Which major version of jQuery does the site run today?” 1.x or 2.x: adds a caveat to Upgrade. Move to 3.7.1 with jQuery Migrate 3 first: Migrate 4 only reports what changed between 3.x and 4.x.
  • “Which major version of jQuery does the site run today?” 4.x: rules out Upgrade. The site already runs the current branch: maintaining it means taking each new 4.x release.
  • “Which major version of jQuery does the site run today?” 3.x and “Will the site keep changing for years?” Yes, it is developed further: adds a caveat to Maintain. The 3.x branch gets critical fixes only: plan the move to 4.x while the site is still being worked on.
  • “Does a platform such as WordPress, Drupal or Magento load jQuery for the site?” Yes, the platform loads it: adds a caveat to Upgrade and Remove. Code for a platform uses the jQuery the platform ships: make your own code work on its version instead of loading a copy of your own.
  • “Do the jQuery plugins the site needs work on jQuery 4?” No, or not known yet: adds a caveat to Upgrade. Update or replace each plugin that fails on 4.x first, or keep jQuery Migrate on the page while you do.
  • “Will the site keep changing for years?” No, it is near its end: rules out Remove. A rewrite pays off on code that keeps changing; a site near its end needs its jQuery patched, not replaced.

In short: a site on 1.x or 2.x upgrades through 3.x, a site on 3.x maintains for a while and plans for 4.x, code for a platform follows the platform’s version, and removal suits code you own that keeps changing.

Checkpoint

Check: Maintain, upgrade or remove

  1. Question 1 of 2 A client's shop runs jQuery 1.12.4 from its own theme, and new features are still added every month. Which first step fits?

    Choose one answer.

    Show the answer: Question 1 of 2

    Answer: Move to jQuery 3.7.1 with jQuery Migrate 3, fix what it reports, and plan 4.x after that

    A site on 1.x or 2.x has no supported release to stay on. Migrate 3 reports the changes up to 3.x, Migrate 4 the changes from 3.x to 4.x, so the upgrade goes in two steps, each with its own Migrate.

  2. Question 2 of 2 You write a WordPress plugin and would like to use jQuery 4. What should the plugin do?

    Choose one answer.

    Show the answer: Question 2 of 2

    Answer: Use the jQuery that WordPress ships, and make the code work on that version

    On a platform, jQuery belongs to the platform. Write plugin code that works on the platform's version today, 3.7.1 with Migrate in WordPress 7.1, and on 4.x, which the platform may ship later.

Practise: report and decide

Write the report as a function that the rest of your tools can call, and check it against the version strings the real builds report. The sample tests run in your browser:

Exercise · Easy · JavaScript

Report which jQuery a page runs

Write getJQueryReport(win) in report.mjs. It reads a page's window, passed in as win, and returns what report.js printed, as an object:

  • version: the number at the start of win.jQuery.fn.jquery, before any space or +, such as '3.7.1'.
  • build: 'full' when nothing follows the number; 'slim' when +slim follows it (jQuery 4), or when the list of left-out modules after it includes both -ajax and -effects (jQuery 3); 'custom' for any other list.
  • migrate: win.jQuery.migrateVersion when jQuery Migrate has set it, otherwise null.
  • dollar: 'jquery' when win.$ is the same object as win.jQuery, 'none' when win.$ is undefined or null, and 'other' when it is anything else, such as another library.

When win.jQuery is missing, or has no fn.jquery string, the function returns null.

The sample tests pass plain objects shaped like the parts of window the function reads, with the version strings that the real builds report: '4.0.0', '4.0.0+slim', '3.7.1' and the long '3.7.1 -ajax,…' of 3.7.1's slim build. In a browser, getJQueryReport(window) reports on the page you are on.

Starter code · report.mjs

/**
 * What a page's window says about its jQuery: the version, the build, jQuery Migrate and who owns $.
 * @param {object} win the page's window (window in a browser)
 * @returns {{ version: string, build: 'full' | 'slim' | 'custom', migrate: string | null, dollar: 'jquery' | 'other' | 'none' } | null}
 */
export function getJQueryReport(win) {
  return null;
}
The sample tests · report.test.mjs
import { test, assert } from 'mysmartcopilot:test';
import { getJQueryReport } from './report.mjs';

// Plain objects shaped like the parts of window that the function reads, with the version strings the real builds
// report (jQuery.fn.jquery) and the values jQuery Migrate sets (jQuery.migrateVersion).
function page(versionString, { migrate, dollar = 'jquery' } = {}) {
  const jQuery = { fn: { jquery: versionString } };
  if (migrate) jQuery.migrateVersion = migrate;
  const win = { jQuery };
  if (dollar === 'jquery') win.$ = jQuery;
  else if (dollar === 'other') win.$ = function otherLibrary(id) { return id; };
  return win;
}
const SLIM_371 = '3.7.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/animatedSelector,-effects/Tween';

test('a theme on 3.7.1 with Migrate 3.4.1, after noConflict()', () => {
  assert.deepEqual(getJQueryReport(page('3.7.1', { migrate: '3.4.1', dollar: 'none' })), { version: '3.7.1', build: 'full', migrate: '3.4.1', dollar: 'none' });
});

test('an upgraded page on 4.0.0 with Migrate 4.0.2', () => {
  assert.deepEqual(getJQueryReport(page('4.0.0', { migrate: '4.0.2' })), { version: '4.0.0', build: 'full', migrate: '4.0.2', dollar: 'jquery' });
});

test("the slim build of 4.0.0 reports '4.0.0+slim'", () => {
  assert.deepEqual(getJQueryReport(page('4.0.0+slim')), { version: '4.0.0', build: 'slim', migrate: null, dollar: 'jquery' });
});

test("the slim build of 3.7.1 lists the modules it leaves out", () => {
  assert.deepEqual(getJQueryReport(page(SLIM_371)), { version: '3.7.1', build: 'slim', migrate: null, dollar: 'jquery' });
});

test('a build that leaves out other modules is custom', () => {
  assert.equal(getJQueryReport(page('3.7.1 -deprecated')).build, 'custom');
  assert.equal(getJQueryReport(page('3.7.1 -ajax')).build, 'custom', 'without -effects it is not the slim build');
  assert.equal(getJQueryReport(page('3.7.1 -effects,-effects/Tween')).build, 'custom', 'without -ajax it is not the slim build');
});

test('$ that belongs to another library', () => {
  assert.equal(getJQueryReport(page('4.0.0', { dollar: 'other' })).dollar, 'other');
});

test('a page without jQuery', () => {
  assert.equal(getJQueryReport({}), null);
  assert.equal(getJQueryReport({ jQuery: {} }), null, 'an object called jQuery without fn.jquery is not jQuery');
  assert.equal(getJQueryReport({ jQuery: { fn: {} } }), null);
});
A hint

full.split(/[ +]/)[0] gives the number of a version string full. If what is left is the whole string, it is a full build; otherwise look for +slim, or for both -ajax and -effects. For dollar, compare win.$ === win.jQuery first, then test for undefined or null with win.$ == null.

The sample tests run on this device, in your browser (QuickJS): nothing is sent to mysmartcopilot.com. The first run downloads JavaScript (about 0.6 MB), which is kept for the next runs. A check in your browser is feedback for you, not proof that the code is right for every input.

Then answer the lesson’s own questions. They start with what you know least, and every answer says why it is right or what it misses:

Practice that adapts to you

Practise this lesson

10 questions about 5 ideas of this lesson. Each answer is explained at once, and what you get right is kept in this browser.

  1. Question 1 of 10 Which is the newest release of jQuery?

    Choose one answer.

    Show the answer: Question 1 of 10

    Answer: 4.0.0

    jQuery 4.0.0 is the current release, with jQuery Migrate 4.0.2 and jQuery UI 1.14.2 beside it. The documentation already mentions 3.8 and 4.1, which have not been released.

  2. Question 2 of 10 An answer you found reads jqXHR.responseURL, which api.jquery.com describes as added in jQuery 4.1. Your site runs 4.0.0. What do you do?

    Choose one answer.

    Show the answer: Question 2 of 10

    Answer: Treat it as missing on 4.0.0, because the documentation describes a release that is not out yet

    api.jquery.com marks additions with the version they arrive in, and some of them are versions that do not exist yet. jQuery.fn.jquery tells you what the page has; anything newer is not there.

  3. Question 3 of 10 In W3Techs' survey, about what share of all websites use jQuery?

    Choose one answer.

    Show the answer: Question 3 of 10

    Answer: About two in three, 64.5 %

    jQuery is on 64.5 % of all websites in W3Techs' survey, and 78.8 % of those sites run version 3. Developer surveys measure something else: how many developers use it.

  4. Question 4 of 10 An answer from years ago trims a value with $.trim(name). Your page runs jQuery 4.0.0. What happens?

    Choose one answer.

    Show the answer: Question 4 of 10

    Answer: It throws a TypeError, because jQuery 4 removed $.trim(); name.trim() does the same job

    Nearly every jQuery answer and tutorial was written for 1.x to 3.x. Check each API it uses against the version you run; the 4.0 upgrade guide lists what was removed and what replaces it.

  5. Question 5 of 10 Which property tells you the version of the jQuery a page runs?

    Choose one answer.

    Show the answer: Question 5 of 10

    Answer: jQuery.fn.jquery

    jQuery.fn.jquery, the same as $().jquery, holds the version and the build, such as '4.0.0' or '4.0.0+slim'. jQuery.migrateVersion shows whether Migrate is there.

  6. Question 6 of 10 jQuery.fn.jquery returns '3.7.1 -ajax,-ajax/jsonp,-ajax/load,…,-effects,-effects/animatedSelector,-effects/Tween'. What does the page run?

    Choose one answer.

    Show the answer: Question 6 of 10

    Answer: The slim build of jQuery 3.7.1

    A full build's string is the bare number. On 4.x the slim build adds +slim; on 3.x every build that leaves something out lists it, so -ajax and -effects together mean the slim build.

  7. Question 7 of 10 Which of these ships jQuery 4.0.0?

    Choose one answer.

    Show the answer: Question 7 of 10

    Answer: Drupal 11.3

    Each platform pins its own release, and only Drupal had moved to 4.0.0. The platform's version is the one a theme or plugin for it should work with.

  8. Question 8 of 10 A site is built on Bootstrap 4.6, whose starter template loads the slim build of jQuery 3.5.1. What does moving to Bootstrap 5 change for jQuery?

    Choose one answer.

    Show the answer: Question 8 of 10

    Answer: Bootstrap's own JavaScript stops needing jQuery, though other code on the page may still use it

    A framework can be the reason jQuery is on a page. When it stops needing jQuery, check what else calls jQuery before you remove the script tag.

  9. Question 9 of 10 For which site is maintaining its current jQuery a fair choice?

    Choose one answer.

    Show the answer: Question 9 of 10

    Answer: A site on 3.7.1 that will be replaced next year, with a plugin that fails on 4.x

    Maintaining is the right call only on a supported release, 4.x or 3.x, and most of all when an upgrade would cost more than the site's remaining life is worth.

  10. Question 10 of 10 A site runs jQuery 2.2.4. In which order do you upgrade it?

    Choose one answer.

    Show the answer: Question 10 of 10

    Answer: 3.7.1 with jQuery Migrate 3, fix every warning, then 4.0.0 with jQuery Migrate 4

    Two steps, two Migrate versions: Migrate 3 with jQuery 3.7.1 reports what changed since 1.x and 2.x, then Migrate 4 with 4.0.0 reports what changed since 3.x.

Interview questions

Warm-up (fresher to 2–5 years): how do you tell which jQuery a page runs, and whether jQuery Migrate is loaded?

Open the browser console on the page and read jQuery.fn.jquery: it holds the version, such as 3.7.1, and anything after the number names the build, +slim on 4.x or a list of left-out modules on 3.x. jQuery.migrateVersion is set only when jQuery Migrate is loaded, and Migrate logs a line when it starts, which in its development build says that logging is active. Compare window.$ with window.jQuery to see whether $ is jQuery, another library or nothing, as on WordPress, whose copy calls jQuery.noConflict(). Ask the running page rather than reading file names, because a theme or plugin may load a second copy that replaces the first.

Two harder questions follow, about a shop on jQuery 1.12.4 and a plugin that ships its own jQuery. Decide what you would say before you open each first step:

Model answers open with any pass: ₹79 for 1 week ($2.99), one payment that never renews.

  1. Mid to senior

    A client's shop runs jQuery 1.12.4 through an old theme. The owner asks whether it is "safe enough" to leave it as it is. What do you tell them, and what do you do first?

    Model answer, Pro. Model answers open with any pass; prices are in the notice on this page. First step and follow-ups

  2. Mid to senior

    Your team's WordPress plugin now loads its own copy of jQuery 4.0.0 "to be modern". Since that release, other plugins break on customers' sites. Explain what is happening and what the plugin should do instead.

    Model answer, Pro. First step and follow-ups

Key takeaways

  • jQuery 4.0.0 is the current release, with jQuery Migrate 4.0.2 and jQuery UI 1.14.2; 3.x gets critical fixes only, and 1.x and 2.x get none.
  • npm marks every release older than 3.5.0 as deprecated, and those releases have CVE-2020-11023, which CISA lists as exploited.
  • Most jQuery sites, and almost all the advice online, are on 1.x to 3.x, so check every API an old answer uses against the version you run.
  • jQuery.fn.jquery, jQuery.migrateVersion and window.$ === window.jQuery tell you what a page really runs.
  • A site’s copy usually comes from its platform, theme or template, and the version it runs today decides whether to maintain, to upgrade through 3.x, or to remove jQuery part by part.

Terms in this lesson

CVE
Common Vulnerabilities and Exposures: the public list that gives each known security flaw an identifier such as CVE-2020-11023, so that advisories, scanners and fixes all refer to the same problem.
jQuery Migrate
A plugin from the jQuery team, loaded right after jQuery, that brings back APIs a newer jQuery removed or changed and, in its development build, logs a warning each time code uses one, so the code can be fixed before the upgrade.

References

Related tools

Report a problem with this lesson

Quick answers and tool search

Type to search tools or to get a quick answer, for example 18% of 2500. Use the up and down arrow keys to move through the results, Enter to choose, and Escape to close.