You Might Not Need jQuery

Your search didn't match any comparisons.

AJAX

Alternatives:

fetch

JSON

jquery

$.getJSON('/my/url', function (data) {});

ie8+

var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function () { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.responseText); } else { // Error :( } } }; request.send(); request = null;

ie9+

var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function () { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // We reached our target server, but it returned an error } }; request.onerror = function () { // There was a connection error of some sort }; request.send();

ie10+

var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function () { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.response); } else { // We reached our target server, but it returned an error } }; request.onerror = function () { // There was a connection error of some sort }; request.send();

modern

const response = await fetch('/my/url'); const data = await response.json();

Load

jquery

$('#some.selector').load('/path/to/template.html');

ie8+

function load(selector, path) { var request = new XMLHttpRequest(); request.open('GET', path, true); request.onreadystatechange = function () { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var elements = document.querySelector(selector); for (var i = 0; i < elements.length; i++) { elements[i].innerHTML = this.responseText; } } else { // Error :( } } }; } load('#some.selector', '/path/to/template.html');

modern

const response = await fetch('/path/to/template.html'); const body = await response.text(); document.querySelector('#some.selector').innerHTML = body;

Post

jquery

$.ajax({ type: 'POST', url: '/my/url', data: data });

modern

await fetch('/my/url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });

Request

jquery

$.ajax({ type: 'GET', url: '/my/url', success: function (resp) {}, error: function () {} });

ie8+

function request(success, error) { var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function () { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! If you expect this to be JSON, use JSON.parse! success(this.responseText, this.status); } else { error(); } } }; request.send(); }

ie9+

function request(success, error) { var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function () { if (this.status >= 200 && this.status < 400) { // Success! If you expect this to be JSON, use JSON.parse! success(this.responseText, this.status); } else { // We reached our target server, but it returned an error error(); } }; request.onerror = function () { error(); }; request.send(); }

modern

const response = await fetch('/my/url'); if (!response.ok) { } const body = await response.text();

Effects

Alternatives:

Fade In

jquery

$(el).fadeIn();

modern

el.classList.replace('hide', 'show');

.show { transition: opacity 400ms; } .hide { opacity: 0; }

Fade Out

jquery

$(el).fadeOut();

modern

el.classList.replace('show', 'hide');

.show { opacity: 1; } .hide { opacity: 0; transition: opacity 400ms; }

Hide

jquery

$(el).hide();

ie8+

el.style.display = 'none';

Show

jquery

$(el).show();

ie8+

el.style.display = '';

Toggle

jquery

$(el).toggle();

ie8+

function toggle(el) { if (el.style.display == 'none') { el.style.display = ''; } else { el.style.display = 'none'; } }

Elements

Alternatives:

Add Class

jquery

$(el).addClass(className);

ie10+

el.classList.add(className);

After

jquery

$(target).after(element);

modern

target.after(element);

Append

jquery

$(parent).append(el);

modern

parent.append(el);

Append To

jquery

$(el).appendTo(parent);

modern

parent.append(el);

Before

jquery

$(target).before(element);

modern

target.before(el);

Children

jquery

$(el).children();

ie9+

el.children;

Clone

jquery

$(el).clone();

ie8+

el.cloneNode(true);

Closest

jquery

$(el).closest(sel);

ie8+

function closest(el, sel) { Element.prototype.matches || (Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (b) { b = (this.document || this.ownerDocument).querySelectorAll(b); for (var a = b.length; 0 <= --a && b.item(a) !== this; ); return -1 < a; }); Element.prototype.closest || (Element.prototype.closest = function (b) { var a = this; do { if (a.matches(b)) return a; a = a.parentElement || a.parentNode; } while (null !== a && 1 === a.nodeType); return null; }); return el.closest(sel); } closest(el, sel);

ie9+

function closest(el, sel) { Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector); Element.prototype.closest || (Element.prototype.closest = function (c) { var a = this; do { if (a.matches(c)) return a; a = a.parentElement || a.parentNode; } while (null !== a && 1 === a.nodeType); return null; }); return el.closest(sel); } closest(el, sel);

ie10+

el.closest(sel);

Contains

jquery

$.contains(el, child);

modern

node.contains(anotherNode);

Contains Selector

Alternatives:

xpath

jquery

$("div:contains('my text')");

modern

[...document.querySelectorAll('div')].filter((el) => el.textContent.includes('my text') );

jquery

$(el).contents();

modern

el.childNodes;

Create Elements

jquery

$('<div>Hello World!</div>');

modern

function generateElements(html) { const template = document.createElement('template'); template.innerHTML = html.trim(); return template.content.children; } generateElements('<div>Hello World!</div>');

Each

jquery

$(selector).each(function (i, el) {});

ie8+

function forEachElement(selector, fn) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) fn(elements[i], i); } forEachElement(selector, function (el, i) {});

modern

document.querySelectorAll(selector).forEach((el, i) => {});

Empty

jquery

$(el).empty();

modern

el.replaceChildren();

Filter

jquery

$(selector).filter(filterFn);

ie8+

function filter(selector, filterFn) { var elements = document.querySelectorAll(selector); var out = []; for (var i = elements.length; i--; ) { if (filterFn(elements[i])) out.unshift(elements[i]); } return out; } filter(selector, filterFn);

modern

[...document.querySelectorAll(selector)].filter(filterFn);

Find Children

jquery

$(el).find(selector);

modern

// For direct descendants only, see https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#user_notes el.querySelectorAll(`:scope ${selector}`);

Find Elements

Alternatives:

jquery

$('.my #awesome selector');

ie8+

document.querySelectorAll('.my #awesome selector');

Find Selector

jquery

$(el).find(selector).length;

ie8+

!!el.querySelector(selector);

First

jquery

$(el).first();

ie8+

document.querySelector(el);

Get Attributes

jquery

$(el).attr('tabindex');

ie8+

el.getAttribute('tabindex');

Get Height

jquery

$(el).height();

ie8+

function getHeight(el) { var d = /^\d+(px)?$/i; if (window.getComputedStyle) el = parseFloat(getComputedStyle(el, null).height.replace('px', '')); else { var c = el.currentStyle.height; if (d.test(c)) el = parseInt(c); else { d = el.style.left; var e = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = c || 0; c = el.style.pixelLeft; el.style.left = d; el.runtimeStyle.left = e; el = c; } } return el; } getHeight(el);

modern

el.getBoundingClientRect().height;

Get HTML

jquery

$(el).html();

ie8+

el.innerHTML;

Get Outer HTML

jquery

$(el).prop('outerHTML');

ie8+

el.outerHTML;

Get Style

jquery

$(el).css(ruleName);

ie9+

getComputedStyle(el)[ruleName];

Get Text

jquery

$(el).text();

ie9+

el.textContent;

Get Width

jquery

$(el).width();

ie8+

function getWidth(el) { var d = /^\d+(px)?$/i; if (window.getComputedStyle) el = parseFloat(getComputedStyle(el, null).width.replace('px', '')); else { var c = el.currentStyle.width; if (d.test(c)) el = parseInt(c); else { d = el.style.left; var e = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = c || 0; c = el.style.pixelLeft; el.style.left = d; el.runtimeStyle.left = e; el = c; } } return el; } getWidth(el);

modern

el.getBoundingClientRect().width;

Has Class

jquery

$(el).hasClass(className);

ie10+

el.classList.contains(className);

Index

jquery

$(el).index();

modern

[...el.parentNode.children].indexOf(el);

Inner Height

jquery

$(el).innerHeight(); $(el).innerHeight(150);

modern

function innerHeight(el, value) { if (value === undefined) { return el.clientHeight; } else { el.style.height = value; } } innerHeight(el); innerHeight(el, 150);

Inner Width

jquery

$(el).innerWidth(); $(el).innerWidth(150);

modern

function innerWidth(el, value) { if (value === undefined) { return el.clientWidth; } else { el.style.width = value; } } innerWidth(el); innerWidth(el, 150);

Is Hidden

jquery

$(el).is(':hidden');

modern

function isHidden(el) { return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length); }

Is Visible

jquery

$(el).is(':visible');

modern

function isVisible(el) { return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length); }

Last

jquery

$(el).last();

modern

[...document.querySelectorAll(el)].at(-1);

Matches

jquery

$(el).is($(otherEl));

ie8+

el === otherEl;

Matches Selector

jquery

$(el).is('.my-class');

ie8+

var matches = function (el, selector) { var _matches = el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector; if (_matches) { return _matches.call(el, selector); } else { if (el.parentNode === null) return false; var nodes = el.parentNode.querySelectorAll(selector); for (var i = nodes.length; i--; ) { if (nodes[i] === el) return true; } return false; } }; matches(el, '.my-class');

ie9+

var matches = function (el, selector) { return ( el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector ).call(el, selector); }; matches(el, '.my-class');

modern

el.matches('.my-class');

jquery

$(el).next();

ie8+

// nextSibling can include text nodes function nextElementSibling(el) { do { el = el.nextSibling; } while (el && el.nodeType !== 1); return el; } el.nextElementSibling || nextElementSibling(el);

modern

function next(el, selector) { const nextEl = el.nextElementSibling; if (!selector || (nextEl && nextEl.matches(selector))) { return nextEl; } return null; } next(el); // Or, with an optional selector next(el, '.my-selector');

Offset

jquery

$(el).offset();

ie8+

function offset(el) { var docElem = document.documentElement; var rect = el.getBoundingClientRect(); return { top: rect.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0), left: rect.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0) }; }

