When I first started learning to code, I found it difficult to navigate through the terminology, jargon, and acronyms that seems to accompany every technology I played with. And it can get even harder when things sound very similar, or operate in a similar ecosystem.
In this article, we will demystify that question, and leave you with a better understanding of what both of these technologies are, as well as the benefits of using both of them. Let’s dive in!
It has also exploded in popularity in the past couple of years. It has been used to develop front-end frameworks to help developers create complex web applications, to develop native applications and it has even started to be used server-side, thanks to projects such as Node.js.
Alright, so what is JQuery then?
Wow, there was quite a bit of jargon in that definition. Let’s take a minute to define some of it.
A library, like where I get books?
In programming, a library is a collection of useful code, grouped together to be reused later. Libraries have a well defined interface, that makes it easier to perform the functions it was designed to do. They generally make it so you have to write less code to accomplish the same amount of work.
So let’s say you wanted to write a program, which at some point saves some data to your hard drive. You could write that entire program yourself, which would be quite a bit of work. Or you could use libraries someone already created, to make some parts of that program easier to code.
Like the code that actually writes the data on your hard drive would be quite complicated to implement and would require you to know how to work with low level programming. But if someone already figured it out and made that code available, that would be a library you could add to your program so you don’t have to think about it.
Perfect, now what is front-end code?
Typical web applications can be thought of as having two parts. The server-side and the front-end.
The server-side code is code your users never see. It’s the code that is responsible for the logic of your application, the code that saves data to a database, etc.
Got it, so what does JQuery do exactly?
JQuery makes it easier for you as a developer to interact and modify your HTML and the data it contains. For example, let’s say you want to disable that button so it can’t be clicked again. You could do that with the following JQuery code:
JQuery is used twice in there. The first being the selector, which is represented by the $. This will go through your web page and it will return an HTML element with the id “my-button” if there is one. Then through the use of the .prop method, it will change that element’s properties, to include the disabled property with a value of true. And voilà, you can’t click your button anymore.
document.getElementById(“my-button”).disabled = true;
Though the code isn’t that much more complicated for our simple example, I would need a much more complicated explanation to explain what document refers to and why we can use the getElementById function on it.
Any downsides to JQuery I should be aware of?
The newly developed front-end frameworks make it easier to write large, complex front-end applications and are a good alternative to JQuery for large codebases.
Where should I go from here?
And I would also recommend looking through JQuery’s documentation to see if it can be applied in your next project. I recommend the JQuery UI library, it has saved me quite a bit of work in the past and it will always have a special place in my heart.
If you want to learn the basics and set up your coding environment, take our free 7-day Web Development Email Short Course.