Create a gist now

Instantly share code, notes, and snippets.

Embed
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.

Show comment
Hide comment
@CastenettoA

CastenettoA Jun 15, 2013

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

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

@harmstyler

This comment has been minimized.

Show comment
Hide comment
@MoOx

This comment has been minimized.

Show comment
Hide comment
@bojanvidanovic

This comment has been minimized.

Show comment
Hide comment
@bojanvidanovic

bojanvidanovic Dec 13, 2013

Thanks for this. Really helpful.

Thanks for this. Really helpful.

@tracend

This comment has been minimized.

Show comment
Hide comment
@tracend

tracend 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

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.

Show comment
Hide comment
@tcelestino

tcelestino 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.

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.

Show comment
Hide comment
@trevorgk

trevorgk 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.

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.

Show comment
Hide comment
@afzaal-ahmad-zeeshan

afzaal-ahmad-zeeshan 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

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

@porjolovsky

This comment has been minimized.

Show comment
Hide comment
@porjolovsky

porjolovsky 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!

@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.

Show comment
Hide comment
@nico3333fr

nico3333fr Mar 18, 2015

Interesting :)

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

Interesting :)

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

@sbussard

This comment has been minimized.

Show comment
Hide comment
@sbussard

sbussard Jun 24, 2015

This is awesome, thank you!

This is awesome, thank you!

@son0fhobs

This comment has been minimized.

Show comment
Hide comment

@porjolovsky beautifully put.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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.

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.

Show comment
Hide comment
@brunowego

brunowego Sep 5, 2015

Really useful, thanks!

Really useful, thanks!

@artemtr

This comment has been minimized.

Show comment
Hide comment
@artemtr

artemtr Mar 22, 2016

thanks man)) very useful)

artemtr commented Mar 22, 2016

thanks man)) very useful)

@Taymindis

This comment has been minimized.

Show comment
Hide comment
@Taymindis

Taymindis Jul 18, 2016

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

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

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.

Show comment
Hide comment
@Elyoukey

Elyoukey Oct 12, 2016

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

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

@hugoribeiros

This comment has been minimized.

Show comment
Hide comment
@hugoribeiros

hugoribeiros 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.

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.

Show comment
Hide comment
@WebTerminator

WebTerminator Jun 21, 2017

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

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

@holic158

This comment has been minimized.

Show comment
Hide comment
@holic158

holic158 Sep 3, 2017

Thanks. Really.

holic158 commented Sep 3, 2017

Thanks. Really.

@SassanKermani

This comment has been minimized.

Show comment
Hide comment
@SassanKermani

SassanKermani Dec 7, 2017

vanilla js for life

vanilla js for life

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment