Second Beta of jQuery 4.0.

0
Posted on July 17, 2024 by Timmy Willison
Last February, we released the first beta of jQuery 4.0.0. We’re now ready to release a
second, and we expect a release candidate to come soon™. This release comes with a major
rewrite to jQuery’s testing infrastructure, which removed all deprecated or under-supported
dependencies. But the main change that warranted a second beta was a fix to the exports field
for bundlers. More on that and other changes below.

Many of the breaking changes in jQuery 4.0.0 are ones the team has wanted to make for
years, but couldn’t in a patch or minor release. We’ve trimmed legacy code (including
removing support for IE before version 11), removed some previously-deprecated APIs,
removed some internal-only parameters to public functions that were never documented, and
dropped support for some “magic” behaviors that were overly complicated.

We will publish a comprehensive upgrade guide before final release, to outline the removed
code and how to migrate. The jQuery Migrate plugin will also be ready to assist. For now,
please try out this release and let us know if you encounter any issues.

As usual, the release is available on our CDN and the npm package manager. Third party
CDNs will not be hosting this beta release, but will host the 4.0.0 final release later. Here are
some highlights for jQuery 4.0.0 beta.2.

CommonJS + ESM: Strange Bedfellows

There are many different ways to include jQuery in a project. Supporting all of them can be
difficult, especially when the environment supports both CommonJS and ESM modules. We
wanted to support all of the ways jQuery might be included, whether using a named export or
the default export. Also, we wanted to ensure jQuery was only ever included once, even when
jQuery was both imported using ESM and required using CommonJS in the same
environment or bundle. We think we’ve worked out a solution that supports Node.js and
bundlers like rollup, webpack, and parcel. More details can be found in the PR. Also, we
created a wiki page to explain how the exports property in jQuery’s package.json will
work in 4.0.

Boolean Attributes: To Be Or …
The HTML spec defines boolean attributes that often correlate with boolean properties. If the
attribute is missing, it correlates with the false property value, if it’s present – the true
property value. The only valid values for boolean content attributes are empty string or the
full attribute name (e.g. checked="checked").

jQuery has historically tried to be helpful here and treated boolean attributes in a special way
in the .attr() API:

1. For the getter, as long as the attribute was present, it was returning the
attribute name lowercased, ignoring the value.
2. For the setter, it was removing the attribute when false was passed;
otherwise, it was ignoring the passed value and set the attribute –
interestingly, in jQuery >=3 not lowercased anymore.
The problem is the spec occasionally converts boolean attributes into ones with additional
attribute values with special behavior – one such example is the new "until-found" value
for the hidden attribute. Our setter normalization meant passing those values was impossible
with .attr() (.prop() was unaffected). Also, new boolean attributes were introduced
occasionally and jQuery could not easily add them to the list without incurring breaking
changes.

This patch removes any special handling of boolean attributes – the getter returns the value
as-is and the setter sets the provided value, with one exception. To maintain backwards
compatibility, this patch makes the false boolean value trigger attribute removal for ALL
non-ARIA attributes. For example, .attr( "checked", false ) will continue to remove
the checked attribute, which is the only way the corresponding property will be set to false.
ARIA attributes are exempt from the rule since many of them recognize the
string "false" as a valid value with semantics different than the attribute missing. To
remove an ARIA attribute, use .removeAttr() or pass null as the value to .attr().

Position of Elements In Tables

jQuery 4.0.0-beta.2 also fixes some inconsistent behavior when finding the position of
elements within tables. The offset parent on which the position was based could change
depending on whether the element’s position style was static or relative.

<div id="container" style="position: relative;">

<table>

<tr>

<td>

<span id="static"></span>

<span id="relative" style="position: relative;"></span>

</td>

</tr>

</table>

</div>

Previously, $('#static').position() was returning the position relative to the

containing <td> element, while $('#relative').position() was returning the position
relative to #container.

Now, both elements return their position relative to #container.

Download
You can get the files from the jQuery CDN, or link to them directly:

