Jquery functions equivalent in pure javascript

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/

"Is there something like this somewhere on the web?" just see jquery script source: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js — A. Wolff, Jan 09 '13 at 14:19
I've removed your references to [PURE](http://stackoverflow.com/tags/pure-js/info) as it isn't what you seem to think it is. — Quentin, Jan 09 '13 at 14:19
If you ask me, that's a lot of work for no practical benefit. — JJJ, Jan 09 '13 at 14:20
Not to nitpick, but technically writing things in jQuery *is* pure javascript :) — jbabey, Jan 09 '13 at 14:25
There's nothing inherently bad about using jQuery. It's very lightweight, as these things go. In fact, the [Google CDN](http://stackoverflow.com/q/12608242/901048) makes it so convenient that you'd have a hard time justifying NOT using it. — Blazemonger, Jan 09 '13 at 14:25
@Yukulélé - I've created some javascript snippets that are equivalent to the jQuery functions you've requested. They should help you along and using pure JS. — Louis Ricci, Jan 09 '13 at 14:35
jQuery is a very good lib, I learned some thinks about js with it. But today browsers have a robust common API making jQuery not very indispensable for some basic use. But with practice, it is difficult to get rid of this habit. — Yukulélé, Jan 09 '13 at 14:39
This question makes no sense. If you want to learn how a specific jQuery function works, you learn native DOM manipulations, you study how jQuery works (by looking at its source code) and you build your own standalone function. The jQuery source IS the doc for how it works. There is no separate doc. — jfriend00, Jan 09 '13 at 14:44
it make sense. jQuery is (for me) like bike stabilizer wheels, very good to learn serious js, but some time it's not needed. read more here: http://youmightnotneedjquery.com/ — Yukulélé, Feb 09 '15 at 10:46

score 6 · Answer 1 · edited May 23 '17 at 11:53

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(){}));

+1. Personally for bind, I'd check for [`fn.bind`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind) and use it before doing `fn.apply`. — Paul S., Jan 09 '13 at 14:55

score 2 · Answer 2 · answered Jan 09 '13 at 14:23

If you are also looking for the same legacy support, then no, there is no such thing for many reasons, such as:

jQuery re-uses many of it’s methods internally so you will have a hard time finding a single, independent api call.
jQuery often runs multiple support checks whether a browser natively supports a method before applying fallbacks for legacy support. You will need to do the same.

However, you might be able to pull out single methods and make a correct vanilla implementation by browsing the source code at github: https://github.com/jquery/jquery but it would be quite time-consuming.

That said, many many dom manipulations are so simple that you don’t need jQuery in the first place, such as adding a class:

elem.className += 'class'

But reverse-engineering jQuery would not be a smart way of getting rid of jQuery dependency.

Note that jQuery checks for edge cases that are not immediately obvious, for example `.addClass('class')` first checks if the element already has that class and doesn't add it in that case. — JJJ, Jan 09 '13 at 14:32
@Juhana good point, and that is exactly what I mean. If you "translate" jQuery methods into vanilla JS, you probably end up with less readable code that checks for cases that never applies to you anyway. The whole point IMO of loosing jQuery is that you can write slimmer code that suits your project and coding style (although I’m not personally a vanilla fan). — David Hellsing, Jan 09 '13 at 16:52

score 1 · Answer 3 · edited Jan 09 '13 at 14:23

1

Maybe you're looking for jQuery source code?

http://docs.jquery.com/Source_Code

edited Jan 09 '13 at 14:23

Cerbrus

70,800
18
132
147

answered Jan 09 '13 at 14:18

beder

1,086
5
10

1

250 kilobytes of code is not a document or useful as a reference. – Quentin Jan 09 '13 at 14:20
Yes, but some jquery function use other jQuery public/private jQuery functions, and it need some time to unravel and recreat clean pur-js function – Yukulélé Jan 09 '13 at 14:21
3

And when you have done that, you would essentially have recreated jQuery. Would this be worth the effort? – Frédéric Hamidi Jan 09 '13 at 14:22

score 0 · Answer 4 · answered Jan 09 '13 at 14:25

I've never seen one. JQuery takes care of a lot of browser differences, so to write what you would normally write with a simple command in JQuery might require quite a bit more code in plain old JavaScript.

With that in mind, I think it's admirable that you want to wean yourself off a dependence on jQuery and learn more about methods native to JavaScript.

Looking at the code behind JQuery might help to get you started. Otherwise, why not come back to this site when you have a specific question. I'm sure people here could tell you about .detach(), .insertAfter(), .on(), etc. but each one would probably require a separate question and some explanation about what you're trying to do first.

Hope this helps (or is encouraging at least).

Jquery functions equivalent in pure javascript

Edit :

4 Answers4

Linked