Skip to content

Instantly share code, notes, and snippets.

@liamcurry
Created May 4, 2012 19:56
Show Gist options
  • Save liamcurry/2597326 to your computer and use it in GitHub Desktop.
Save liamcurry/2597326 to your computer and use it in GitHub Desktop.
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)
@tracend
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

@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
Copy link

Interesting :)

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

@sbussard
Copy link

This is awesome, thank you!

@son0fhobs
Copy link

@porjolovsky beautifully put.

Copy link

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
Copy link

Really useful, thanks!

@artemtr
Copy link

artemtr commented Mar 22, 2016

thanks man)) very useful)

@Taymindis
Copy link

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

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

@Elyoukey
Copy link

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

@hribeirosantana
Copy link

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

@WebTerminator
Copy link

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

@holic158
Copy link

holic158 commented Sep 3, 2017

Thanks. Really.

@SassanKermani
Copy link

vanilla js for life

@Ya-Za
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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