Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vanilla JS vs jQuery

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

// Vanilla
document.addEventListener('DOMContentLoaded', function() {
  // code
})
// jQuery
$('a').click(function() {
  // code…
})

// Vanilla
[].forEach.call(document.querySelectorAll('a'), function(el) {
  el.addEventListener('click', function() {
    // code…
  })
})

Selectors

// jQuery
var divs = $('div')

// Vanilla
var divs = document.querySelectorAll('div')
// jQuery
var newDiv = $('<div/>')

// Vanilla
var newDiv = document.createElement('div')

Attributes

// jQuery
$('img').filter(':first').attr('alt', 'My image')

// Vanilla
document.querySelector('img').setAttribute('alt', 'My image')

Classes

// jQuery
newDiv.addClass('foo')

// Vanilla
newDiv.classList.add('foo')
// jQuery
newDiv.toggleClass('foo')

// Vanilla
newDiv.classList.toggle('foo')

Manipulation

// jQuery
$('body').append($('<p/>'))

// Vanilla
document.body.appendChild(document.createElement('p'))
// jQuery
var clonedElement = $('#about').clone()

// Vanilla
var clonedElement = document.getElementById('about').cloneNode(true)
// jQuery
$('#wrap').empty()

// Vanilla
var wrap = document.getElementById('wrap')
while(wrap.firstChild) wrap.removeChild(wrap.firstChild)

Transversing

// jQuery
var parent = $('#about').parent()

// Vanilla
var parent = document.getElementById('about').parentNode
// jQuery
if($('#wrap').is(':empty'))

// Vanilla
if(!document.getElementById('wrap').hasChildNodes())
// jQuery
var nextElement = $('#wrap').next()

// Vanilla
var nextElement = document.getElementById('wrap').nextSibling

AJAX

GET

// jQuery
$.get('//example.com', function (data) {
  // code
})

// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
  // code
}
httpRequest.open('GET', url)
httpRequest.send()

POST

// jQuery
$.post('//example.com', { username: username }, function (data) {
  // code
})

// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
  // code
}
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.open('POST', url)
httpRequest.send('username=' + encodeURIComponent(username))

JSONP

// jQuery
$.getJSON('//openexchangerates.org/latest.json?callback=?', function (data) {
  // code
})

// Vanilla
function success(data) {
  // code
}
var scr = document.createElement('script')
scr.src = '//openexchangerates.org/latest.json?callback=formatCurrency'
document.body.appendChild(scr)
@CastenettoA

This comment has been minimized.

CastenettoA commented Jun 15, 2013

Hi, good project man.
I fork your project for italian people (https://gist.github.com/CastenettoA/5787297).

@harmstyler

This comment has been minimized.

harmstyler commented Nov 14, 2013

@MoOx

This comment has been minimized.

MoOx commented Dec 6, 2013

@bojanvidanovic

This comment has been minimized.

bojanvidanovic commented Dec 13, 2013

Thanks for this. Really helpful.

@tracend

This comment has been minimized.

tracend commented Dec 16, 2013

This gist was inspiring - just did a little hackathon and put it all in a lib, for people (like me) that may still want to use the jQuery syntax.
https://github.com/makesites/vanilla-query

Feel free to fork & enhance

@tcelestino

This comment has been minimized.

tcelestino commented Dec 17, 2013

I liked AJAX vanilla. Many people (inclusive me) used $.ajax method's because is more simple and cross browser. Today I'm using combination jQuery and Vanilla js.

@trevorgk

This comment has been minimized.

trevorgk commented Feb 27, 2014

I believe that the syntax for POST is incorrect. I tried it out and it threw errors.
The problem is the ordering of commands (specifcally, calling setrequestheader before calling open).

From https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

setRequestHeader()

Sets the value of an HTTP request header. You must call setRequestHeader() after open(), but before send(). If this method is called several times with the same header, the values are merged into one single request header.

@afzaal-ahmad-zeeshan

This comment has been minimized.

afzaal-ahmad-zeeshan commented Jun 15, 2014

No offense, but I really didn't like this. There is actually no difference between Pure JavaScript and Vanilla JavaScript. If you really had to just get some rep, you should have tried going to W3.org.

I like jQuery not for being 'jQuery', but for being short and simple. I create mini projects, so microseconds don't matter at all for me. Yeah if I would ever develop a major project, I would use Server-side code instead of this piece of c-rap!

Once again, no offence! :P

@lucasreta

This comment has been minimized.

lucasreta commented Nov 10, 2014

@afzaal-ahmad-zeeshan "There is actually no difference between Pure JavaScript and Vanilla JavaScript": no, there isn't, they are the same exact thing, and you should know that before going on a rant. No offense!

@nico3333fr

This comment has been minimized.

nico3333fr commented Mar 18, 2015

Interesting :)