ie9+

function offset(el) { box = el.getBoundingClientRect(); docElem = document.documentElement; return { top: box.top + window.pageYOffset - docElem.clientTop, left: box.left + window.pageXOffset - docElem.clientLeft }; }

Offset Parent

jquery

$(el).offsetParent();

ie8+

el.offsetParent || el;

Outer Height

jquery

$(el).outerHeight();

ie8+

el.offsetHeight;

Outer Height With Margin

jquery

$(el).outerHeight(true);

ie8+

function outerHeight(el) { var height = el.offsetHeight; var style = el.currentStyle || getComputedStyle(el); height += parseFloat(style.marginTop) + parseFloat(style.marginBottom); return height; } outerHeight(el);

ie9+

function outerHeight(el) { var height = el.offsetHeight; var style = getComputedStyle(el); height += parseFloat(style.marginTop) + parseFloat(style.marginBottom); return height; } outerHeight(el);

modern

function outerHeight(el) { const style = getComputedStyle(el); return ( el.getBoundingClientRect().height + parseFloat(style.marginTop) + parseFloat(style.marginBottom) ); } outerHeight(el);

Outer Width

jquery

$(el).outerWidth();

ie8+

el.offsetWidth;

Outer Width With Margin

jquery

$(el).outerWidth(true);

ie8+

function outerWidth(el) { var width = el.offsetWidth; var style = el.currentStyle || getComputedStyle(el); width += parseFloat(style.marginLeft) + parseFloat(style.marginRight); return width; } outerWidth(el);

modern

function outerWidth(el) { const style = getComputedStyle(el); return ( el.getBoundingClientRect().width + parseFloat(style.marginLeft) + parseFloat(style.marginRight) ); } outerWidth(el);

Parent

jquery

$(el).parent();

ie8+

el.parentNode;

Parents

jquery

$(el).parents(selector);

ie9+

function parents(el, selector) { var parents = []; while ((el = el.parentNode) && el !== document) { // See "Matches Selector" above if (!selector || matches(el, selector)) parents.push(el); } return parents; }

modern

function parents(el, selector) { const parents = []; while ((el = el.parentNode) && el !== document) { if (!selector || el.matches(selector)) parents.push(el); } return parents; }

Position

jquery

$(el).position();

ie8+

function position(el) { var box = el.getBoundingClientRect(); var docElem = document.documentElement; var marginLeft = 0; var marginTop = 0; if (typeof getComputedStyle === 'function') { var style = window.getComputedStyle(el); marginLeft = parseInt(style.marginLeft, 10); marginTop = parseInt(style.marginTop, 10); } else if (el.currentStyle) { marginLeft = el.currentStyle['marginLeft'] ? parseInt(el.currentStyle['marginLeft'], 10) : 0; marginTop = el.currentStyle['marginTop'] ? parseInt(el.currentStyle['marginTop'], 10) : 0; } return { top: box.top + (window.pageYOffset || docElem.scrollTop) - marginTop, left: box.left + (window.pageXOffset || docElem.scrollLeft) - marginLeft }; }

modern

function position(el) { const {top, left} = el.getBoundingClientRect(); const {marginTop, marginLeft} = getComputedStyle(el); return { top: top - parseInt(marginTop, 10), left: left - parseInt(marginLeft, 10) }; }

Position Relative To Viewport

jquery

function offset(el) { var offset = $(el).offset(); return { top: offset.top - document.body.scrollTop, left: offset.left - document.body.scrollLeft }; }

ie8+

el.getBoundingClientRect();

Prepend

jquery

$(parent).prepend(el);

modern

parent.prepend(el);

jquery

$(el).prev(); // Or, with an optional selector $(el).prev('.my-selector');

ie8+

// prevSibling can include text nodes function previousElementSibling(el) { do { el = el.previousSibling; } while (el && el.nodeType !== 1); return el; } el.previousElementSibling || previousElementSibling(el);

modern

function prev(el, selector) { const prevEl = el.previousElementSibling; if (!selector || (prevEl && prevEl.matches(selector))) { return prevEl; } return null; } prev(el); // Or, with an optional selector prev(el, '.my-selector');

Remove

jquery

$(el).remove(); // multiple elements $(selector).remove();

modern

el.remove(); // multiple elements for (const el of document.querySelectorAll(selector)) { el.remove(); }

Remove Attributes

jquery

$(el).removeAttr('tabindex');

ie8+

el.removeAttribute('tabindex');

Remove Class

jquery

$(el).removeClass(className);

ie8+

function removeClass(el, className) { var classes = className.split(' '); for (var i = 0; i < classes.length; i++) { if (el.classList) { el.classList.remove(classes[i]); } else { el.className = el.className .replace(new RegExp('(?:^|\\s)' + classes[i] + '(?:\\s|$)'), ' ') .replace(new RegExp(/^\s+|\s+$/g), ''); } } }

ie10+

el.classList.remove(className);

Replace From HTML

jquery

$(el).replaceWith(string);

ie8+

el.outerHTML = string;

Scroll Left

jquery

$(window).scrollLeft();

modern

function scrollLeft(el, value) { var win; if (el.window === el) { win = el; } else if (el.nodeType === 9) { win = el.defaultView; } if (value === undefined) { return win ? win.pageXOffset : el.scrollLeft; } if (win) { win.scrollTo(value, win.pageYOffset); } else { el.scrollLeft = value; } }

Scroll Top

jquery

$(window).scrollTop();

modern

function scrollTop(el, value) { var win; if (el.window === el) { win = el; } else if (el.nodeType === 9) { win = el.defaultView; } if (value === undefined) { return win ? win.pageYOffset : el.scrollTop; } if (win) { win.scrollTo(win.pageXOffset, value); } else { el.scrollTop = value; } }

Serialize

jquery

$(formElement).serialize();

modern

new URLSearchParams(new FormData(formElement)).toString();

Set Attributes

jquery

$(el).attr('tabindex', 3);

ie8+

el.setAttribute('tabindex', 3);

Set Height

jquery

$(el).height(val);

ie8+

function setHeight(el, val) { if (typeof val === 'function') val = val(); if (typeof val === 'string') el.style.height = val; else el.style.height = val + 'px'; } setHeight(el, val);

Set HTML

jquery

$(el).html(string);

ie8+

el.innerHTML = string;

Set Style

jquery

$(el).css('border-width', '20px');

ie8+

// Use a class if possible el.style.borderWidth = '20px';

Set Text

jquery

$(el).text(string);

ie9+

el.textContent = string;

Set Width

jquery

$(el).width(val);

ie8+

function setWidth(el, val) { if (typeof val === 'function') val = val(); if (typeof val === 'string') el.style.width = val; else el.style.width = val + 'px'; } setWidth(el, val);

Siblings

jquery

$(el).siblings();

ie8+

var siblings = function (el) { if (el.parentNode === null) return []; var siblingElements = Array.prototype.slice.call(el.parentNode.children); for (var i = siblingElements.length; i--; ) { if (siblingElements[i] === el) { return siblingElements.splice(i, 1); } } return siblingElements; }; siblings(el);

modern

[...el.parentNode.children].filter((child) => child !== el);

Toggle Class

jquery

$(el).toggleClass(className);

ie8+

if (el.classList) { el.classList.toggle(className); } else { var classes = el.className.split(' '); var existingIndex = -1; for (var i = classes.length; i--; ) { if (classes[i] === className) existingIndex = i; } if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); }

ie9+

if (el.classList) { el.classList.toggle(className); } else { var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); }

