jQuery 4.0 Migration

Status: Production Ready Last Updated: 2026-01-25 Dependencies: None Latest Versions: [email protected], [email protected]

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 [email protected]
# Or with migrate plugin for testing
npm install [email protected] [email protected]

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:

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

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