jQuery Core Upgrade Guides

https://jquery.com/upgrade-guide/
Admin
The jQuery upgrade guides provide information on all breaking changes and some notable changes in...
Tokens:3,003
Snippets:51
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Use Factory Entry Point for Node.js

Source: https://jquery.com/upgrade-guide/4.0

When using Node.js without a DOM window, import jQuery using the `jquery/factory-slim` entry point. Alternatively, attach the JSDOM `window` to `globalThis` before importing jQuery.

```javascript
import "jquery/factory-slim";
```

--------------------------------

### Include jQuery and jQuery Migrate

Source: https://jquery.com/upgrade-guide

Add jQuery and the jQuery Migrate plugin to your HTML after loading jQuery. The Migrate plugin should be included after the main jQuery library.

```html
<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>
```

--------------------------------

### Node.js Import Change: jQuery 3.x vs 4.0

Source: https://jquery.com/upgrade-guide/4.0

In Node.js environments without a DOM window, jQuery 4.0 requires using the dedicated factory entry point. This differs from the jQuery 3.x approach.

```javascript
// jQuery 3.x
const jQuery = require( "jquery" )( window );
```

```javascript
// jQuery 4.0
const jQuery = require( "jquery/factory" )( window );
```

--------------------------------

### jQuery Selection Context Logic

Source: https://jquery.com/upgrade-guide/4.0

Illustrates how jQuery 4.0 handles selection context with the native selector engine, backporting logic from Sizzle. This change affects code relying on previous behavior, such as finding elements within a specific context.

```html
<div id="parent">    <span></span></div>
```

```javascript
const $div = $( "#parent" );
$div.find( "> *" );
```

```javascript
const $div = $( "#parent" );
$div.find( "div span" );
```

--------------------------------

### Update Object.prototype Pollution Check for Data Keys

Source: https://jquery.com/upgrade-guide/4.0

To avoid `Object.prototype` pollution issues, switch from using `hasOwnProperty` to `in` or `Object.hasOwn` when checking for data keys on elements. This ensures that data keys matching `Object.prototype` properties are handled correctly.

```javascript
if ( elem.data().hasOwnProperty( "key" ) ) { /* ... */ }
```

```javascript
if ( "key" in elem.data() ) { /* ... */ }
```

```javascript
if ( Object.hasOwn( elem.data(), "key" ) ) { /* ... */ }
```

--------------------------------

### Handle Detached Element Opacity in CSS

Source: https://jquery.com/upgrade-guide/4.0

In jQuery 4.0, `.css("opacity")` returns an empty string for detached elements in standard-compliant browsers and '1' in IE. This differs from previous behavior where it always returned '1'.

```javascript
$("#element")[0].style.opacity;
```

--------------------------------

### Update CSS Unitless Value Handling

Source: https://jquery.com/upgrade-guide/4.0

jQuery 4.0 no longer automatically adds 'px' to most unitless CSS values. Explicitly specify units for CSS properties that require them. Consult the documentation for the current list of properties to which jQuery automatically adds 'px' if the old behavior is needed.

```javascript
$(".element").css({
  "width": "100px",
  "height": "50vh"
});
```
Tokens:
Raw