ie10+

el.classList.toggle(className);

Unwrap

jquery

$(el).unwrap();

modern

el.replaceWith(...el.childNodes);

Val

jquery

$(el).val();

modern

function val(el) { if (el.options && el.multiple) { return el.options .filter((option) => option.selected) .map((option) => option.value); } else { return el.value; } }

Wrap

jquery

el.wrap('<div></div>');

modern

function wrap(el) { const wrappingElement = document.createElement('div'); el.replaceWith(wrappingElement); wrappingElement.appendChild(el); }

Events

Alternatives:

Click

jquery

$(el).click(function () {});

ie8+

var onClick = function (element, handler) { if (element.addEventListener) { element.addEventListener('click', handler, false); } else { element.attachEvent('onclick', handler); } }; onClick(el, function () {});

modern

el.addEventListener('click', () => {});

Delegate

jquery

$(document).on(eventName, elementSelector, handler);

ie8+

document.addEventListener( eventName, function (e) { // loop parent nodes from the target to the delegation node for ( var target = e.target; target && target != this; target = target.parentNode ) { if (target.matches(elementSelector)) { handler.call(target, e); break; } } }, false );

modern

document.addEventListener(eventName, (event) => { if (event.target.closest(elementSelector)) { handler.call(event.target, event); } });

Off

jquery

$(el).off(eventName, eventHandler);

ie8+

function removeEventListener(el, eventName, handler) { if (el.removeEventListener) el.removeEventListener(eventName, handler); else el.detachEvent('on' + eventName, handler); } removeEventListener(el, eventName, handler);

ie9+

el.removeEventListener(eventName, eventHandler);

On

jquery

$(el).on(eventName, eventHandler); // Or when you want to delegate event handling $(el).on(eventName, selector, eventHandler);

ie8+

function addEventListener(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); return handler; } else { var wrappedHandler = function (event) { handler.call(el, event); }; el.attachEvent('on' + eventName, wrappedHandler); return wrappedHandler; } } // Use the return value to remove that event listener, see #off var handlerToRemove = addEventListener(el, eventName, handler);