https://code.jquery.com/jquery-4.0.0-beta.2.js
https://code.jquery.com/jquery-4.0.0-beta.2.min.js

You can also get this release from npm:

npm install jquery@4.0.0-beta.2

Slim build
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that
focus on ajax requests. And often it is simpler to use a combination of CSS and class
manipulation for web animations. Finally, all of jQuery’s supported browsers (except for
IE11) now have support for native Promises across the board, so Deferreds and Callbacks are
no longer needed in most cases. Along with the regular version of jQuery that includes
everything, we’ve released a “slim” version that excludes these modules. The size of jQuery
is very rarely a load performance concern these days, but the slim build is about 8k gzipped
bytes smaller than the regular version. These files are also available in the npm package and
on the CDN:

https://code.jquery.com/jquery-4.0.0-beta.2.slim.js

https://code.jquery.com/jquery-4.0.0-beta.2.slim.min.js

These updates are already available as the current versions on npm. Information on all the
ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their
copies today, please give them a few days to post the files. If you’re anxious to get a quick
start, use the files on our CDN until they have a chance to update.

Thanks
Thank you to all of you who participated in this release by submitting patches, reporting
bugs, or testing, including Michał Gołębiowski-Owczarek, J.Son, Liam James and the whole
jQuery team.

We’re on Mastodon!
jQuery has a Mastodon account! We now post releases and other updates to both X and
Mastodon. Also, you may be interested in following some of our team members that have
Mastodon accounts.

jQuery: https://social.lfx.dev/@jquery

mgol: https://hachyderm.io/@mgol

timmywil: https://hachyderm.io/@timmywil

Changelog
Full changelog: 4.0.0-beta.2

