What is the difference between JavaScript and jQuery?

jQuery is a JavaScript library.

Read

wiki-jQuery, github, jQuery vs. javascript?

What is JQuery?

Before JQuery, developers would create their own small frameworks (the group of code) this would allow all the developers to work around all the bugs and give them more time to work on features, so the JavaScript frameworks were born. Then came the collaboration stage, groups of developers instead of writing their own code would give it away for free and creating JavaScript code sets that everyone could use. That is what JQuery is, a library of JavaScript code. The best way to explain JQuery and its mission is well stated on the front page of the JQuery website which says:

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

As you can see all JQuery is JavaScript. There is more than one type of JavaScript set of code sets like MooTools it is just that JQuery is the most popular.

Which is the best JavaScript or JQuery is a contentious discussion, really the answer is neither is best. They both have their roles I have worked on online applications where JQuery was not the right tool and what the application needed was straight JavaScript development. But for most websites JQuery is all that is needed. What a web developer needs to do is make an informed decision on what tools are best for their client. Someone first coming into web development does need some exposure to both technologies just using JQuery all the time does not teach the nuances of JavaScript and how it affects the DOM. Using JavaScript all the time slows projects down and because of the JQuery library has ironed most of the issues that JavaScript will have between each web browser it makes the deployment safe as it is sure to work across all platforms.

---

JavaScript is a language. jQuery is a library built with JavaScript to help JavaScript programmers who are doing common web tasks.

See here.

Javascript is a programming language whereas jQuery is a library to help make writing in javascript easier. It's particularly useful for simply traversing the DOM in an HTML page.

jQuery is a JavaScript library, that can be used for communicating (selecting html elements, attaching event listeners, animations etc.) with the DOM, creating and consuming AJAX requests, as well as other things in a more easier way rather than using plain JavaScript. jQuery is written in JavaScript. It should be mentioned that browsers parse only HTML, CSS and JavaScript files. Hence, all JavaScript libraries/frameworks (jQuery, Knockout, Angular) are written in JavaScript or in languages like TypeScript that transconpiles to JavaScript (e.g. Angular 2). They provide you the opportunity to write less lines of codes or to create interfaces following patterns like MVC (e.g. Angular), MVVM (e.g. Knockout) as well as other patterns, but under the hood, they are all result in a JavaScript file.

An example in order to understand why using jQuery you write less do more is the following.

Let we have the following input element

<input id="button1" type="button" value="clickMe"/> 

Also, let that we want when someone clicks on the button to be notified through an alert box showing to the user a 'Hello' message.

If we had to do this using plain JavaScript, we would have written the following:

document.getElementById("button1")
        .addEventListener('click', function(){ 
            alert("Hello");
        });

On the other hand, if we were using jQuery, we would had achieved the same result by just writing this:

$('#button1').click(function(){ 
    alert("Hello"); 
});

Using jQuery makes things more clear than using plain JavaScript for the same purpose. (write less do more is jQuery's moto)

Furthermore, jQuery handles pretty well the theme of browser compatibility, you can use their API pretty easily without wondering too much as if you should do in case of using plain JavaScript.

Below I have added snippets for the code above:

document.getElementById("button1")
        .addEventListener('click', function(){ 
            alert("Hello");
        });

<input id="button1" type="button" value="clickMe"/>

$('#button1').click(function(){ alert("Hello"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button1" type="button" value="clickMe"/>