You might not need jQuery

jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.

If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.

At the very least, make sure you know what jQuery is doing for you, and what it's not. Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty easy to deal with on their own; and after the Internet Explorer era, the browsers do even more.

Your search didn't match any comparisons.

AJAX

Alternatives:

JSON

jquery

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

modern

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

Load

jquery

$('#some.selector').load('/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 () {}
});

modern

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

if (!response.ok) {
}

const body = await response.text();

Effects

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);

ie10+

el.closest(sel);

Contains

jquery

$.contains(el, child);

modern

node.contains(anotherNode);

Contains Selector

Alternatives:

jquery

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

modern

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

Contents

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) {});

modern

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

Empty

jquery

$(el).empty();

modern

el.replaceChildren();

Filter

jquery

$(selector).filter(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();

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();

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');

modern

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

Offset

jquery

$(el).offset();

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);

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);

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);

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();

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);

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);

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();

modern

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

Toggle Class

jquery

$(el).toggleClass(className);

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

Click

jquery

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

modern

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

Delegate

jquery

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

modern

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

Off

jquery

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

ie9+

el.removeEventListener(eventName, eventHandler);

On

jquery

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

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 () {});

modern

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

Trigger Custom

jquery

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

modern

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

Trigger Native

jquery

$(el).trigger('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

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);

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);

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);

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();