Javascript or jQuery? What's the Difference?

In very simple terms, javascript is a programming language, and jQuery is a library that uses javascript to make life easier. jQuery is not the only library that uses javascript, there are others, but it in probably one of the easiest to learn and certainly one of the most popular.

Let me give you a simple example of things are done differently in javascript and jQuery. Let's suppose I want to show and hide various parts of the content on a webpage. I want to be able to click a button or a link, and have extra content display. I also want to be able to click it again to hide it.

With javascript, I need to do everything "from scratch" so to speak. First, I would need to write a function in javascript (a function is a block of code that bundles some rules and methods and properties and values together, it is given a name, and then that name is used to call the function when I need it to work).

If I wanted to do multiple hide and shows, then getElementById is not the right way to do it, but that needs to be the subject of another article.

function showHide() {

    var x = document.getElementById("myContent1");

     if (x.style.display === 'none') {

        x.style.display = 'block';

    } else {

        x.style.display = 'none';

    }

}

Then on the page, I need to put my content and a button, like this...

<button type="button" onclick="showHide()"> Show/Hide Content </button>
<div id="myContent1">
 <p>
This is just some content I want to show or hide. If the button is clicked, and the content is hidden, then show it. If the content is showing and the button is clicked, then hide it.
</p>

</div>

That's a reasonable amount of code for what is a fairly simple bit of functionality. Wouldn't it be great if the javascript was all done for me and I could just call it onto the page with one simple command,much like we do in css by adding a class name?

Well, with the jQuery library, we can. As long as we are referencing the jQuery library on our page, then all we need is one of the jQuery methods, like toggle, or slideToggle. That allows us to add all sorts of neat functionality to our pages, without having to create it... we just have to know how to access the methods.

Below, is how to achieve much the same thing as we did in javascript (show or hide sections of our content) without having to write out all of the functionality to do it. We use the jQuery method toggle instead.

First, we put this into the head section of our page...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><script>

$(document).ready(function(){

    $("button").click(function(){

        $("#mydiv").toggle(1500);

    });

});

</script>

On the page, we add our content and a button, like this...

<button>Hide</button>

<div id="mydiv">

<p>
This is just some content I want to show or hide. If the button is clicked, and the content is hidden, then show it. If the content is showing and the button is clicked, then hide it.
</p>

</div>

So, learn Javascript or jQuery?

There is not a great deal of difference in the number of code lines using my example. However, the more complex the functionality that I want on the page, the greater the difference would be. I chose this particular one for two reasons... it's simple and easy to understand, and also because it is something that is actually useful (you could copy/paste what is here and it would work just fine on your own webpage).

Now that you know the difference, you might be wondering, which one should you  learn first? Well, that is up to you. But just remember, jQuery IS javascript... it is just used in such a way that you don't have to write out as much code because you are frequently using pre-written methods from the jQuery library.

I believe that learning at least the basics of javascript first will give you the grounding to learn jQuery much quicker and more easily than if you start off with jQuery. You don't have to become an expert in it, just master the basics - get familiar with variables, functions, syntax etc. That will make jQuery much easier to understand when the time comes to learn it.

Comments

Have your say about what you just read! Leave me a comment in the box below.