jQuery 和它的相关插件都是很强大的,使用它们让我们的应用开发变得简单。如果你正在开发另一个库,请花点时间思考以下,你是否真的需要依赖jQuery。如果你的应用仅针对更现代的浏览器,你可能不需要做过多的浏览器适配。

至少,你要知道 jQuery 为你做了些什么,和没有为你做些什么。一些开发者认为 jQuery 让我们从浏览器兼容中得以解脱,事实上,IE8之后,浏览器自身已经做的很好了。

Your search didn't match any comparisons.

AJAX

替代方案:

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

ES6+

const data = await (await fetch('/my/url')).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');

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+

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

效果

Fade In

jQuery

$(el).fadeIn();

IE8+

function fadeIn(el, speed = 400) {
  var opacity = 0;

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

  var last = +new Date();
  var tick = function () {
    opacity += (new Date() - last) / speed;
    if (opacity > 1) opacity = 1;
    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, speed = 400) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function () {
    el.style.opacity = +el.style.opacity + (new Date() - last) / speed;
    if (opacity > 1) opacity = 1;
    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, 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);

IE9+

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

  var last = +new Date();
  var tick = function () {
    el.style.opacity = +el.style.opacity - (new Date() - last) / speed;
    if (opacity < 0) opacity = 0;
    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 = '';

Toggle

jQuery

$(el).toggle();

IE8+

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

元素

替代方案:

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

Append To

jQuery

$(el).appendTo(parent);

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

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

IE8+

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

Contains Selector

jQuery

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

IE8+

!!el.querySelector(selector);

Create Elements

jQuery

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

IE8+

function generateElements(html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  if (div.children.length === 0) {
    return null;
  }
  if (div.children.length === 1) {
    return div.firstChild;
  } else {
    return div.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) {});

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

查找元素

替代方案:

jQuery

$('.my #awesome selector');

IE8+

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

First

jQuery

$(el).first();

IE8+

document.querySelectorAll(el)[0];

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

Last

jQuery

$(el).last();

IE8+

var els = document.querySelectorAll(el);
els[els.length - 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');

Offset

jQuery

$(el).offset();

IE8+

var rect = el.getBoundingClientRect();

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

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 += 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+

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

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

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+

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;

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

事件

替代方案:

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);
// 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);
  } else {
    el.attachEvent('on' + eventName, function () {
      handler.call(el);
    });
  }
}

addEventListener(el, eventName, handler);

IE9+

function addEventListener(el, eventName, eventHandler, selector) {
  if (selector) {
    el.addEventListener(eventName, function (e) {
      if (e.target && e.target.matches(selector)) {
        eventHandler(e);
      }
    });
  } else {
    el.addEventListener(eventName, eventHandler);
  }
}

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

Trigger Custom

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

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

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

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

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

Parse HTML

jQuery

$.parseHTML(htmlString);

IE8+

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

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

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

IE8+

function toArray(selector) {
  var array = [];
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++) array.push(elements[i]);
  return array;
}

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