jQuery 4.0 Migration

Status: Production Ready Last Updated: 2026-01-25 Dependencies: None Latest Versions: jquery@4.0.0, jquery-migrate@4.0.2

---

Quick Start (5 Minutes)

1. Add jQuery Migrate Plugin for Safe Testing

Before upgrading, add the migrate plugin to identify compatibility issues:

<!-- Development: Shows console warnings for deprecated features -->
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-4.0.2.js"></script>

Why this matters:

• Logs specific warnings when deprecated/removed features execute
• Identifies code that needs updating before it breaks
• Provides backward compatibility shims during transition

2. Install via npm (if using build tools)

npm install jquery@4.0.0
# Or with migrate plugin for testing
npm install jquery@4.0.0 jquery-migrate@4.0.2

3. Check for Breaking Changes

Run your application and check console for migrate plugin warnings. Each warning indicates code that needs updating.

---

Breaking Changes Reference

Removed jQuery Utility Functions

These functions were deprecated and are now removed. Use native JavaScript equivalents:

Removed	Native Replacement
$.isArray(arr)	Array.isArray(arr)
$.parseJSON(str)	JSON.parse(str)
$.trim(str)	str.trim() or String.prototype.trim.call(str)
$.now()	Date.now()
$.type(obj)	typeof obj + Array.isArray() + instanceof
$.isNumeric(val)	!isNaN(parseFloat(val)) && isFinite(val)
$.isFunction(fn)	typeof fn === 'function'
$.isWindow(obj)	obj != null && obj === obj.window
$.camelCase(str)	Custom function (see below)
$.nodeName(el, name)	el.nodeName.toLowerCase() === name.toLowerCase()

camelCase replacement:

// Native replacement for $.camelCase
function camelCase(str) {
  return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
}

Removed Prototype Methods

Three internal array methods removed from jQuery objects:

// OLD - No longer works in jQuery 4.0
$elems.push(elem);
$elems.sort(compareFn);
$elems.splice(index, count);

// NEW - Use array methods with call/apply
[].push.call($elems, elem);
[].sort.call($elems, compareFn);
[].splice.call($elems, index, count);

// Or convert to array first
const arr = $.makeArray($elems);
arr.push(elem);

Focus/Blur Event Order Changed

jQuery 4.0 follows the W3C specification for focus event order:

// jQuery 3.x order (non-standard):
// focusout → blur → focusin → focus

// jQuery 4.0 order (W3C standard):
// blur → focusout → focus → focusin

Impact: If your code depends on specific event ordering, test thoroughly.

// Example: code that may need adjustment
$input.on('blur focusout focus focusin', function(e) {
  console.log(e.type); // Order changed in 4.0
});

Removed from Slim Build

The slim build (jquery-4.0.0.slim.min.js) no longer includes:

• Deferreds and Callbacks (use native Promises instead)
• AJAX functionality
• Animation effects

// If using slim build, replace Deferreds with Promises
// OLD - Deferred
const deferred = $.Deferred();
deferred.resolve(value);
deferred.promise();

// NEW - Native Promise
const promise = new Promise((resolve, reject) => {
  resolve(value);
});

toggleClass Changes

The toggleClass(boolean) and toggleClass(undefined) signatures are removed:

// OLD - No longer works
$elem.toggleClass(true);   // Added all classes
$elem.toggleClass(false);  // Removed all classes

// NEW - Be explicit
$elem.addClass('class1 class2');    // Add classes
$elem.removeClass('class1 class2'); // Remove classes

// Or use toggleClass with class names
$elem.toggleClass('active', true);  // Force add
$elem.toggleClass('active', false); // Force remove

AJAX Script Execution

Scripts fetched via AJAX no longer auto-execute unless dataType is specified:

// OLD - Scripts auto-executed
$.get('script.js');

// NEW - Must specify dataType for auto-execution
$.get({
  url: 'script.js',
  dataType: 'script'
});

// Or use $.getScript (still works)
$.getScript('script.js');

Removed CSS Properties

Removed	Notes
$.cssNumber	Removed - define locally if needed
$.cssProps	No longer needed - vendor prefixes obsolete
$.fx.interval	Removed - requestAnimationFrame handles this

---

WordPress-Specific Migration

1. Check WordPress jQuery Version

# Check current jQuery version in WordPress
wp eval "echo wp_scripts()->registered['jquery-core']->ver;"

2. WordPress jQuery Migration Path

WordPress themes/plugins should:

// Dequeue old jQuery and enqueue 4.0 (testing only)
function upgrade_jquery_for_testing() {
  if (!is_admin()) {
    wp_deregister_script('jquery-core');
    wp_deregister_script('jquery');

    wp_register_script('jquery-core',
      'https://code.jquery.com/jquery-4.0.0.min.js',
      array(), '4.0.0', true);

    wp_register_script('jquery', false, array('jquery-core'), '4.0.0', true);

    // Add migrate plugin for debugging
    wp_enqueue_script('jquery-migrate',
      'https://code.jquery.com/jquery-migrate-4.0.2.min.js',
      array('jquery'), '4.0.2', true