Vanilla JS vs jQuery

gistfile1.md

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)

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

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

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

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

Interesting :)

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

This is awesome, thank you!

@porjolovsky beautifully put.

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

Really useful, thanks!

thanks man)) very useful)

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

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

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

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

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

Thanks. Really.

vanilla js for life

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

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

Instead of:

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

You can write:

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

Instead of:

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

You can write:

// Vanilla
document.getElementById('wrap').innerHTML = '';

Instead of:

// Vanilla
var httpRequest = new XMLHttpRequest()

You can write!

// Vanilla
const xhr = new XMLHttpRequest()