Is there an easy way to convert jquery code to javascript?

JavascriptJqueryCode Conversion

Javascript Problem Overview


Is there an easy way to convert jQuery code to regular javascript? I guess without having to access or understand the jQuery source code.

Javascript Solutions


Solution 1 - Javascript

This will get you 90% of the way there ; )

window.$ = document.querySelectorAll.bind(document)

For Ajax, the Fetch API is now supported on the current version of every major browser. For $.ready(), DOMContentLoaded has near universal support. You Might Not Need jQuery gives equivalent native methods for other common jQuery functions.

Zepto offers similar functionality but weighs in at 10K zipped. There are custom Ajax builds for jQuery and Zepto as well as some micro frameworks, but jQuery/Zepto have solid support and 10KB is only ~1 second on a 56K modem.

Solution 2 - Javascript

The easiest way is to just learn how to do DOM traversing and manipulation with the plain DOM api (you would probably call this: normal JavaScript).

This can however be a pain for some things. (which is why libraries were invented in the first place).

Googling for "javascript DOM traversing/manipulation" should present you with plenty of helpful (and some less helpful) resources.

The articles on this website are pretty good: http://www.htmlgoodies.com/primers/jsp/

And as Nosredna points out in the comments: be sure to test in all browsers, because now jQuery won't be handling the inconsistencies for you.

Solution 3 - Javascript

I just found this quite impressive tutorial about jquery to javascript conversion from Jeffrey Way on Jan 19th 2012 *Copyright © 2014 Envato* :

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

> Whether we like it or not, more and more developers are being > introduced to the world of JavaScript through jQuery first. In many > ways, these newcomers are the lucky ones. They have access to a > plethora of new JavaScript APIs, which make the process of DOM > traversal (something that many folks depend on jQuery for) > considerably easier. Unfortunately, they don’t know about these APIs! > > In this article, we’ll take a variety of common jQuery tasks, and > convert them to both modern and legacy JavaScript.

I proposed it in a comment to OP, and after his suggestion, i publish it has an answer for everyone to refer to.

Also, Jeffrey Way mentioned about his inspiration witch seems to be a good primer for understanding : http://sharedfil.es/js-48hIfQE4XK.html

Has a teaser, this document comparison of jQuery to javascript :

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

You should take a look.

Solution 4 - Javascript

I can see a reason, unrelated to the original post, to automatically compile jQuery code into standard JavaScript:

16k -- or whatever the gzipped, minified jQuery library is -- might be too much for your website that is intended for a mobile browser. The w3c is recommending that all HTTP requests for mobile websites should be a maximum of 20k.

w3c specs for mobile

So I enjoy coding in my nice, terse, chained jQuery. But now I need to optimize for mobile. Should I really go back and do the difficult, tedious work of rewriting all the helper functions I used in the jQuery library? Or is there some kind of convenient app that will help me recompile?

That would be very sweet. Sadly, I don't think such a thing exists.

Solution 5 - Javascript

> Is there an easy way to convert jQuery > code to regular javascript?

No, especially if:

> understanding the > examples of javascript solutions > written in jQuery [is] hard.

JQuery and all the frameworks tend to make understanding the code easier. If that's difficult to understand, then vanilla javascript will be torture :)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondavidsleepsView Question on Stackoverflow
Solution 1 - JavascriptIndoleringView Answer on Stackoverflow
Solution 2 - JavascriptPim JagerView Answer on Stackoverflow
Solution 3 - JavascriptMilche PaternView Answer on Stackoverflow
Solution 4 - JavascriptBill FisherView Answer on Stackoverflow
Solution 5 - JavascriptRyan FlorenceView Answer on Stackoverflow