Would it be possible to have the browser support of all Vanilla JS scripts ?

@sbussard

This comment has been minimized.

sbussard commented Jun 24, 2015

This is awesome, thank you!

@son0fhobs

This comment has been minimized.

son0fhobs commented Jul 20, 2015

@porjolovsky beautifully put.

@ghost

This comment has been minimized.

ghost commented Aug 19, 2015

@afzaal-ahmad-zeeshan lmao you can tell you're a jQuery newbie! Vanilla stands for pure in a sense, not completely but that's the jist. Also I'd like to mention that [].forEach.call is slower than doing

var len = this.length;
while(len--)
    //code here

test to provide truthiness is here https://jsperf.com/for-vs-foreach/348 revision #348 provided by myself.

@brunowego

This comment has been minimized.

brunowego commented Sep 5, 2015

Really useful, thanks!

@artemtr

This comment has been minimized.

artemtr commented Mar 22, 2016

thanks man)) very useful)

@Taymindis

This comment has been minimized.

Taymindis commented Jul 18, 2016

why am i getting this error document.querySelectorAll('div:not(div div)'); ?

but jquery is working fine $('div:not(div div)');

@Elyoukey

This comment has been minimized.

Elyoukey commented Oct 12, 2016

i think some selectors are not browser natives, and there is a jquery processing going on top of the default queryselector.

@xnortk

This comment has been minimized.

xnortk commented May 20, 2017

JavaScript reads almost like english, it is beautiful, I love it. The other one, although shorter sometimes, feels annoying and ugly to understand.

@WebTerminator

This comment has been minimized.

WebTerminator commented Jun 21, 2017

Amazing, I am building my first project in vanilla JS. This is really helpful. Thank you

@holic158

This comment has been minimized.

holic158 commented Sep 3, 2017

Thanks. Really.

@SassanKermani

This comment has been minimized.

SassanKermani commented Dec 7, 2017

vanilla js for life

@Ya-Za

This comment has been minimized.

Ya-Za commented Aug 4, 2018

Good job :-)
Instead of:

// Vanilla
[].forEach.call(document.querySelectorAll('a'), function(el) {
  el.addEventListener('click', function() {
    // code…
  })
})

You can write:

// Vanilla
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', function() {
    // code…
  });
});
@Ya-Za

This comment has been minimized.

Ya-Za commented Aug 4, 2018

Instead of:

// jQuery
$('img').filter(':first').attr('alt', 'My image')

You can write:

// jQuery
$('img:first').attr('alt', 'My image')

or:

// jQuery
$('img').first().attr('alt', 'My image')

or more general:

// jQuery
$('img').eq(0).attr('alt', 'My image')
@Ya-Za

This comment has been minimized.

Ya-Za commented Aug 4, 2018

Instead of:

// Vanilla
document.body.appendChild(document.createElement('p'))

You can write:

// Vanilla
document.body.append(document.createElement('p'))
@Ya-Za

This comment has been minimized.

Ya-Za commented Aug 4, 2018

Instead of:

// Vanilla
var wrap = document.getElementById('wrap')
while(wrap.firstChild) wrap.removeChild(wrap.firstChild)

You can write:

// Vanilla
document.getElementById('wrap').innerHTML = '';
@Ya-Za

This comment has been minimized.

Ya-Za commented Aug 4, 2018

Instead of:

// Vanilla
var httpRequest = new XMLHttpRequest()

You can write!

// Vanilla
const xhr = new XMLHttpRequest()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment