Jquery functions equivalent in pure javascript [closed]

Question

I'm looking for a doc with all jQuery functions and their equivalents in APIs provided natively by browsers.

Sometime I only need a specific jQuery function (.detach(), .insertAfter(), .on(), ...) and I load jQuery only for this.

I would like to stop my jQuery dependence, and a jQuery to non-library translator would help me a lot (and many people, I think).

Is there something like this somewhere on the web?

Edit :

I found it : http://youmightnotneedjquery.com/

Answer 1

You only call those jQuery functions after getting the jQuery object $(SELECTOR). If you saying you don't need the jQuery selector code and just want functions that take (perhaps) an HTML DOM element you'd have to rip it from the jQuery source code (http://code.jquery.com/jquery-latest.js), with dependencies and just the size and complexity this can be a painful process.

JS equivalents:

.detach - .removeChild

var par = elm.parentNode;
par.removeChild(elm);

.insertAfter - .insertBefore How to do insert After() in JavaScript without using a library?

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

.on - addEventListener / attachEvent

if(elm.addEventListener)
    elm.addEventListener(EVENT_NAME, function() {}, false);
else
    elm.attachEvent('on' + EVENT_NAME, function() {});

Now if you want to bind events so that the handler has a THIS reference to a specific object...

function bind( scope, fn ) {
    return function () {
        fn.apply( scope, arguments );
    };
}
if(elm.addEventListener)
    elm.addEventListener(EVENT_NAME, bind(SCOPE_OBJECT, function(){}), false);
else
    elm.attachEvent('on' + EVENT_NAME, bind(SCOPE_OBJECT, function(){}));