JavaScript equivalent to jQuery basics

Intro

jQuery is a great cross-platform JavaScript library for DOM selection, manipulation and other cool things, but usually you load 84kb and use less than 3%. So maybe you want try another cool alternative, use native JavaScript with their methods... Also you can load jQuery using CDN... But again, maybe you want to try native JavaScript...

Index

• Selectors
• Attributes
• Styles
• Effects
• Events
• Others

Selectors

$()

(IE 8+)

var $ = function(el) {
    return document.querySelectorAll(el);
};

$('#foo')

document.getElementById('foo')

$('.foo')

IE 8+

document.querySelectorAll('.foo')

IE 9+

document.getElementsByClassName('foo')

$('span')

document.getElementsByTagName('span')

$('#foo span')

document.getElementById('foo').getElementsByTagName('span')

$('html')

document.documentElement

$('head')

document.head

$('body')

document.body

$('#foo').parent()

document.getElementById('foo').parentNode

$('#foo).children()

document.getElementById('foo').children

$('#foo').next()

IE 9+

document.getElementById('foo').nextElementSibling

Attributes

$('#foo').html()

document.getElementById('foo').innerHTML

$('#foo').html('Hello world!')

document.getElementById('foo').innerHTML = 'Hello world!'

$('#foo').val()

document.getElementById('foo').value

$('#foo').addClass('bar')

document.getElementById('foo').className += ' bar'

IE 10+

document.getElementById('foo').classList.add('bar')

$('#foo').removeClass('bar')

IE 10+

document.getElementById('foo').classList.remove('bar')

function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}

removeClass(document.getElementById('foo'), 'bar')

$('#foo').hasClass('bar')

IE 10+

document.getElementById('foo').classList.contains('bar')

function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

hasClass(document.getElementById('foo'), 'bar')

$('#foo').toggleClass('bar')

IE 10 +

document.getElementById('foo').classList.toggle('bar')

function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace( ' ' + className + ' ' , ' ' );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

toggleClass(document.getElementById('foo'), 'bar')

Styles

$('#foo').hide()

document.getElementById('foo').style.display = 'none'

$('#foo').css('background-color', red')

document.getElementById('foo').style['background-color'] = 'red'
    
document.getElementById('foo').style.backgroundColor = 'red'

Effects

$('#foo').fadeOut(750)

function fadeOut(ms, el) {
    var opacity = 1,
        interval = 50,
        gap = interval / ms;

    function func() { 
        opacity -= gap;
        el.style.opacity = opacity;

        if(opacity <= 0) {
            window.clearInterval(fading); 
            el.style.display = 'none';
        }
    }

    var fading = window.setInterval(func, interval);

}

fadeOut(750, document.getElementById('foo'))

$('#foo').fadeIn(750)

function fadeIn(ms, el) {
    var opacity = 0,
        interval = 50,
        gap = interval / ms;

    el.style.display = 'block';
    el.style.opacity = opacity;
    
    function func() { 
        opacity += gap;
        el.style.opacity = opacity;
        if(opacity >= 1) {
            window.clearInterval(fading);
        }
    }
    
    var fading = window.setInterval(func, interval);
}

fadeIn(750, document.getElementById('foo'))

Events

$(document).ready

IE 9+

document.addEventListener('DOMContentLoaded', function() { ... })

$('#foo').on('click', function() { ... })

document.getElementById('foo').onclick = function() { ... }

IE 9 +

document.getElementById('foo').addEventListener('click', function() { ... })

Others

$('#foo').after('<div id="a">b</div>')

document.getElementById('foo').insertAdjacentHTML('beforeend', '<div id="a">b</div>')
    
document.getElementById('foo').innerHTML += '<div id="a">b</div>'

$('#foo').prepend('<div id="a">b</div>')

document.getElementById('foo').insertAdjacentHTML('afterbegin', '<div id="a">b</div>')

$('#foo').before('<div id="a">b</div>')

document.getElementById('foo').insertAdjacentHTML('beforebegin', '<div id="a">b</div>')

$('#foo').after('<div id="a">b</div>')

document.getElementById('foo').insertAdjacentHTML('afterend', '<div id="a">b</div>')

$('#foo').remove()

document.getElementById('foo').parentNode.removeChild(document.getElementById('foo'))

Authors

Taking from:

• JavaScript equivalent to jQuery basics

Inspired by:

• Doing without jQuery
• From jQuery to JavaScript: A Reference

More resources

A great article was published here: Cheat sheet for moving from jQuery to vanilla JavaScript