Is there an easy way to convert jquery code to javascript? [closed]

Question

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

Jegger

I can't imagine why you would ever want to do this. But you can always use the vanilla JavaScript DOM to do in ten lines what you could do in one using jQuery. – Dummy

i was basically after something that did convert the 1 jquery line into 10 vanilla javascript lines...for cases when jquery isn't available... – Jegger

Even if you can't use a script tag to include jQuery, you could always prepend a minified verison to the source file. I can't see any reason why jQuery wouldn't be available other than some sort of corporate politics. – Oxidate

I can see good use for this as well. Suppoe you use only about 10-100 lines in javascript with jQuery. It would save bandwidth by recompiling and substituting functions to the core methods and thus not load everything else from jQuery. – Boreal

I got the same question. Many answered that jQuery is more simple, but a developer who already familiar with JavaScript will got some problem understanding the symbol/abbreviation in jQuery. And my reason for asking is, for some reason the jQuery script I got won't work in Blackberry. It's an Ajax-upload script. So I think I need to translate it to Javascript :( – Olia

I'm attempting to make a JS-kludge inside an existing app, and all of the inbuilt JS functions of the app break if I include jQuery. It's a poorly written app (Atlassian's JIRA), and I'm sure they're to blame, but I need this just the same. – Bruce

Actually, I was able to use jQuery.noConflict() and use jQuery, after all! – Bruce

Aye, i just found this quite impressive tutorial about jquery to javascript conversion : net.tutsplus.com/tutorials/javascript-ajax/… – Zhao

@Milkywayspatterns that's a really helpful link...you should probably post it as an answer (if you still can) – Jegger

@Jegger i just did. – Zhao

This is make sense, since Javascript itself is FAR MORE FASTER than Jquery. – Diamagnetism

I know this is old but interested too, have a pure AngularJS app which needs jQuery for one thing, PITA to have to load jQuery just for it – Soliloquy

I have right now a real situation where I have to migrate jQuery to to good old JavaScript... The thing is a complete DOM must be generated via Java with its own tags, css and jquery. A PDF will be later created from this DOM using HTML Unit. The problem is the time this PDF takes using jQuery is too long. JavaScript takes five or six times less... and this PDF must be created online in real time. – Kaoliang

I find it helpful youmightnotneedjquery.com – Smidgen

Please check thi here – Impossibly

Answer 1

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.

Between

And you have to be sure to test against various versions of each browser. – Toggery

Indeed. Half the point of jQuery is that it sorts out all the horribe cross-browser JS compatibility issues for you. – Mangan

that is true, and why i use jquery whenever i can. this particular application is an intranet only environment with a company wide standard workstation setup...politics prevent jquery being used in the app! – Jegger

How does the choice of desktop workstation influence jQuery use? – Isiahisiahi

I'm a bit how surprised at how dominant jQuery is on StackOverflow. Do y'all think that's representative of where programmers are going with JavaScript? Looks like jQuery is just plain mauling Prototype, mooTools, Dojo, ExtJS, etc. And those other libraries are all pretty damned useful. – Toggery

"How does the choice of desktop workstation influence jQuery use?" I don't think it does, except that jQuery is in Microsoft's tools, and is going to be supported by Script# in a release that's supposed to come along later this year. – Toggery

If jquery is being pushed out by politics, is there some other similar framework you can push in its place? Anything you can do to abstract away some of that drudgery is a good thing. – Skaw

Sorry, two seperate points: 1. Adding a javascript library into this application would require paperwork beyond its worth. it's crazyness. That's the politics game 2. The intranet environment has a standard workstation which means all applications on the intranet have a configuration that is to be assumed...it's all a bit backwards...So Internet Explorer 6, windows xp...installing other software is restricted (this restriction doesn't apply to developer machines). – Jegger

a further point...knowing jQuery (insert preferred library here) clearly is no substitute for understanding the dom and javascript...so learning hat is on. – Jegger

I sympathize with the politics of using an open-source library for some organizations. In the end the time you're spending rewriting plainly (and likely buggily) into plain DOM traversal and JS is wasted money for the company. You might make the case that large companies, including very conservative ones, use jQuery: docs.jquery.com/Sites_Using_jQuery: Oracle, Google, Amazon, Dell, Bank of America, Intuit, Salesforce. These are hardly hippie communist companies. These are very real companies whose legal departments have probably done their homework and accepted jQuery... – Sussi

@davidsleeps: It's good to learn the underlying model, even if you end up using a library later. – Toggery

... you have to pick your battles, but if you have complex enough web apps or widgets on your intranet using a library, jQuery or otherwise is going to speed your development and save the company money. – Sussi

@Sussi it makes sense to me and would save time/money for the company...but the people who make these decisions aren't programmers and if the benefit isn't obvious to the user then it can be hard to justify...changing things internal to an application can be tricky... – Jegger

@Jegger - jQuery is sanctioned by Microsoft...It is included in Visual Studio 2008, which technically makes it a "Microsoft" tool. Would that make your employer feel better? – Lindsylindy

Even if you could get Sizzle, Peppy, Selector.js, or Sly in as a selector engine, you'd be way ahead of the game. How about inline? Or at least look at them all and write your own selector engine. Check out Selector.js--it's TINY! – Toggery

@Jegger "the people who make these decisions aren't programmers and if the benefit isn't obvious to the user then it can be hard to justify...changing things internal to an application can be tricky" It takes political skill to do that. Be an advocate for your work and professionalism! Robert Harvey's point is excellent: MSFT has embraced jQuery. There is no more corporate IT choice than Microsoft, except maybe IBM or Oracle. I have a hard time working in an environment where my technical judgment's questioned by nontechnical folk. I wish you well regardless - sounds like hard situation. – Sussi

On the other hand, if your target is ONLY ie6, at least you don't have to worry about testing in the other browsers. – Toggery

It's a great point about Microsoft adopting/endorsing jQuery as it will be a big win and make my case a lot easier. I've had that blog post from ScottGu announcing it saved away for a little while now! Developing for only ie6 actually is a horrible thing, because you feel that anything you write just won't work if it were to be used in another browser... – Jegger

What is the difference to your company between jquery and a whole bunch of javascript that you wrote to do the same thing? Its not like you are installing anything, coding in a new language or adding ANY dependancies. This is honestly the stupidest thing I've heard, allowing javascript but not jQuery. jQuery IS JAVASCRIPT! – Cotta

Just use jquery and don't tell anyone. If they're not technical enough to understand why you want to use it, they're not technical enough to discover you used it. You could even just rename the file to mylib.js for further cover. – Pedicular

@Cotta - you mustn't have your source code audited...i understand that jQuery is javascript, but if something doesn't work in the jQuery code, jQuery will release new updates which then means that any applications using it also need updating which requires change controls and approvals...further more, you are relying on code written by a third party for which you have no support agreement... – Jegger

Support agreements, I've noticed, aren't worth the paper they're written on. But maybe I just haven't worked in the biz long enough to see them pay off. – Pedicular

Often, I'll have scripts I've written, and there's only a single jQuery line. At this point, including all of jQuery is kind of (extremelly) silly. I'd rather just refactor it to standard Javascript and be done with it. Also, from a coding perspective of someone who flips back and forth between JS and PHP, I've never liked jQuery's $ syntax. Hate it with a bleeding passion in fact. I've lost track the number of times I've been in PHP storm making PHP generate dynamically generated JS and THAT STUPID $ throws off the ENTIRE interpretation of my heredoc. – Somme

Also, despite "jQuery is shorter!" mantra I hear a lot, i've often taken two or three lines of jQuery that someone has given to me and been able to write it in one line of plain javascript. Not saying jQuery doesn't allow for shorter scripts, just saying it doesn't always result in shorter scripts. – Somme

Answer 2

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.

Nomology

Answer 3

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.

Zhao

the link has changed: code.tutsplus.com/tutorials/… – Garaway

Answer 4

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.

Sumption

Answer 5

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

Nert

others have actual answers – Burchett

Also, although JQuery makes code more concise (usually) , it's debateable whether it actually makes it easier. jQuery can make some code harder to mentally parse. For example, <input onclick="myfunction(this)"> with myfunction(field){ field.value = "3"; } makes more sense to me than <input id='thing'> with (function ($) { $(thing).click({ $(thing).val("3");});})() – Somme