Carview!

CARVIEW

MOTORHOMES

Select Language

HTTP/2 200 server: GitHub.com content-type: text/html; charset=utf-8 last-modified: Mon, 03 Jul 2023 13:48:34 GMT access-control-allow-origin: * etag: W/"64a2d1b2-699d1" expires: Sun, 28 Dec 2025 11:34:43 GMT cache-control: max-age=600 content-encoding: gzip x-proxy-cache: MISS x-github-request-id: 39F8:15317B:78FAE1:8794F3:69511377 accept-ranges: bytes age: 0 date: Sun, 28 Dec 2025 13:01:57 GMT via: 1.1 varnish x-served-by: cache-bom-vanm7210074-BOM x-cache: HIT x-cache-hits: 0 x-timer: S1766926917.297481,VS0,VE199 vary: Accept-Encoding x-fastly-request-id: e4dc2c314c60374f2a770241cff6bcca2f20bb84 content-length: 24308 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:

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

ie8+

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader(
  'Content-Type',
  'application/x-www-form-urlencoded; charset=UTF-8'
);
request.send(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();

ie8+

function fadeOut(el, speed = 400) {
  var opacity = 1;
  el.style.opacity = 1;
  el.style.filter = '';
  var last = +new Date();
  var tick = function () {
    opacity -= (new Date() - last) / speed;
    if (opacity < 0) opacity = 0;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + 100 * opacity + ')';
    last = +new Date();
    if (opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
        setTimeout(tick, 16);
    }
  };
  tick();
}
fadeOut(el);

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

ie8+

if (el.classList) {
  el.classList.add(className);
} else {
  var current = el.className,
    found = false;
  var all = current.split(' ');
  for (var i = 0; i < all.length, !found; i++) found = all[i] === className;
  if (!found) {
    if (current === '') el.className = className;
    else el.className += ' ' + 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);

ie9+

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = 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);

ie9+

var siblings = function (el) {
  if (el.parentNode === null) return [];
  return Array.prototype.filter.call(el.parentNode.children, function (child) {
    return child !== el;
  });
};
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);

ie8+

function deepExtend(out) {
  out = out || {};
  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];
    if (!obj) continue;
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        var rawType = Object.prototype.toString.call(obj[key]);
        if (rawType === '[object Object]') {
          out[key] = deepExtend(out[key], obj[key]);
        } else if (rawType === '[object Array]') {
          out[key] = deepExtend(new Array(obj[key].length), obj[key]);
        } else {
          out[key] = obj[key];
        }
      }
    }
  }
  return out;
}
deepExtend({}, 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) {});

ie8+

function objectEach(obj, callback) {
  for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      callback(key, obj[key]);
    }
  }
}
objectEach(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();

Original Source | Taken Source