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 Explained in English
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!
Teach me, Sensei.
Let’s go back to the buzzword definition and let’s split it up into parts.
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:
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.
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.