// 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…
})
})// jQuery
var divs = $('div')
// Vanilla
var divs = document.querySelectorAll('div')// jQuery
var newDiv = $('<div/>')
// Vanilla
var newDiv = document.createElement('div')// jQuery
$('img').filter(':first').attr('alt', 'My image')
// Vanilla
document.querySelector('img').setAttribute('alt', 'My image')// jQuery
newDiv.addClass('foo')
// Vanilla
newDiv.classList.add('foo')// jQuery
newDiv.toggleClass('foo')
// Vanilla
newDiv.classList.toggle('foo')// 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)// 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// jQuery
$.get('//example.com', function (data) {
// code
})
// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
// code
}
httpRequest.open('GET', url)
httpRequest.send()// 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))// 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)Here are a few additional references demonstrating vanilla javascript equivalents of jquery methods:
Also, see the two part series showing equivalents for ...
-
[Events, Ajax and Utilities](http://www.sitepoint.com/jquery-vs-raw- javascript-3-events-ajax/)
This is why jQuery will never die. Why would any programmer want to use vanilla JS? Three times as many characters in vanilla Javascript to perform the same function as jQuery. Ridiculous. The performance difference doesn't justify the overly complicated and difficult-to-read syntax of vanilla JS.