joyrexus/README.md

Forked from liamcurry/gist:2597326

Last active November 5, 2024 14:17

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/joyrexus/7307312.js"></script>
Save joyrexus/7307312 to your computer and use it in GitHub Desktop.

Download ZIP

Vanilla JS equivalents of jQuery methods

Raw

README.md

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)

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

From jQuery to JS: A Reference

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

DOM & Forms
[Events, Ajax and Utilities](http://www.sitepoint.com/jquery-vs-raw- javascript-3-events-ajax/)

Asharif88 commented Jul 4, 2019

@jfudman

love it! Maybe add a $(el).closest() equivalent?

It's also .closest() https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

ColtHands commented Jul 15, 2019

While this may be true, the browser support for many of those methods are somewhat different. Methods like classList.add may not be supported in older browsers.

Just take a moment to see how long and tedious polyfill for classList is.

mzaini30 commented Mar 19, 2020

Fetch is also widely supported now. Fully supported with a relatively lightweight pollyfill for IE. So AJAX calls are just as easy with Vanilla JS now as with jQuery. :)

Yes....

jsergiu commented May 22, 2020 •

edited

Loading

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

`
// You can do something like:
< div class="include" data-file="./components/footer.html">

document.querySelectorAll('include').forEach((tag) => {
fetch(tag.dataset.file)
.then((r) => r.text())
.then((r) => $(tag).replaceWith($(r)))
})
`

bigabdoul commented Sep 14, 2020 •

edited

Loading

$('#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

An implementation of jQuery's wrap() might be as follows:

In HTML:
<input type="text" id="textInput"/>

In jQuery:
$('#textInput').wrap('<div class="wrapped-input"></div>');

In JS:

/**
 * Creates a tag element, appends the specified child element to it and
 * then appends the created tag to the child's parent element.
 * @param {HTMLElement} child The child element to be contained in a new
 * wrapper element.
 * @param {string} Optional: The name of the tag element to create.
 * @returns HTMLElement The newly created tag element wrapped around child.
 */
function wrap(child, tag) {
    if (!tag) tag = "div";
    const parent = child.parentElement;
    const elm = document.createElement("" + tag); // ensures that 'tag' is really a string
    elm.appendChild(child);
    parent.appendChild(elm);
    return elm;
}

Usage:

wrap(document.getElementById('textInput')).setAttribute('class', 'wrapped-input');

oohkumar commented Nov 19, 2020 •

edited

Loading

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.

ghost commented Jan 2, 2021

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.

For the same reason people sometimes prefer to use vanilla css isntead of a framework. even if you are only using 1 method of jquery, the whole library gets loaded along with the page, which makes for a really heavy page

pthurmond commented Apr 24, 2021

While I'm glad for the examples to learn more vanilla js, I gotta say that every single one is far more verbose then the jQuery equivalent. Some are even excessively so. That alone makes me want to stick with jQuery. I just don't see any good reason to switch to Vanilla JS unless I am using a framework like Vue.js. I just haven't heard any truly compelling arguments.

johnsfuller commented Apr 29, 2021