Migrating away from jQuery

With the progress in JavaScript and browser capability, there is little to no need for the use of jQuery; by removing its use it can improve page performance, which saves loading in a large library while allowing hardware-accelerated techniques such as css transitions for animations to be used instead.

Common substitutions

Single element selection

$( selector );

document.querySelector( selector );
// Or
target.querySelector( selector );

Note: This method returns a single Node.

Multiple element selection

$( selector );

document.querySelectorAll( selector );
// Or
target.querySelectorAll( selector );

Note: This method returns a NodeList, to use any Array methods (forEach, filter etc) on the list it must be converted to an Array object.

[].slice.call( document.querySelectorAll( selector ) );

Add/Remove/Has class

$( target ).addClass( 'className' );
$( target ).removeClass( 'className' );
$( target ).hasClass( 'className' );

target.classList.add( 'className' );
target.classList.remove( 'className' );
target.classList.contains( 'className' );

Note: The native methods can only be used to add or remove a single class name in order to maintain support for IE11.

Get/Add/Remove attribute

$( target ).attr( 'attribute' );
$( target ).attr( 'attribute', 'value' );
$( target ).removeAttr( 'attribute' );

target.getAttribute( 'attribute' );
target.setAttribute( 'attribute', 'value' );
target.removeAttribute( 'attribute' );

Insert element Before/Prepend/Append/After

$( target ).before( element );
$( target ).prepend( element );
$( target ).append( element );
$( target ).after( element );

target.insertAdjacentElement( 'beforebegin', element );
target.prepend( element );
target.append( element );
target.insertAdjacentElement( 'afterend', element );

Remove element

$( target ).remove();

target.remove();

Get and set HTML

$( target ).html();
$( target ).html( string );

target.innerHTML;
target.innerHTML = string;

Events

$( target ).on( eventName, eventHandler );
$( target ).off( eventName, eventHandler );

target.addEventListener( eventName, eventHandler );
target.removeEventListener( eventName, eventHandler );

Note: With native JavaScript you need to handle individual nodes so much loop through any NodeLists to apply settings, events etc.

Further useful reference for common substitutes is available at: youmightnotneedjquery.com.

Polyfills

We have complied a few polyfills for some commonly used JavaScript functionality that is well supported within the majority of browsers. It is best not to rely on too many polyfills if the alternative to them is not much longer in terms of code or the function would only be used occasionally. The polyfills that we have included within the framework are:

• Number.isNaN
• Number.isFinite
• NodeList.prototype.forEach
• Element.prototype.matches
• Element.prototype.closest
• firstElementChild
• classList
• Array.prototype.includes
• remove
• scrollBehavior
• Array.from
• prepend
• append
• CSS.escape - From v5.3.0

Utility functions

There are a selection of utility functions that are available for use through Framework. These have been produced to help replace common functions that jQuery provided eg. show/hide, fadeIn/fadeOut, slideIn/slideOut etc.

See our utility documentation for further details.