ie9+

function addEventListener(el, eventName, eventHandler, selector) { if (selector) { var wrappedHandler = function (e) { if (e.target && e.target.matches(selector)) { eventHandler(e); } }; el.addEventListener(eventName, wrappedHandler); return wrappedHandler; } else { el.addEventListener(eventName, eventHandler); return eventHandler; } } // Use the return value to remove that event listener, see #off addEventListener(el, eventName, eventHandler); // Or when you want to delegate event handling addEventListener(el, eventName, eventHandler, selector);

modern

function addEventListener(el, eventName, eventHandler, selector) { if (selector) { const wrappedHandler = (e) => { if (!e.target) return; const el = e.target.closest(selector); if (el) { eventHandler.call(el, e); } }; el.addEventListener(eventName, wrappedHandler); return wrappedHandler; } else { const wrappedHandler = (e) => { eventHandler.call(el, e); }; el.addEventListener(eventName, wrappedHandler); return wrappedHandler; } } // Use the return value to remove that event listener, see #off addEventListener(el, eventName, eventHandler); // Or when you want to delegate event handling addEventListener(el, eventName, eventHandler, selector);

Ready

jquery

$(document).ready(function () {});

ie8+

function ready(fn) { if (document.readyState != 'loading') { fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function () { if (document.readyState != 'loading') fn(); }); } }

ie9+

function ready(fn) { if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } }

modern

function ready(fn) { if (document.readyState !== 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } }

Trigger Custom

Alternatives:

jquery

$(el).trigger('my-event', {some: 'data'});

ie9+

if (window.CustomEvent && typeof window.CustomEvent === 'function') { var event = new CustomEvent('my-event', {detail: {some: 'data'}}); } else { var event = document.createEvent('CustomEvent'); event.initCustomEvent('my-event', true, true, {some: 'data'}); } el.dispatchEvent(event);

modern

const event = new CustomEvent('my-event', {detail: {some: 'data'}}); el.dispatchEvent(event);

Trigger Native

jquery

$(el).trigger('focus');

ie8+

function trigger(el, eventType) { if (typeof eventType === 'string' && typeof el[eventType] === 'function') { el[eventType](); } else if (eventType === 'string') { if (document.createEvent) { var event = document.createEvent('HTMLEvents'); event.initEvent(eventType, true, false); el.dispatchEvent(event); } else { el.fireEvent('on' + eventType); } } else { el.dispatchEvent(eventType); } } // For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent trigger(el, 'focus');

ie9+

