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.

What's the oldest version of IE you need to support?

Your search didn't match any comparisons.

AJAX

Alternatives:

fetch https

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

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

Request

jQuery

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

  },
  error: function() {

  }
});

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

Effects

Alternatives:

Fade In

jQuery

$(el).fadeIn();

IE8+

function fadeIn(el) {
  var opacity = 0;

  el.style.opacity = 0;
  el.style.filter = '';

  var last = +new Date();
  var tick = function() {
    opacity += (new Date() - last) / 400;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';

    last = +new Date();

    if (opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

IE9+

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

IE10+

el.classList.add('show');
el.classList.remove('hide');

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

Fade Out

jQuery

$(el).fadeOut();

IE8+

function fadeOut(el) {
  var opacity = 1;

  el.style.opacity = 1;
  el.style.filter = '';

  var last = +new Date();
  var tick = function() {
    opacity -= (new Date() - last) / 400;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|1 + ')';

    last = +new Date();

    if (opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeOut(el);

IE9+

function fadeOut(el) {
  el.style.opacity = 1;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity - (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeOut(el);

IE10+

el.classList.add('hide');
el.classList.remove('show');

.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 = '';

Elements

Alternatives:

bonzo
$dom

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

IE8+

target.insertAdjacentElement('afterend', element);

Append

jQuery

$(parent).append(el);

IE8+

parent.appendChild(el);

Before

jQuery

$(target).before(element);

IE8+

target.insertAdjacentElement('beforebegin', element);

Children

jQuery

$(el).children();

IE8+

var children = [];
for (var i = el.children.length; i--;) {
  // Skip comment nodes on IE8
  if (el.children[i].nodeType != 8)
    children.unshift(el.children[i]);
}

IE9+

el.children

Clone

jQuery

$(el).clone();

IE8+

el.cloneNode(true);

Contains

jQuery

$.contains(el, child);

IE8+

el !== child && el.contains(child);

Contains Selector

jQuery

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

IE8+

!!el.querySelector(selector);

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

});

IE9+

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

Empty

jQuery

$(el).empty();

IE8+

while(el.firstChild)
  el.removeChild(el.firstChild);

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

IE9+

Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

Find Children

jQuery

$(el).find(selector);

IE8+

el.querySelectorAll(selector);

Find Elements

Alternatives:

qwery
sizzle

jQuery

$('.my #awesome selector');

IE8+

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

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

IE9+

parseFloat(getComputedStyle(el, null).height.replace("px", ""))

Get HTML

jQuery

$(el).html();

IE8+

el.innerHTML

Get Outer HTML

jQuery

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

IE8+

el.outerHTML

Get Style

jQuery

$(el).css(ruleName);

IE8+

// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle
// https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

IE9+

getComputedStyle(el)[ruleName];

Get Text

jQuery

$(el).text();

IE8+

el.textContent || el.innerText

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

IE9+

parseFloat(getComputedStyle(el, null).width.replace("px", ""))

Has Class

jQuery

$(el).hasClass(className);

IE8+

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

IE10+

el.classList.contains(className);

Index

jQuery

$(el).index();

IE8+

function index(el) {
  if (!el) return -1;
  var i = 0;
  while (el) {
    el = el.previousSibling;
    if (el && el.nodeType === 1) i++;
  }
  return i;
}

IE9+

function index(el) {
  if (!el) return -1;
  var i = 0;
  while (el = el.previousElementSibling) {
    i++;
  }
  return i;
}

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

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

IE9+

el.nextElementSibling

Offset

jQuery

$(el).offset();

IE8+

var rect = el.getBoundingClientRect();

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

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 += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}

outerHeight(el);

IE9+

function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}

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 += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

outerWidth(el);

IE9+

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

outerWidth(el);

Parent

jQuery

$(el).parent();

IE8+

el.parentNode

Position

jQuery

$(el).position();

IE8+

{left: el.offsetLeft, top: el.offsetTop}

Position Relative To Viewport

jQuery

var offset = el.offset();

{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}

IE8+

el.getBoundingClientRect()

Prepend

jQuery

$(parent).prepend(el);

IE8+

parent.insertBefore(el, parent.firstChild);

jQuery

$(el).prev();

IE8+

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

el.previousElementSibling || previousElementSibling(el);

IE9+

el.previousElementSibling

Remove

jQuery

$(el).remove();

IE8+

if (el.parentNode !== null) {
  el.parentNode.removeChild(el);
}

Remove Attributes

jQuery

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

IE8+

el.removeAttribute('tabindex');

Remove Class

jQuery

$(el).removeClass(className);

IE8+

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

IE10+

el.classList.remove(className);

Replace From HTML

jQuery

$(el).replaceWith(string);

IE8+

el.outerHTML = string;

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

IE8+

if (el.textContent !== undefined)
  el.textContent = string;
else
  el.innerText = 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);

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

Events

Alternatives:

ftdomdelegate

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

IE9+

el.addEventListener('click', function () {}, false);

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

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

IE8+

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

addEventListener(el, eventName, handler);

IE9+

el.addEventListener(eventName, eventHandler);

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.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Trigger Custom

Alternatives:

jQuery

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

IE8+

// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.

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

Trigger Native

jQuery

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

IE8+

if (document.createEvent) {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('change', true, false);
  el.dispatchEvent(event);
} else {
  el.fireEvent('onchange');
}

IE9+

// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);

Utils

Array Each

jQuery

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

});

IE8+

function forEach(array, fn) {
  for (var i = 0; i < array.length; i++)
    fn(array[i], i);
}

forEach(array, function(item, i){

});

IE9+

array.forEach(function(item, i){

});

Bind

jQuery

$.proxy(fn, context);

IE8+

fn.apply(context, arguments);

IE9+

fn.bind(context);

Deep Extend

jQuery

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

IE8+

var deepExtend = function (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)) {
        if (typeof obj[key] === "object" && obj[key] !== null) {
          if (obj[key] instanceof Array) out[key] = obj[key].slice(0);
          else out[key] = deepExtend(out[key], obj[key]);
        } else out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);

Extend

Alternatives:

jQuery

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

IE8+

var extend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;

    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }

  return out;
};

extend({}, objA, objB);

Index Of

jQuery

$.inArray(item, array);

IE8+

function indexOf(array, item) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === item)
      return i;
  }
  return -1;
}

indexOf(array, item);

IE9+

array.indexOf(item);

Is Array

jQuery

$.isArray(arr);

IE8+

isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]';
};

isArray(arr);

IE9+

Array.isArray(arr);

Map

jQuery

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

});

IE8+

function map(arr, fn) {
  var results = [];
  for (var i = 0; i < arr.length; i++)
    results.push(fn(arr[i], i));
  return results;
}

map(array, function(value, index){

});

IE9+

array.map(function(value, index){

});

Now

jQuery

$.now();

IE8+

new Date().getTime();

IE9+

Date.now();

Parse HTML

jQuery

$.parseHTML(htmlString);

IE8+

var parseHTML = function(str) {
  var el = document.createElement('div');
  el.innerHTML = str;
  return el.children;
};

parseHTML(htmlString);

IE9+

var parseHTML = function (str) {
  var tmp = document.implementation.createHTMLDocument("");
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

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

Trim

jQuery

$.trim(string);

IE8+

string.replace(/^\s+|\s+$/g, '');

IE9+

string.trim();

Type

jQuery

$.type(obj);

IE8+

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