jQuery and its ecosystem of plugins provide powerful capabilities that simplify web application development. How ever, if you're building a library or aplication, take a moment to evaluate whether you actually need this dependency. Modern browsers offer robust built-in APIs that cover most use cases previously handled by jQuery.

Understanding what jQuery handles for you—and what it doesn't—is essential knowledge. Many developers believe jQuery shields them from cross-browser inconsistencies, but browsers have significantly improved their standards compliance since IE8. Modern browsers handle most DOM operations and network requesst natively with excellent compatibility.

AJAX Operations

// jQuery - JSON Request
$.getJSON('/api/data', function(result) {
});

// Vanilla JavaScript - JSON (IE9+)
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    var result = JSON.parse(xhr.responseText);
  } else {
    // Server responded but with an error status
  }
};
xhr.onerror = function() {
  // Network or request failure
};
xhr.send();

// jQuery - POST Request
$.ajax({
  type: 'POST',
  url: '/api/submit',
  data: payload
});

// Vanilla JavaScript - POST (IE8+)
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send(payload);

// jQuery - General Request
$.ajax({
  type: 'GET',
  url: '/api/resource',
  success: function(response) {
  },
  error: function() {
  }
});

// Vanilla JavaScript - General Request (IE9+)
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/resource', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    var response = xhr.responseText;
  } else {
    // Successful response with error status
  }
};
xhr.onerror = function() {
  // Request failed
};
xhr.send();

Visual Effects

// jQuery - fadeIn
$(elem).fadeIn();

// Vanilla JavaScript - fadeIn (IE9+)
function animateFadeIn(element) {
  element.style.opacity = 0;
  var startTime = +new Date();
  var animate = function() {
    element.style.opacity = parseFloat(element.style.opacity) + (new Date() - startTime) / 400;
    startTime = +new Date();
    if (parseFloat(element.style.opacity) < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(animate)) || setTimeout(animate, 16);
    }
  };
  animate();
}
animateFadeIn(elem);

// jQuery - hide
$(elem).hide();

// Vanilla JavaScript - hide (IE8+)
elem.style.display = 'none';

// jQuery - show
$(elem).show();

// Vanilla JavaScript - show (IE8+)
elem.style.display = '';

DOM Element Operations

// jQuery - addClass
$(elem).addClass(className);

// Vanilla JavaScript - addClass (IE8+)
if (elem.classList)
  elem.classList.add(className);
else
  elem.className += ' ' + className;

// jQuery - after
$(elem).after(markupString);

// Vanilla JavaScript - after (IE8+)
elem.insertAdjacentHTML('afterend', markupString);

// jQuery - append
$(parentNode).append(childNode);

// Vanilla JavaScript - append (IE8+)
parentNode.appendChild(childNode);

// jQuery - before
$(elem).before(markupString);

// Vanilla JavaScript - before (IE8+)
elem.insertAdjacentHTML('beforebegin', markupString);

// jQuery - children
$(elem).children();

// Vanilla JavaScript - children (IE9+)
elem.children

// jQuery - clone
$(elem).clone();

// Vanilla JavaScript - clone (IE8+)
elem.cloneNode(true);

// jQuery - contains
$.contains(container, descendant);

// Vanilla JavaScript - contains (IE8+)
container !== descendant && container.contains(descendant);

// jQuery - selector check
$(elem).find(selector).length;

// Vanilla JavaScript - selector check (IE8+)
elem.querySelector(selector) !== null

// jQuery - each iteration
$(selector).each(function(index, element){

});

// Vanilla JavaScript - each iteration (IE9+)
var nodeList = document.querySelectorAll(selector);
Array.prototype.forEach.call(nodeList, function(element, index){

});

// jQuery - empty
$(elem).empty();

// Vanilla JavaScript - empty (IE9+)
elem.innerHTML = '';

// jQuery - filter
$(selector).filter(callbackFn);

