Skip to content

Latest commit

 

History

History
261 lines (224 loc) · 6.15 KB

README.md

File metadata and controls

261 lines (224 loc) · 6.15 KB
Raw

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

$()

(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:

Inspired by:

More resources

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