You Might Not Need jQuery

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

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

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

const response = await fetch('/path/to/template.html');
const body = await response.text();

document.querySelector('#some.selector').innerHTML = body;

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

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

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

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

if (!response.ok) {
}

const body = await response.text();

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

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

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

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

el.style.display = 'none';

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

$(el).addClass(className);

el.classList.add(className);

$(target).after(element);

$(target).before(element);

node.contains(anotherNode);

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

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

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

function generateElements(html) {
  const template = document.createElement('template');
  template.innerHTML = html.trim();
  return template.content.children;
}

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

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

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

$(selector).filter(filterFn);

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

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

$('.my #awesome selector');

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

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

!!el.querySelector(selector);

document.querySelector(el);

el.getAttribute('tabindex');

el.getBoundingClientRect().height;

getComputedStyle(el)[ruleName];

el.getBoundingClientRect().width;

$(el).hasClass(className);

el.classList.contains(className);

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

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

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

innerHeight(el);
innerHeight(el, 150);

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

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

innerWidth(el);
innerWidth(el, 150);

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

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

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

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

function outerHeight(el) {
  const style = getComputedStyle(el);

  return (
    el.getBoundingClientRect().height +
    parseFloat(style.marginTop) +
    parseFloat(style.marginBottom)
  );
}

outerHeight(el);

function outerWidth(el) {
  const style = getComputedStyle(el);

  return (
    el.getBoundingClientRect().width +
    parseFloat(style.marginLeft) +
    parseFloat(style.marginRight)
  );
}

outerWidth(el);

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

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

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

el.getBoundingClientRect();

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

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

$(el).remove();

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

el.remove();

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

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

el.removeAttribute('tabindex');

$(el).removeClass(className);

el.classList.remove(className);

$(el).replaceWith(string);

$(formElement).serialize();

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

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

el.setAttribute('tabindex', 3);

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

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

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

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

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

$(el).toggleClass(className);

el.classList.toggle(className);

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

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

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

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

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

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

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

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

el.removeEventListener(eventName, eventHandler);

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

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

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

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

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

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

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

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

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

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

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

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

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(array, function (value, index) {});

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

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

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

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

parseHTML(htmlString);

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

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

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