Attributes
 Make .attr( name, false ) remove for all non-ARIA attrs (#5388, 063831b6)
Build
 Bump the github-actions group with 2 updates (3a98ef91)
 upgrade dependencies; fix bundler tests on windows (cb8ab6cc)
 improve specificity of eslint config; add ecma versions (74970524)
 Bump the github-actions group with 2 updates (46b9e480)
 Group dependabot PRs updating GitHub Actions (3cac1465)
 Bump actions/cache, actions/checkout & github/codeql-action (df1df950)
 Bump express from 4.18.3 to 4.19.2 (691c0aee)
 make compare size cache readable for manual edits (783c9d69)
 fix size comparison for slim files when the branch is dirty (8a3a74c4)
 migrate more uses of fs.promises; use node: protocol (ae7f6139)
 Bump github/codeql-action from 3.24.0 to 3.24.6 (ae67ace6)
 Bump actions/cache from 4.0.0 to 4.0.1 (68f772e0)
 drop support for Node 10 (5aa7ed88)
 add GitHub Actions workflow to update Filestash (0293d3e3)
 update jenkins script to only build (c21c6f4d)
 Bump actions/cache & github/codeql-action (#5402) (bf11739f)

CSS
 Tests: Fix tests & support tests under CSS Zoom (#5489, 071f6dba)

Core
 Fix the exports setup to make bundlers work with ESM & CommonJS
(#5416, 60f11b58)

Docs
 Update remaining HTTP URLs to HTTPS (7cdd8374)

Event
 Increase robustness of an inner native event in leverageNative (#5459, 527fb3dc)

Offset
 Increase search depth when finding the 'real' offset parent (556eaf4a)

Release
 ensure builds have the proper version (3e612aee)
 set preReleaseBase in config file (1fa8df5d)
  fix running pre/post release scripts in windows (5518b2da)
 update AUTHORS.txt (862e7a18)
 migrate release process to release-it (jquery/jquery-release#114, 2646a8b0)
 add factory files to release distribution (#5411, 1a324b07)

Tests
 remove unnecessary scroll feature test (ea31e4d5)
 Align :has selector tests with 3.x-stable (f2d9fde5)
 revert concurrency group change (fa73e2f1)
 include github ref in concurrency group (5880e027)
 Make the beforeunload event tests work regardless of extensions (399a78ee)
 share queue/browser handling for all worker types (284b082e)
 improve diffing for values of different types (b9d333ac)
 show any and all actual/expected values (f80e78ef)
 add diffing to test reporter (44fb7fa2)
 add actual and expected messages to test reporter (1e84908b)
 fix worker restarts for failed browser acknowledgements (fedffe74)
 add –hard-retries option to test runner (822362e6)
 fix cleanup in cases where server doesn't stop (0754d596)
 fix flakey message logs; ignore delete worker failures (02d23478)
 reuse browser workers in BrowserStack tests (#5428) (95a4c94b)
 Use allowlist instead of whitelist (2b97b6bb)
 migrate testing infrastructure to minimal dependencies (dfc693ea)
 Fix Karma tests on Node.js 20 (d478a1c0)

jQuery

Upgrading jQuery: Working Towards a Healthy Web

Posted on April 17, 2024 by Timmy Willison
jQuery’s influence on the web will always be evident. When it was first introduced in 2006,
jQuery became a fundamental tool for web developers almost immediately. It simplified
JavaScript programming, making it easier to manipulate HTML documents, handle events,
perform animations, and much more. Since then, it has played and continues to play a major
role in the evolution of web standards and browser capabilities.

With the rise of modern JavaScript frameworks, fewer developers may be choosing to use
jQuery for new projects, but worldwide usage is still extremely high. After analyzing the
results of a survey conducted by IDC, the OpenJS Foundation estimated that 90% of all
websites use jQuery. And about a third of those use an outdated version.

The jQuery Team and OpenJS Foundation are working to fix that as part of the Healthy Web
checkup campaign. This guide will explain why it is important to keep your jQuery version
up to date and walk you through the process of upgrading jQuery.

Why Is Upgrading jQuery Important for Security?

Security Vulnerabilities: Like any software, jQuery may contain security vulnerabilities in
its codebase. These vulnerabilities can range from Cross-Site Scripting (XSS) vulnerabilities
to more severe issues like Remote Code Execution (RCE). As vulnerabilities are discovered,
the jQuery team releases patches and updates to address them. By upgrading to the latest
version of jQuery, you ensure that your application benefits from these security fixes,
reducing the risk of exploitation by attackers.

Security Best Practices: Newer versions of jQuery often incorporate security best practices
and enhancements to mitigate common security threats. These improvements may include
stricter input validation, improved handling of user-generated content, and better protection
against XSS attacks. By upgrading, you adopt these best practices and strengthen the security
posture of your application.

Compliance Requirements: Many industries and regulatory frameworks require

organizations to maintain up-to-date software and address known security vulnerabilities
promptly. Failure to upgrade jQuery and address security issues could lead to non-
compliance with these requirements.

What About Browser Support?

jQuery 1.x, 2.x, and 3.x each have a different list of supported browsers. However, given
current browser market usage, the browsers that jQuery 3.x supports, which includes IE 9+,
should be sufficient in almost all cases. jQuery 4.x will still support IE11, even
though Microsoft announced it is officially out of support.

How Do I Upgrade jQuery?

The jQuery Team provides the jQuery Migrate plugin to make upgrading jQuery as easy as
possible. It is mainly meant as a development tool that generates warning messages in the
browser console that can be used to identify and fix compatibility issues. It temporarily
restores deprecated features and behaviors so that older code will still run on newer versions
of jQuery while the compatibility issues are addressed.

There are two versions of jQuery Migrate: 1.x and 3.x (there is no Migrate 2.x). Only one
version should be used at a time, but you may need to use both in succession if upgrading
from a jQuery version that predates jQuery 1.9.

For example, if your current jQuery version is 1.4.4, first use jQuery Migrate 1.x to upgrade
to jQuery 1.12.4 and then use jQuery Migrate 3.x to upgrade to the latest jQuery (3.7.1, as of
this writing). If your current version is 2.2.4, you only need to use jQuery Migrate 3.x to
upgrade to the latest jQuery.

Using jQuery Migrate

First, add jQuery Migrate to your page *after* loading jQuery.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

<script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script>

Then, test your website or application. As different jQuery APIs are used, jQuery Migrate
will log messages to the console warning about any deprecations or breaking changes.
Address each warning one at a time.
Finally, when no more warnings are logged to the console and all breaking changes have
been addressed, the jQuery Migrate can be removed and migration is complete!

See the jQuery Migrate README for more details.

jQuery Upgrade Guides

The jQuery Upgrade Guides can be helpful when you’re looking for more details on a
breaking change, or you just want to see the full list of breaking changes for each version.
There are upgrade guides for jQuery 1.9, 3.0 and 3.5 that list all of the breaking changes that
happened in those releases. Most of the breaking changes listed will probably not apply to
your code, but these guides add some context and explanation for each change.

A Note on Future jQuery Versions

With jQuery 4.0 on the horizon, you may wonder what the process will be for upgrading to
jQuery 4.x. The answer is that it will be the same as upgrading to jQuery 3.x and it can still
be done in one step. In other words, there will be no need to upgrade to jQuery 3.x before
upgrading to jQuery 4.x. You will be able to upgrade straight from 1.9+ to jQuery 4.x. We
will also have an upgrade guide ready for jQuery 4.0.

Conclusion
Upgrading jQuery is essential for maintaining the security, performance, and compatibility of
your web applications. By following the steps outlined in this guide, you can safely upgrade
to the latest version of jQuery and take advantage of its new features and improvements while
ensuring that your web application remains protected against any discovered vulnerabilities.
Remember to regularly check for updates and stay informed about new releases to keep your
codebase up to date.
jQuery

jQuery 4.0.0 BETA!

Posted on February 6, 2024 by Timmy Willison
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release!
There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes,
performance improvements, and some breaking changes. We removed support for IE<11
after all! Still, we expect disruption to be minimal.

Many of the breaking changes are ones the team has wanted to make for years, but couldn’t
in a patch or minor release. We’ve trimmed legacy code, removed some previously-
deprecated APIs, removed some internal-only parameters to public functions that were never
documented, and dropped support for some “magic” behaviors that were overly complicated.

We will publish a comprehensive upgrade guide before final release, to outline the removed
code and how to migrate. The jQuery Migrate plugin will also be ready to assist. For now,
please try out the beta release and let us know if you encounter any issues.

As usual, the release is available on our CDN and the npm package manager. Third party
CDNs will not be hosting this beta release, but will host the 4.0.0 final release later. Here are
some highlights for jQuery 4.0.0 beta.
Goodbye IE<11
jQuery 4.0 drops support for IE 10 and older. Some may be asking why we didn’t remove
support for IE 11. We plan to remove support in stages, and the next step will be released in
jQuery 5.0. For now, we’ll start by removing code specifically supporting IE versions older
than 11, giving us a size reduction of 867 gzipped bytes in one PR!

We also dropped support for other very old browsers, including Edge Legacy, iOS <11,
Firefox <65, and Android Browser. No changes should be required on your end. If you need
to support any of these browsers, simply stick with jQuery 3.x.

Deprecated APIs removed

These functions have been deprecated for several versions. It’s time to remove them now that
we’ve reached a major release. These functions were either always meant to be internal or
ones that now have native equivalents in all supported browsers. 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

,
push sort , and splice removed
The jQuery prototype has long had Array methods that did not behave like any other jQuery
methods and were always meant for internal-use only. These methods are push, sort,
and splice. We switched our uses of these methods to Array functions instead of the jQuery
prototype. For example, $elems.push( elem ) became [].push.call( $elems, elem ).
We’re mentioning it here in case there are any plugins out there that may have relied on these
methods.

focusin and focosout event order

For a long time, browsers did not agree on the order of focus and blur events, which
includes focusin, focusout, focus, and blur. Finally, the latest versions of all browsers
that jQuery 4.0 supports have converged on a common event order. Unfortunately, it differs
from the consistent order that jQuery had chosen years ago, which makes this a breaking
change. At least everyone is the on the same page now!

jQuery’s order for all four events in previous versions was:

1. focusout

2. blur

3. focusin

4. focus

Starting with jQuery 4.0, we no longer override native behavior. This means that all browsers
except IE will follow the current W3C specification, which is:

1. blur

2. focusout

3. focus

4. focusin

For those that are curious, the W3C specification previously defined a different order:

1. focusout

2. focusin

3. blur

4. focus

But, few thought that intuitive and the spec was changed in 2023 to match what browsers
have already implemented. Ironically, the only browser to ever follow the old spec was
Internet Explorer.

FormData support
jQuery.ajax has added support for binary data, including FormData. Previously, binary data
was not a known data type and was converted to a string. That behavior could be disabled by
disabling data conversion and handling the data manually, but we decided to make this work
automatically. This is technically a breaking change, but should be closer to expected
behavior.

Automatic JSONP promotion removed

Previously, jQuery.ajax with dataType: "json" with a provided callback would be
converted to a JSONP request. Today, the preferred way to interact with a cross-domain
backend is with CORS, which works in all browsers that jQuery 4.0 supports. This should
help avoid unexpected behavior in case a developer is unaware that code can be executed
from a remote domain with JSONP.

jQuery source migrated to ES modules

It was a special day when the jQuery source on the main branch was migrated
from AMD to ES modules. The jQuery source has always been published with jQuery
releases on npm and GitHub, but could not be imported directly as modules
without RequireJS, which was jQuery’s build tool of choice. We have since switched
to Rollup for packaging jQuery and we do run all tests on the ES modules separately.

Trusted Types and CSP

jQuery 4.0 adds support for Trusted Types, ensuring that HTML wrapped
in TrustedHTML can be used as input to jQuery manipulation methods in a way that doesn’t
violate the require-trusted-types-for Content Security Policy directive.

Along with this, while some AJAX requests were already using <script> tags to maintain
attributes such as crossdomain, we have since switched most asynchronous script requests to
use <script> tags to avoid any CSP errors caused by using inline scripts. There are still a few
cases where XHR is used for asynchronous script requests, such as when the
"headers" option is passed (use scriptAttrs instead!), but we now use a <script> tag
whenever possible.

Updated slim build

The slim build has gotten even smaller in jQuery 4.0.0 with the removal of Deferreds and
Callbacks (now below 20k bytes gzipped!). Deferreds have long-supported the Promises A+
standard, so native Promises can be used instead in most cases and they are available in all of
jQuery’s supported browsers except IE11. Deferreds do have some extra features that native
Promises do not support, but most usage can be migrated to Promise methods. If you need to
support IE11, it’s best to use the main build or add a polyfill for native Promises.

Download
You can get the files from the jQuery CDN, or link to them directly:

https://code.jquery.com/jquery-4.0.0-beta.js

https://code.jquery.com/jquery-4.0.0-beta.min.js

You can also get this release from npm:

npm install jquery@4.0.0-beta

Slim build
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that
focus on ajax requests. And often it is simpler to use a combination of CSS and class
manipulation for web animations. Finally, all of jQuery’s supported browsers (except for
IE11) now have support for native Promises across the board, so Deferreds and Callbacks are
no longer needed in most cases. Along with the regular version of jQuery that includes
everything, we’ve released a “slim” version that excludes these modules. The size of jQuery
is very rarely a load performance concern these days, but the slim build is about 8k gzipped
bytes smaller than the regular version. These files are also available in the npm package and
on the CDN:

https://code.jquery.com/jquery-4.0.0-beta.slim.js

https://code.jquery.com/jquery-4.0.0-beta.slim.min.js
These updates are already available as the current versions on npm and Bower. Information
on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs
receive their copies today, please give them a few days to post the files. If you’re anxious to
get a quick start, use the files on our CDN until they have a chance to update.