Introduction

JavaScript and jQuery both starts with the alphabet ‘J’, yet they are different in many ways as they are similar. Many developers want to know the difference between JavaScript and jQuery, if one is better than the other in some ways and which one should they use in their projects.

JavaScript:

JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It has also become common in server-side programming, game development and the creation of desktop applications.[Wiki]

jQuery:

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open source software, licensed under the MIT License. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. Used by over 80% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.[Wiki]

Javascript Vs Jquery

JavaScript has long been the subject of many heated debates about whether it is possible to use it while still adhering to best practices regarding accessibility and standards compliance.
The answer to this question is still unresolved, however, the emergence of JavaScript frameworks like jQuery has provided the necessary tools to create beautiful websites without having to worry (as much) about accessibility issues.

I’d strongly recommend going for JQuery (or another JavaScript library) instead of raw JavaScript. You can do very complex things with one line of JQuery that would take a lot of coding and debugging if you were to use raw JavaScript. Ultimately you will need an understanding of the underlying language to take full advantage of JQuery but if you want something you can deploy today, start with JQuery rather than JavaScript.

Performance

jQuery in terms of speed is quite fast for modern browsers on modern computers. So is pure JavaScript. Both run drastically slower on older browsers and machines. Pure Javascript to access the DOM can be faster as you can cut the overhead that jQuery has on this. However it doesn’t always have to be faster as you could write some major mistakes that slow things down again. jQuery on the other hand has been battle tested over the past few years and is proven to be fast and consistent.

[Source: jsperf.com]

The main advantages to adding jQuery to your toolset would be:

• Browser compatibility – doing something like .attr() is much easier than the native alternatives, and won’t break across browsers.
• Simplification of usually complicated operations – if you’d like to see a well written cross browser compatible version of an XHR method, take a look at the source for $.ajax – for this method alone it’s almost worth the overhead of jQ.
• DOM selection – simple things like binding events & selecting DOM elements can be complicated and differ per-browser. Without a lot of knowledge, they can also be easily written poorly and slow down your page.
• Access to future features – things like .indexOf and .bind are native javascript, but not yet supported by many browsers. However, using the jQuery versions of these methods will allow you to support them cross browser.

To Summarize

jQuery like any other good JavaScript frameworks supplies you with functionality independent of browser platform wrapping all the intricacies, which you may not care about or don’t want to care about. I definitely recommend JQuery! It is made up of JavaScript libraries and also easily compatible for all browsers. As per my experience I will be glad to give an opinion about JavaScript /jQuery. I agree that developers should have at least some understanding of JavaScript. jQuery and similar libraries might be a good way to get people interested in JavaScript in general. But in the other hand it might actually be a stumbling block – it’s so easy to use jQuery that many don’t need a deeper understanding of JavaScript. The best thing about jQuery is that it is tailored to be simplified. Also, there are many already pre-made plugins, UIs, and widgets. Another important note is that straight JavaScript can take 10-20 times as much development time, requires more debugging, more knowledge of the language and browser compatibility issues, etc.

Yes, straight JavaScript is the best performing method of client-side development, but a library like jQuery will get you to market faster and cheaper, so it’s a better option for a first-run of a product. Custom-code all the script once you’ve established your product and have the revenue to go back and refactor the code.

Don’t forget to tell us which technology you use while developing web application. Please leave your comments, feedback and suggestions in the comments section below.
CodeProject