# JavaScript equivalent to jQuery basics

... because loading 92Ko of jQuery to use less than 2% of it kind of sucks. Mostly inspired by Doing without jQuery and From jQuery to JavaScript: A Reference .

## Selectors

### $() (IE8+)

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

### $('#foo')

    document.getElementById('foo')

### $('.bar')

    document.querySelectorAll('.bar') // IE8+

    document.getElementsByClassName('bar') // IE9+

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

    document.getElementById('foo').nextElementSibling // IE9+

    var next = document.getElementById('foo').nextSibling;
    while( next.nodeType > 1 ) next = next.nextSibling

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

    document.getElementById('foo').classList.add('bar') // IE10+

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

    document.getElementById('foo').classList.remove('bar') // IE10+

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

    document.getElementById('foo').classList.contains('bar') // IE10+

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

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

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

    document.getElementById('foo').classList.toggle('bar') // IE10+

    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'

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

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

    document.getElementById('foo').style.backgroundColor = 'red'

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

    document.addEventListener('DOMContentLoaded', function() { ... }); // IE9+

    document.onreadystatechange = function() {
        if (document.readyState === 'complete') {
            // DOM is ready!
        }
    };

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

    document.getElementById('foo').addEventListener('click', function() { ... }); // IE9+

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

## Others

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

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

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

    var div = document.createElement('div');
    div.id = 'a';
    div.appendChild(document.createTextNode('b'));
    document.getElementById('foo').appendChild(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'))