// Vanilla JavaScript - filter (IE9+)
Array.prototype.filter.call(document.querySelectorAll(selector), callbackFn);

// jQuery - find
$(elem).find(selector);

// Vanilla JavaScript - find (IE8+)
elem.querySelectorAll(selector);

// jQuery - query elements
$('.container #special selector');

// Vanilla JavaScript - query elements (IE8+)
document.querySelectorAll('.container #special selector');

// jQuery - getAttribute
$(elem).attr('tabindex');

// Vanilla JavaScript - getAttribute (IE8+)
elem.getAttribute('tabindex');

// jQuery - html
$(elem).html();

// Vanilla JavaScript - html (IE8+)
elem.innerHTML

// jQuery - outerHTML
$('<div>').append($(elem).clone()).html();

// Vanilla JavaScript - outerHTML (IE8+)
elem.outerHTML

// jQuery - get computed style
$(elem).css(propertyName);

// Vanilla JavaScript - get computed style (IE9+)
getComputedStyle(elem)[propertyName];

// jQuery - text content
$(elem).text();

// Vanilla JavaScript - text content (IE9+)
elem.textContent

// jQuery - hasClass
$(elem).hasClass(className);

// Vanilla JavaScript - hasClass (IE8+)
if (elem.classList)
  elem.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);

// jQuery - is (element comparison)
$(elem).is($(otherElement));

// Vanilla JavaScript - is (IE8+)
elem === otherElement

// jQuery - is (selector matching)
$(elem).is('.my-class');

// Vanilla JavaScript - is (IE9+)
var matchesSelector = function(el, sel) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, sel);
};

matchesSelector(elem, '.my-class');

// jQuery - next sibling
$(elem).next();

// Vanilla JavaScript - next sibling (IE9+)
elem.nextElementSibling

// jQuery - offset
$(elem).offset();

// Vanilla JavaScript - offset (IE8+)
var box = elem.getBoundingClientRect();

{
  top: box.top + document.body.scrollTop,
  left: box.left + document.body.scrollLeft
}

// jQuery - offsetParent
$(elem).offsetParent();

// Vanilla JavaScript - offsetParent (IE8+)
elem.offsetParent || elem

// jQuery - outerHeight
$(elem).outerHeight();

// Vanilla JavaScript - outerHeight (IE8+)
elem.offsetHeight

// jQuery - outerHeight with margins
$(elem).outerHeight(true);

// Vanilla JavaScript - outerHeight with margins (IE9+)
function getOuterHeight(element) {
  var height = element.offsetHeight;
  var styles = getComputedStyle(element);

  height += parseInt(styles.marginTop) + parseInt(styles.marginBottom);
  return height;
}
getOuterHeight(elem);

// jQuery - outerWidth
$(elem).outerWidth();

// Vanilla JavaScript - outerWidth (IE8+)
elem.offsetWidth

// jQuery - outerWidth with margins
$(elem).outerWidth(true);

// Vanilla JavaScript - outerWidth with margins (IE9+)
function getOuterWidth(element) {
  var width = element.offsetWidth;
  var styles = getComputedStyle(element);

  width += parseInt(styles.marginLeft) + parseInt(styles.marginRight);
  return width;
}
getOuterWidth(elem);

// jQuery - parent
$(elem).parent();

// Vanilla JavaScript - parent (IE8+)
elem.parentNode

// jQuery - position
$(elem).position();

// Vanilla JavaScript - position (IE8+)
{left: elem.offsetLeft, top: elem.offsetTop}

// jQuery - viewport position
var pos = elem.offset();
{
  top: pos.top - document.body.scrollTop,
  left: pos.left - document.body.scrollLeft
}

// Vanilla JavaScript - viewport position (IE8+)
elem.getBoundingClientRect()

// jQuery - prepend
$(parentNode).prepend(childNode);

// Vanilla JavaScript - prepend (IE8+)
parentNode.insertBefore(childNode, parentNode.firstChild);