Book a Call

jQuery - Write Less Do More

jQuery 4 is Coming – Be Ready

The beta has been out for some time but jQuery have announced that the landmark update to jQuery 4 is just around the corner. If your website uses jQuery (and there’s a strong chance it does), you want to get ahead of this.

jWhat?!

jQuery is a JavaScript library (that is, an extra file that extends the functionality of your site). Originally released in 2006, it provides a straightforward syntax that makes tasks like traversing and manipulating the web page, handling events and creating animations much easier when compared with straight ‘vanilla’ JavaScript.

At the time of its release, JavaScript implementations varied widely from browser to browser meaning interactive code was bulky, complicated and unreliable. Back then, jQuery took a lot of the uncertainty out of adding interactivity to your site. Add to that sounds, animation and all sorts of other goodies … we developers felt like we had been handed the keys to the kingdom. Uptake was rapid.

It may be starting to go out of fashion but, as of January 2025, jQuery remains a dominant force in web development. According to W3Techs, it is used by 75.3% of all websites, accounting for 93.6% of the JavaScript library market share. (w3techs.com) BuiltWith reports that over 71 million live websites utilise jQuery, with an additional 86 million sites having used it historically. (trends.builtwith.com).

jQuery will be here for a while yet.

So Why Does The jQuery 4 Update Matter?

Incremental versions (PHP 5 to PHP 7 or WordPress 5 to WordPress 6) always represent significant change. Developers often rewrite huge proportions sections of the code to remove bloat and support for outdated or deprecated features. The new library will be smaller and faster than its antecedents.

jQuery typically only provides active support and updates to the latest version. To keep your site secure it is likely you’ll need to update soon.

But the changes below are extensive and may well be ‘breaking’ – that is, old code may no longer work with it. The upgrade may not be straightforward.

So What’s Going?

Support for Internet Explorer (Prior to Version 11)

Older browsers are arse – insecure and idiosyncratic, factoring old browsers into your developments costs time, money and peace of mind. Older versions of Internet Explorer were truly diabolical – the effort poured into keeping jQuery IE compatible added greatly to the library’s size.

The user base of these older browsers is becoming vanishingly small.

Push, Sort, and Splice

In the bad old days, Internet Explorer and others used to handle these common datatypes in a manner all their own. So, for a long time, jQuery had it’s own functions which presented a consistent interface for users to code with.

The developer wrote some jQuery and the library just ‘worked‘ in all browsers … it was like magic.

These array manipulation functions are now entirely standard across all browsers. jQuery no longer needs those internal methods so the developers have removed them.

Developers should update their code if these methods were used, for example, by writing [].push.call($elems, elem) instead of $elems.push(elem). Some plugins may be affected by this change.

Many jQuery Functions

Similarly, developers have removed many old functions in this update. These functions were either meant for internal use or now have better, faster built-in browser alternatives. Among the removed functions are:

  • jQuery.cssNumber
  • jQuery.cssProps
  • jQuery.isArray
  • jQuery.parseJSON
  • jQuery.nodeName
  • jQuery.isFunction
  • jQuery.isWindow
  • jQuery.camelCase
  • jQuery.type
  • jQuery.now
  • jQuery.isNumeric
  • jQuery.trim
  • jQuery.fx.interval

If your website uses any of the above e.g. $.trim(), they will break the website – they need to be removed.

Focusin and Focusout Event Order

jQuery 4.0 introduces a breaking change in the order it handles focus and blur events (including focusin, focusout, focus, the order of focus and blur events (like focusin, focusout, focus, and blur) has changed in jQuery 4.0.

Previously, jQuery used its own order, but it now follows the W3C standard. The new order is:

  1. blur
  2. focusout
  3. focus
  4. focusin

This change makes the behaviour consistent with modern browsers but, if your code relied on the old event order, your app’s behaviour might need a tweak.

Matching Modern Needs

2006 was a long time ago and the internet is a very difference place. Developers are abandoning, nonolithic code bases in favour of systems heavily reliant on micro services. This change makes for sites which are more flexible and interactive.

The following technical changes mean that jQuery will is interoperable with a wider range of code bases, is more secure and works better

Trusted Types and CSP

JavasScript was and is a loosely-typed language – that is, it cannot natively tell the difference between a true integer zero 0 and a string containing a zero "0". Back then people thought that was a good idea. It isn’t: for so many reasons.

If you want to concatenate strings in JavaScript the code required is:

"1" + "001" = "1001"Code language: JavaScript (javascript)

If you want to sum numbers, the code required is:

1 + 001 = 2

Datatypes really matter. If you don’t know what you’re feeding into a function you cannot be sure of the outcome.

jQuery 4 introduces support for Trusted Types, ensuring secure handling of HTML within jQuery manipulation methods and aligning with Content Security Policy (CSP) directives. Websites built over jQuery 4 should be secure websites.

FormData Support

jQuery 4 now supports binary data, including FormData, in its AJAX requests. This introduces a breaking change but ensures automatic handling of binary data, aligning better with modern expectations. Background data requests may break – you need a developer to review them and be sure they still work.

No More JSONP Promotion

JSONP is a convention used to invoke cross-domain scripts by generating script tags in the current document. It’s now seen as a bit of a hack and by definition not as secure as server side permissions systems,

jQuery 4, eliminates the automatic promotion of JSONP requests. The library now strictly adheres to Cross-Origin Resource Sharing (CORS) practices for cross-domain interactions. This change prevents unexpected behaviours and aligns jQuery with modern web security standards.

It’s going to break a lot of websites but it’ll make the world a lot more secure.

New Module Architecture

The developers have updated the library to use ES Modules instead of the older AMD (Asynchronous Module Definition) system. ES Modules are the modern standard for organising JavaScript code. Most modern browsers natively support ES Modules, as do build tools like Rollup, Webpack, and Vite.

This change makes it easier to use jQuery in modern JavaScript projects. You can now directly import only the parts of jQuery you need, rather than relying on tools like RequireJS to manage dependencies. For example:

import $ from 'jquery';

This shift aligns jQuery with contemporary JavaScript practices, making it more compatible with modern module-based workflows and allowing for better optimisation in projects, such as tree-shaking to exclude unused code. If you’re using modern tooling, this change simplifies how jQuery integrates into your project while improving its efficiency and flexibility.

So What?

jQuery 4 matters. 75% of the websites is a lot. A lot of sites will break. A lot will need some love. A lot will stop working completely and lose substantial business.

Don’t own one of those websites.

Does it Matter to Me?

If you have a website, its very likely that it will. A lot of sites use jQuery and it’s very likely yours is one of them. Little Fire Digital are experts with jQuery, we can help make sure that you’re ready for the change. Contact us.