转自github.com/roman01la

How to forget about jQuery and start using native JavaScript APIs

JavaScript is here and it’s ready for you, but probably you are not ready for it yet. Why not using jQuery? Because it’s slow and your website doesn’t really need extra weight.I’m not going to argue about libs vs native. Sometimes it’s really hard to live without all that magic stuff. But I’m going to argue about loading kilos of code just only for a one-character-selector-function aka $ or things like that.Assuming that shorthands is not the case, everyone use jSomething because of it’s support for IE, animation handling and the only selector function.

Native equivalents

Select elements

// jQuery
var els = $('.el');
// Native
var els = document.querySelectorAll('.el');
// Shorthand
var $ = function (el) { return document.querySelectorAll(el); }
var els = $('.el');
// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries

// jQuery

var els = $('.el');

// Native

var els = document.querySelectorAll('.el');

// Shorthand

var $ = function (el) { return document.querySelectorAll(el); }

var els = $('.el');

// Or use regex-based micro-selector lib

// http://jsperf.com/micro-selector-libraries

Create elements

// jQuery
var newEl = $('<div/>');
// Native
var newEl = document.createElement('div');

// jQuery

var newEl = $('<div/>');

// Native

var newEl = document.createElement('div');

Add event listener

// jQuery
$('.el').on('event', function() { });
// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) { el.addEventListener('event', function() { }, false); });

// jQuery

$('.el').on('event', function() { });

// Native

[].forEach.call(document.querySelectorAll('.el'), function (el) { el.addEventListener('event', function() { }, false); });

Set/get attribute

// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
// Native
document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');

// jQuery

$('.el').filter(':first').attr('key', 'value');

$('.el').filter(':first').attr('key');

// Native

document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');

Add/remove/toggle class

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');
// Native
document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');

// jQuery

$('.el').addClass('class');

$('.el').removeClass('class');

$('.el').toggleClass('class');

// Native

document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');

Append

// jQuery
$('.el').append($('<div/>'));
// Native
document.querySelector('.el').appendChild(document.createElement('div'));

// jQuery

$('.el').append($('<div/>'));

// Native

document.querySelector('.el').appendChild(document.createElement('div'));

Clone

// jQuery
var clonedEl = $('.el').clone();
// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

// jQuery

var clonedEl = $('.el').clone();

// Native

var clonedEl = document.querySelector('.el').cloneNode(true);

Remove

// jQuery
$('.el').remove();
// Native remove('.el');
function remove(el) { var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove); }

// jQuery

$('.el').remove();

// Native remove('.el');

function remove(el) { var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove); }

Parent

// jQuery
$('.el').parent();
// Native
document.querySelector('.el').parentNode;

// jQuery

$('.el').parent();

// Native

document.querySelector('.el').parentNode;

Prev/next element

// jQuery
$('.el').prev();
$('.el').next();
// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

// jQuery

$('.el').prev();

$('.el').next();

// Native

document.querySelector('.el').previousElementSibling;

document.querySelector('.el').nextElementSibling;

XHR aka AJAX

// jQuery
$.get('url', function (data) { });
$.post('url', {data: data}, function (data) { });
// Native
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) { } xhr.send();
// post var xhr = new XMLHttpRequest() xhr.open('POST', url);
xhr.onreadystatechange = function (data) { } xhr.send({data: data});

// jQuery

$.get('url', function (data) { });

$.post('url', {data: data}, function (data) { });

// Native

// get

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function (data) { } xhr.send();

// post var xhr = new XMLHttpRequest() xhr.open('POST', url);

xhr.onreadystatechange = function (data) { } xhr.send({data: data});

So this is just a few, you can find more native stuff using the console in your browser or read MDN’s JS API reference or WPD’s DOM docs.

You still can use libs, check here for some ultra-lightweight and find the one you need for particular task, but first make sure you can’t achieve the goal without it, otherwise use native JS.