Here is a question I hear often: What’s the difference between JavaScript and jQuery? To understand the difference you need to look at a little bit of code.
Now, don’t worry if you don’t understand the code. The main point of this is to see how jQuery and JavaScript do the same thing in different ways and what makes jQuery so much easier for some of the things you’ll want to do. Trust us. You’ll be fine.
JavaScript Basics
So let’s say we’ve made a simple web site — it just says “Hello” and “Goodbye” (not a terribly inviting web site, but it’s just here to make a point) — and we want there to be a little bit of interactivity in it. So our web site is built of three basic frontend languages. You’re going to have a little HTML, a little CSS, and a little JavaScript.
If you’ve seen our earlier video on what JavaScript is, you know it’s there to add interactive elements to the site. It can be complex interactive elements, like a clickable “button” or simpler things like changing the text color when you click on it. Those are all doable because of languages like jQuery and JavaScript.
JavaScript Examples vs. jQuery Examples
To see the difference between them, let’s look at a simple example of one application of these: making a line of text change color. If we want to do that using JavaScript, this is what the code would look like:
var d = document.getElementsByClassName("goodbye");
var i;
for (i = 0; i < d.length; i++) {
d[i].className = d[i].className + " selected";
}
If you don’t code much you’d be forgiven for getting lost in all that! It’s a lot of code for one action and if you’re new to coding, it kind of looks like five lines of nonsense.
The same action in jQuery looks like this:
$(".goodbye").addClass("selected");
You can see it’s one line that says “grab this class and add this extra class from CSS to it.” Essentially, it takes all those steps you saw in the JavaScript and makes them into one command.
You can kind of think of it like this. When you have to ask someone to do a task with a lot of steps — like making a pot of coffee — you don’t tell them to do the steps again and again, you just say, “Hey, could you make some coffee?”
That’s jQuery. A group of developers said, “Look. There are these things we have to do all the time in JavaScript an it takes us five complicated lines every time we have to do that.” And they didn’t want to write five lines every time, so they came up with a way to do that in just a line or two.
Getting Started with jQuery
This is what we see when we look at jQuery. We see a list of familiar titles — Animate, Delay, Fade-In — all these things that would have taken lots of lines of code in JavaScript, and now you can just click on them and write them out as maybe five or six lines total. That is jQuery in a nutshell. It’s all the functionality of JavaScript, but it simplifies the process immensely.
To get started with jQuery, you just have to type this one bit of code into the header of your project:
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
It’s kind of like in The Matrix when Neo (aka Keanu Reeves) gets an injection of knowledge uploaded into his brain and he wakes up and is all like “I know kung fu.”
By typing this jQuery line into the top of your code, your code is all of a sudden like, “I know what animate means” and “I know what animate AddClass means” with one line of code.
Takeaways
- jQuery is a framework that lets you write JavaScript quicker and easier.
- The developers of jQuery created it to condense common JavaScript tasks into fewer lines of code.
- You can code most common JavaScript actions using jQuery (and you can actually check out their API page for a complete list of what you can do)
- To get started using jQuery visit the website https://jquery.com/
