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"/>
