Difference Between JavaScript and JQuery

JavaScript: It is a major scripting programming language which is used to make websites more responsive and interactive. It is one of the pivoted parts alongside HTML and CSS which are used to create web pages. If HTML & CSS decorates and designed the web-pages so, Javascript makes the web-pages dynamic(we can say it gives them life). JavaScript is a major client-side language. It’s not only confined to websites development but also used in many desktop and server programs ( Node.js is the best-known example) and Some databases, like MongoDB and CouchDB, also use JavaScript. Whenever your browser parses a web page, it’s responsibility is to create a tree-structure presentation in memory.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        <p>A loop with a <mark>continue</mark> statement.</p>
  
        <p>loop will skip the iteration where k = 7.</p>
  
        <p id="maddy"></p>
  
        <script>
            var text = "";
            var k;
            for (k = 0; k < 10; k++) {
                if (k === 7) {
                    continue;
                }
                text += "The number is " + k + "<br>";
            }
            document.getElementById("maddy").innerHTML = 
              text;
        </script>
    </body>
</html>

chevron_right


Output:

A loop with a continue statement.

the loop will skip the iteration at k = 7.

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 8
The number is 9

JQuery: JQuery is a framework for javaScript which developed from JavaScript. It is the most popular JavaScript library invented by John Resign and was released in January 2006 at BarCamp NYC. It is free, an open-source library and It’s a fast, concise, and rich-featured JavaScript library and also has cross-browser compatibility. The purpose of jQuery is to make life easier for the masses so that they can easily develop the websites and browser-based applications using javaScript. In a concise manner, we can say that the “JQuery is a library to provide better client-side web page development” environment to the developer by the help of its the featured-rich library.

    It’s the following highlighted features are as follows:



  • DOM manipulation: DOM elements can be easily traversed, modified.
  • Animations Lots of built-in features for animations.
  • HTML event handling amd manipulation.
  • Ajax is much simpler with an easy-to-use API that works across a multitude of browsers.
  • Css manipulation
  • Has a high-level UI widget library.
  • Cross-browser support: work well on browsers like Chrome, Opera etc.
  • Lightweight: Only 19kb in size.
  • And other common utilities

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <script src=
      </script>
        <script>
            $(document).ready(function () {
                $("#hide").click(function () {
                    $("h1").hide();
                });
                $("#show").click(function () {
                    $("h1").show();
                });
            });
        </script>
    </head>
    <body>
        <h1><mark>
On clicking the "Hide_me" button, I will disappear.
          </mark></h1>
  
        <button id="hide">Hide_me</button>
        <button id="show">Show_me</button>
    </body>
</html>

chevron_right


Output: As we click on the Hide_me button the above-marked heading will disappear, but as soon as we click on Shoe_me button it’ll again appear.

Output

Output

Key differences between JavaScript and JQuery are as follow :

                        JavaScript                                       JQuery
1. JavaScript is an interpreted language and is written in C. It’s a combination of ECMA script and DOM (Document Object Model).   While JQuery Uses the resources that are provided by JavaScript to make things easier. It is a light-weight JavaScript library. It has only the DOM.
2. JavaScript uses long lines of code as an individual has to write the code own-self.    With JQuery, one has to write fewer lines of code than JavaScript. We just need to import the library and use the only specific functions or methods of the library in our code.
3. In JavaScript, we have to write extra code or move around to have the with cross-browser compatibility.   JQuery has an inbuilt feature of cross-browser compatibility. We don’t need to worry about writing extra lines of code or move around in order to make our code compatible with any browser.
4. JavaScript can be a burden over a developer as it may take a number of lines of lengthy code to attain functionality.   Unlike JavaScript, JQuery is more user-friendly only a few lines of code have to write in order to have its functionality.
5. JavaScript is verbose because one has to write their own scripting code which is time-consuming.   JQuery is concise and one need not write much as scripting already exists.
6. Pure JavaScript can be faster for DOM selection/manipulation than jQuery as JavaScript is directly processed by the browser and it curtails the overhead which JQuery actually has.   JQuery is also fast with modern browsers and modern computers. JQuery has to be converted into JavaScript to make it run in a browser.
7. We can make animations in JavaScript with many lines of code. Animations are mainly done by manipulating the style of an Html page.   In JQuery, we can add animation effects easily with fewer lines of code.
8. JavaScript is a language, obviously, it would be heavier than JQuery.   While JQuery is a library, derived from JavaScript hence, it is lightweight.
9. JavaScript is an independent language and can exist on its own.   JQuery is a JavaScript library. It would not have been invented had JavaScript was not there. jQuery is still dependent on JavaScript as it has to be converted to JavaScript for the browser in-built JavaScript engine to interpret and run it.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.