function trigger(el, eventType) { if (typeof eventType === 'string' && typeof el[eventType] === 'function') { el[eventType](); } else { var event; if (eventType === 'string') { event = document.createEvent('HTMLEvents'); event.initEvent(eventType, true, false); } else { event = eventType; } el.dispatchEvent(event); } } // For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent trigger(el, 'focus');

modern

function trigger(el, eventType) { if (typeof eventType === 'string' && typeof el[eventType] === 'function') { el[eventType](); } else { const event = typeof eventType === 'string' ? new Event(eventType, {bubbles: true}) : eventType; el.dispatchEvent(event); } } trigger(el, 'focus'); // For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/Event trigger(el, new PointerEvent('pointerover'));

Utils

Array Each

jquery

$.each(array, function (i, item) {});

modern

array.forEach((item, i) => {});

Bind

jquery

$.proxy(fn, context);

ie9+

fn.bind(context);

Deep Extend

jquery

$.extend(true, {}, objA, objB);

modern

function deepExtend(out, ...arguments_) { if (!out) { return {}; } for (const obj of arguments_) { if (!obj) { continue; } for (const [key, value] of Object.entries(obj)) { switch (Object.prototype.toString.call(value)) { case '[object Object]': out[key] = out[key] || {}; out[key] = deepExtend(out[key], value); break; case '[object Array]': out[key] = deepExtend(new Array(value.length), value); break; default: out[key] = value; } } } return out; } deepExtend({}, objA, objB);

Extend

Alternatives:

jquery

$.extend({}, objA, objB);

modern

const result = {...objA, ...objB};

Index Of

jquery

$.inArray(item, array);

ie9+

array.indexOf(item);

Is Array

jquery

$.isArray(arr);

ie9+

Array.isArray(arr);

Is Numeric

jquery

$.isNumeric(val);

ie8+

function isNumeric(num) { if (typeof num === 'number') return num - num === 0; if (typeof num === 'string' && num.trim() !== '') return Number.isFinite ? Number.isFinite(+num) : isFinite(+num); return false; } isNumeric(val);

modern

function isNumeric(num) { if (typeof num === 'number') return num - num === 0; if (typeof num === 'string' && num.trim() !== '') return Number.isFinite(+num); return false; } isNumeric(val);

Map

jquery

$.map(array, function (value, index) {});

modern

array.map((value, index) => {});

Now

jquery

$.now();

ie9+

Date.now();

Object Each

jquery

$.each(obj, function (key, value) {});

modern

for (const [key, value] of Object.entries(obj)) { }

Parse HTML

jquery

$.parseHTML(htmlString);

ie9+

var parseHTML = function (str) { var tmp = document.implementation.createHTMLDocument(''); tmp.body.innerHTML = str; return Array.prototype.slice.call(tmp.body.childNodes); }; parseHTML(htmlString);

modern

function parseHTML(str) { const tmp = document.implementation.createHTMLDocument(''); tmp.body.innerHTML = str; return [...tmp.body.childNodes]; } parseHTML(htmlString);

Parse JSON

jquery

$.parseJSON(string);

ie8+

JSON.parse(string);

Slice

jquery

$(els).slice(begin, end);

ie8+

function slice(els, start, end) { var f = Array.prototype.slice; try { f.call(document.documentElement); } catch (h) { Array.prototype.slice = function (g, b) { b = 'undefined' !== typeof b ? b : this.length; if ('[object Array]' === Object.prototype.toString.call(this)) return f.call(this, g, b); var e = []; var a = this.length; var c = g || 0; c = 0 <= c ? c : Math.max(0, a + c); var d = 'number' == typeof b ? Math.min(b, a) : a; 0 > b && (d = a + b); d -= c; if (0 < d) if (((e = Array(d)), this.charAt)) for (a = 0; a < d; a++) e[a] = this.charAt(c + a); else for (a = 0; a < d; a++) e[a] = this[c + a]; return e; }; } return els.slice(start, end); } slice(els, start, end);

ie9+

els.slice(begin, end);

To Array

jquery

$(selector).toArray();

modern

const array = [...document.querySelectorAll(selector)];

Trim

jquery

$.trim(string);

ie9+

string.trim();

Type

jquery

$.type(obj);

ie8+

Object.prototype.toString .call(obj) .replace(/^\[object (.+)\]$/, '$1') .toLowerCase();