The best example of the difference between JavaScript and jQuery

Most common and popular question is, What exactly is JavaScript? What exactly is jQuery? What are the difference? How would we know which one is JS and which one is jQuery?

Actually, when I started learning web development. I was too confused and how to determine which one is JavaScript and which one is jQuery language. In this article, you will have example of JavaScript language and jQuery language. And you will also gather knowledge about the difference between JavaScript and jQuery.

Some of people said that, they look like competitors. But in real, they aren't. So what's the difference between JavaScript and jQuery? JavaScipt is a programming language, while jQuery is a library.

Without JavaScript, jQuery is nothing. Because JavaScript was born first then jQuery built. JavaScript can live by itself, while jQuery doesn't.



JavaScript created in the mid-90s, by Brendan Eich. JavaScript becomes popular so fast, because of it's friendly behavior. It can run by all modern web browsers without needing any more plugins. Example of JS:

// traditional JS
var article = document.getElementById("article");

// new school JS
var article = document.querySelector("#article");

jQuery was invented by John Resig. JQuery is just a library, which is written by JavaScript, that is used to simplify front-end code that manipulates HTML. It is one of the most popular library used on the web. Example of jQuery:

var article = $("#article");

In the two of examples, if you are looking at jQuery example then you can see I can get the same element with just a one line. So tell me which one is simple and easy to load.
I am giving you another difference between jQuery and JavaScript.
jQuery:

// access by tag name
var els = $("p");

// access by class
var els = $(".class");

JavaScript:

// by tag name
var els = document.getElementsByTagName("p");        // OR
var els = document.querySelectorAll("p");

// by class name
var els = document.getElementsByClassName("class");    // OR
var els = document.querySelectorAll(".class");

Let's see, where's the difference. In jQuery, you can access a tag or class with few words code. But in the other side, if you are looking at JavaScript there are lots of words need to write for accessing a tag or class.

So, you get my point. If you don't please do comment. If you get it then share it and let's help your friends to get it.

Have a great life