jQuery 4 and Upgrading from jQuery 3
jQuery 4.0.0 was released in January 2026. It is the first major version after about ten years. Most code which works in jQuery 3.x also works in 4.0, but some old methods were removed, and a few things behave in a different way. In this chapter we run the same code in jQuery 3.7.1 and in jQuery 4.0.0, and show both results.
What changed in short
- Removed deprecated methods like
$.trim(),$.isArray(),$.parseJSON()and others. JavaScript has the same features now. - Old browsers dropped. Internet Explorer 10 and older, and some other old browsers, are not supported. IE 11 still works in 4.0, and its support is planned to end in jQuery 5.
- Some behavior changes (for example the focus and blur event order follows the standard now, and JSONP is no longer converted automatically).
- Modern packaging: jQuery is also built as ES modules, and the slim build does not include Deferred and Callbacks.
- Trusted Types support for the pages with a strict Content Security Policy.
Check: which methods exist?
<p>Page</p>var names = ['trim', 'isArray', 'isFunction', 'isNumeric', 'isWindow', 'parseJSON', 'nodeName', 'type', 'now', 'camelCase', 'unique'];
names.forEach(function (n) {
console.log('$.' + n + ' -> ' + typeof $[n]);
});
jQuery 3.7.1:
$.trim -> function
$.isArray -> function
$.isFunction -> function
$.isNumeric -> function
$.isWindow -> function
$.parseJSON -> function
$.nodeName -> function
$.type -> function
$.now -> function
$.camelCase -> function
$.unique -> function
jQuery 4.0.0:
$.trim -> undefined
$.isArray -> undefined
$.isFunction -> undefined
$.isNumeric -> undefined
$.isWindow -> undefined
$.parseJSON -> undefined
$.nodeName -> undefined
$.type -> undefined
$.now -> undefined
$.camelCase -> undefined
$.unique -> undefined
In 4.0.0 the removed methods show undefined. If your code calls one of them, you get an error “is not a function”. Replace them with the native versions, as shown in the table of the Utility Methods chapter.
Methods which still exist (but are old)
console.log('bind: ' + typeof $.fn.bind);
console.log('delegate: ' + typeof $.fn.delegate);
console.log('click shortcut: ' + typeof $.fn.click);
console.log('proxy: ' + typeof $.proxy);
jQuery 3.7.1:
bind: function
delegate: function
click shortcut: function
proxy: function
jQuery 4.0.0:
bind: function
delegate: function
click shortcut: function
proxy: function
These still work in 4.0.0, but they are old. Use .on() instead of .bind() and .delegate(), and be ready, because deprecated things may go in the next major version.
attr(‘checked’) returns a different value
<input type="checkbox" id="agree" checked>console.log(JSON.stringify($('#agree').attr('checked')));
console.log($('#agree').prop('checked'));
jQuery 3.7.1:
"checked"
true
jQuery 4.0.0:
""
true
In jQuery 3.x, .attr('checked') gave the word “checked” for a checked box. In 4.0.0 it gives the real value of the HTML attribute, which is an empty text. The right way to know the state of a checkbox always was .prop('checked') or .is(':checked'), and they give the same result in both versions.
data() returns a different kind of object
<div id="d" data-id="42" data-role="admin"></div>var all = $('#d').data();
console.log(all.id + ' ' + all.role);
console.log(Object.getPrototypeOf(all) === null);
jQuery 3.7.1:
42 admin
false
jQuery 4.0.0:
42 admin
true
In 4.0.0 the object of .data() has no prototype. So methods like all.hasOwnProperty('id') do not exist on it. Use Object.hasOwn(all, 'id') or 'id' in all.
What stays the same
The big part of the API is the same: selectors, events with .on(), effects, .css(), .attr() for normal attributes, DOM insertion and Ajax. All the examples of this tutorial gave the same results in 3.7.1 and in 4.0.0, except the ones shown on this page.
How to upgrade
- Update to the latest 3.x (3.7.1) first, and fix all the warnings.
- Add the jQuery Migrate plugin. It shows warnings in the browser console for the removed or changed features, and it can restore some of them for the time of the upgrade.
- Search your code and your plugins for the removed methods, and replace them with the native versions.
- Change the jQuery file to 4.x and test the pages and the plugins.
- Remove the Migrate plugin when there are no more warnings.
Plugins and WordPress
- Many plugins use the removed methods. Check that your plugins support jQuery 4 before the upgrade.
- WordPress core controls its own version of jQuery. Do not replace the jQuery of WordPress with another one, because themes and plugins depend on it. Follow the WordPress and plugin updates.
- A good test is to run your site with Migrate and watch the console.
Should you upgrade now?
If your project is active and your plugins are ready, yes. For old sites which work well, there is no hurry, but plan it, because the 3.x line will get less and less attention.
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |