jQuery Explained

You may have heard of it a couple of times before, and you probably even Googled the exact title of this post looking for an answer. What is this jQuery magic that you keep hearing about? Well, let me tell you. But first, let me give you the cookie-cutter definition of what jQuery is:

“jQuery is a practical, fast and resourceful library that is built on top of the JavaScript programming language. It mainly simplifies HTML document traversal and manipulation, event handling, animation and AJAX.”

jQuery Explained in English

If that made absolutely no sense, don’t worry. Now that we have the really confusing definition of jQuery out of the way, let me explain it in English. JavaScript was a language that no one took seriously, and quite rightfully so. JavaScript is a great and powerful language, but in its raw form, it can be quite confusing and frustrating.

JavaScript is a client-side language, also known as a front-end language. This means that JavaScript is a language that communicates with your browser and has the ability to manipulate anything that your browser shows and does. Awesome right? Well yeah, in theory. As I mentioned before, JavaScript is pretty powerful; the only bad thing about it is how hard and complicated it is to write. Something as simple as targeting a parent element or injecting a CSS rule takes three to six lines of code. That is every developer’s nightmare. We need to be fast and effective with our code. Hundreds of lines of “spaghetti” code will drive any developer mad!

Here’s where jQuery comes in to save the day. All of the aspects that once frustrated developers about JavaScript have been fixed by implementing jQuery on top of it. It makes development so much faster because it offers a clean and simple syntax and a broad library of functions and methods. Something that would take you multiple lines of JavaScript code can be done in one line of jQuery. Boom! It makes JavaScript so easy to write and extends it to become better, faster and most importantly, cross-browser compatible. It’s pretty much a utility belt. It’s actually so cool, it should be Batman’s utility belt!

Before going any further, and to give context to what you are about to read, let me tell you a little bit about myself. I’m a practical person. I became a developer by experimenting and learning new things. I’m self-taught from the ground up, and I’ve become better and better by playing around and finding better ways to do things. Web development is problem solving at its core, and in order to become good, you are going to have to mess up a lot. Let me rephrase that: you WILL mess up a lot. But by working yourself through a problem and finding its solution by trial and error, you will eventually get there. A library like jQuery simplifies tasks and allows developers to become more efficient and practical, and that’s why we all love this library so much!

jQuery is so awesome because it was built for developers, by developers. Everything that we hate about JavaScript goes away with jQuery. Let’s go through the main benefits of the jQuery library so I can show you why it is so useful.

Teach me, Sensei.

Let’s go back to the buzzword definition and let’s split it up into parts.

“jQuery is a practical, fast and resourceful library that is built on top of the JavaScript programming language. It mainly simplifies HTML document traversal and manipulation, event handling, animation and AJAX.”

HTML Document traversal and manipulation – If jQuery was a superhero, this would be its main superpower. Moving through your website with ease and targeting elements is so easy thanks to jQuery. All it takes is a CSS selector to make an element a jQuery object that you can manipulate ‘til your heart’s content. For example, you have a <div> tag with a class of ‘yeah’ that looks like this <div class=”yeah”></div>. In order to manipulate it with jQuery, you need to convert it to an object like this:

$(‘div.yeah’)

That’s it. It only takes a CSS selector to get a hold of it. So much win.

jQuery syntax is really easy to understand. You call jQuery by using the “$” sign and you specify what you want to select using a CSS selector. Once you get a hold of it, you can do whatever you want to that element. The example below should tell you how many <div> tags have the class of “taco.” Remove one of the elements to see what happens.

See the Pen fapxC by Raul Salido (@salidoraul) on CodePen.

The example shows how jQuery is being triggered and ordered to go find the “taco” divs and return how many of them exist. Easy breezy.

Event handling – Events are behaviors that happen in your website. They are triggered either by your user or automatically by your code. Actions like clicking a button, typing content into a form, resizing your browser window, etc., are all events. jQuery makes it extremely easy to control these events and to do whatever is needed with them. It’s pretty much mind control.

One of the most popular jQuery events is the ‘click’ event. Take a look at how easy it is to do something when you click an element.

See the Pen Fpnij by Raul Salido (@salidoraul) on CodePen.

Animation – This was the feature that blew everyone’s mind when jQuery first came out as it gave websites life, literally. It gave the web: movement, transitions, transparencies, you name it. It forced CSS to up their game, and although you can currently animate in better ways with CSS3, jQuery was the one who set the bar way up on this feature. It gave the ability to .slideToggle(‘fast’) til’ we couldn’t do it no mo’. Here’s an example of an overload of animations.

See the Pen gfkri by Raul Salido (@salidoraul) on CodePen.

AJAX – Which stands for (Asynchronous JavaScript and XML). Say that three times fast. It’s basically a super fancy way to say: Loading web content without reloading your page. It’s a feature that allows developers to fetch content from a server and update the current web page without refreshing. Whenever you see a spinning circle followed by the appending of new content, that’s AJAX. This feature from jQuery requires a better understanding of JavaScript, so I won’t go into further detail. If you are interested in learning more about AJAX, check the jQuery docs.

Got it? You totally got it.

This wasn’t overwhelming, was it? It was just a quick rundown of the cool features of jQuery. The main takeaway here is the realization that jQuery’s coolest feature is its practicality. It is a tool that was created to make client-side development easier and way better.

jQuery is everything. The majority of the web is now running on it and it’s not slowing down. If you are interested in learning more, just experiment with what you saw here. The basics that we’ve gone through are enough to get anyone started. If you want to keep playing, check out their open-source API to learn more about how cool and useful jQuery is.