Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vanilla JS equivalents of jQuery methods

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

More

Here are a few additional references demonstrating vanilla javascript equivalents of jquery methods:

Also, see the two part series showing equivalents for ...

@yairEO

This comment has been minimized.

Show comment
Hide comment
@yairEO

yairEO Oct 14, 2016

$('#wrap').next() is not the same at all as vanilla nextSibling, but to nextElementSibling, because obviously nextSibling returns text nodes which are irrelevant.

Regarding the example of $('img').filter(':first').attr('alt', 'My image') - nobody in their right mind will use filter like that. you would simply do:

$('img:first')
$('img').eq(0)
$('img:eq(0)')

would be nice to add vanillia of wrap() method and data() method for storing data on a cached object

yairEO commented Oct 14, 2016

$('#wrap').next() is not the same at all as vanilla nextSibling, but to nextElementSibling, because obviously nextSibling returns text nodes which are irrelevant.

Regarding the example of $('img').filter(':first').attr('alt', 'My image') - nobody in their right mind will use filter like that. you would simply do:

$('img:first')
$('img').eq(0)
$('img:eq(0)')

would be nice to add vanillia of wrap() method and data() method for storing data on a cached object

@brmendez

This comment has been minimized.

Show comment
Hide comment
@brmendez

brmendez Apr 27, 2017

$('selector').load() would be nice 👍

brmendez commented Apr 27, 2017

$('selector').load() would be nice 👍

@filipe-torres

This comment has been minimized.

Show comment
Hide comment
@filipe-torres

filipe-torres May 31, 2017

@yairEO ,
I found a good JQuery wrap() method in plain Javascript: [(https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28/)]

@brmendez ,
there is an alternative for JQuery load() method: loadPageSection.js
[(https://gist.github.com/lazamar/f213d94d08a8212bb0a59a4ec2fbc964)]

filipe-torres commented May 31, 2017

@yairEO ,
I found a good JQuery wrap() method in plain Javascript: [(https://plainjs.com/javascript/manipulation/wrap-an-html-structure-around-an-element-28/)]

@brmendez ,
there is an alternative for JQuery load() method: loadPageSection.js
[(https://gist.github.com/lazamar/f213d94d08a8212bb0a59a4ec2fbc964)]

@dustinpoissant

This comment has been minimized.

Show comment
Hide comment
@dustinpoissant

dustinpoissant Jun 20, 2017

I am rewriting one of my projects that has jQuery as a dependency to not have any dependencies. I was googling each line I needed to change until I found this. This is very useful, thank you.

dustinpoissant commented Jun 20, 2017

I am rewriting one of my projects that has jQuery as a dependency to not have any dependencies. I was googling each line I needed to change until I found this. This is very useful, thank you.

@AaronKWalker

This comment has been minimized.

Show comment
Hide comment
@AaronKWalker

AaronKWalker Jun 27, 2017

I'm currently learning javascript and jQuery. This helps out tremendously! Thank you!

AaronKWalker commented Jun 27, 2017

I'm currently learning javascript and jQuery. This helps out tremendously! Thank you!

@xilin

This comment has been minimized.

Show comment
Hide comment
@xilin

xilin Jan 19, 2018

Base on jQuery's doc

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

These methods will execute code, while the vanilla method will not eval scripts.

xilin commented Jan 19, 2018

Base on jQuery's doc

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

These methods will execute code, while the vanilla method will not eval scripts.

@ameenaziz

This comment has been minimized.

Show comment
Hide comment
@ameenaziz

ameenaziz Feb 1, 2018

$(btn[index++]).click();
whats evq for that?

ameenaziz commented Feb 1, 2018

$(btn[index++]).click();
whats evq for that?

@imlinus

This comment has been minimized.

Show comment
Hide comment
@imlinus

imlinus Feb 19, 2018

document.querySelector(btn[index++]).click();

imlinus commented Feb 19, 2018

document.querySelector(btn[index++]).click();

@daphnedeng

This comment has been minimized.

Show comment
Hide comment
@daphnedeng

daphnedeng Jun 7, 2018

how about eq() ? What is eq() is vanilla js?

daphnedeng commented Jun 7, 2018

how about eq() ? What is eq() is vanilla js?

@grestart

This comment has been minimized.

Show comment
Hide comment
@grestart

grestart Jun 27, 2018

what about this?

$( document ).ajaxComplete(function() {
// code here to change element, witch is loaded with ajax
});

grestart commented Jun 27, 2018

what about this?

$( document ).ajaxComplete(function() {
// code here to change element, witch is loaded with ajax
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment