What Is jQuery?


What Is jQuery?

Several months ago I was scrolling through a Facebook group of bloggers who were troubleshooting their websites. One blogger complained their site was too slow and didn't know why, since they had done all the obvious stuff to prevent that (eg: minimized photos, gzipped css, removed bulky plugins, etc). I decided to take a look at their source code to see what was going on. What I saw were 24 different instances of jQuery.

When I told her what I found, she came back with "What is jQuery??". I didn't know how to respond. I probably should have helped but I didn't. I didn't care about blogger education as much as I do now. So, I'll answer her question today and hopefully she'll see this:

What Is jQuery?

jQuery is JavaScript, but JavaScript is not jQuery. jQuery is a library that minimizes the length of typing needed to use JavaScript. Back when browsers were very much different from each other, jQuery offered an easy solution to code for all of them. It also helped increase popularity of more complicated web actions like AJAX. Now that browsers are more-or-less the same, jQuery's been slimming down, dropping browser support and focusing on increasing speed instead.

Let's demonstrate the difference between JavaScript and jQuery. Imagine you have a paragraph tag and you want to change the content of it with JavaScript. If you were using JavaScript, you'd do something like this:

If you were using jQuery, you'd do this:

That's a lot less coding!

How can I use jQuery?

If you are using jQuery, you'll want to include it like you would a CSS or JavaScript file. I have it automatically included in my demos but you can add it like this:

Many developers use a CDN (content delivery network) and link jQuery from there. Because jQuery is so popular -- and can be so bulky, especially jQuery UI -- people use a CDN so that browsers can use a cached copy of the file without downloading the same thing on every different site. Let's say you visit YouTube, Facebook, Twitter, CNN, ABC News, Google News, My Beautiful Web and 47 other websites every day. If each one of those sites use jQuery, you'd be downloading it 54 times. If they each used a CDN, you'd only download it once. Your browser caches the file and references it if it's called again. This can improve speed across the web, especially on mobile devices.

Some good CDNs I use are Google Hosted Libraries and the official jQuery CDN.

How do I code with jQuery?

Vanilla JavaScript can be pretty long and cumbersome, so jQuery was invented to make it simpler. Their motto is "code less, do more" and it's fairly easy to see why.

jQuery is often read from left to right. It starts off with a dollar character ($), then brackets and quotes around your selector, and then functions that that can manipulate it. jQuery's core purpose is DOM, or element, manipulation. Let's look at the example again:

You can even combine jQuery functions by adding a dot (.) between them:

jQuery even has some built in animations too:

Classes and IDs

Just like CSS, jQuery can use the dot and hashtag notation to select elements. This makes it easier for developers to mentally connect the action of an element in jQuery with the styling of it in CSS. If we gave our paragraph the class "red", we could select it and not other paragraphs:

If you were using an ID instead, you could do this:

As stated in earlier articles, it's best practice not to name a class after how it looks visually, but instead what it's doing. Is this paragraph important in some way? Using a class name such as "importantText" is better, especially if you decide to change the colour scheme of your website and your important text colour changes from red to blue.

Getting Complicated

jQuery is also good at selecting more complicated selectors, like this:

That selector selects the first <p> tag, then goes to the next one, and select the earliest occurrence of a <span> tag. You could also do it like this:

If your HTML is really that simple, you could even do something like this:

AJAX

This is where jQuery really shines, and how it rose in popularity. jQuery has the ability to send AJAX (Asynchronous JavaScript and XML) calls to a server and bring back the data without refreshing the page. Imagine you're about to "like" something on Facebook, so you click the "like" button. This sends an AJAX call to the server which stores data in a database that you "liked" something. Because you did this, Facebook now knows to show you more of that kind of thing. If we did this without AJAX, every time you tried to "like" something on Facebook, your webpage would have to refresh for the data to be sent to the server.

AJAX can both send and receive data from the server. One example would be an RSS feed. I'll use the RSS feed for My Beautiful Web as an example, which you can see for yourself. If you looked at the feed, all you'd see is XML. Thankfully, we can parse that with jQuery and get something a little more readable.

This content is called "dynamic content" because it wasn't on the page originally and we "dynamically" brought it in.

When Not to Use jQuery

jQuery is very powerful, but it can easily be misused. If you're using jQuery, look to see if there's a normal JavaScript solution instead. Looking to loop through paragraph tags? Instead of doing this:

Do this:

While a little more complicated to type, it helps you better hone your JavaScript skills, can easily be edited by people who don't know jQuery and doesn't require jQuery to be downloaded. JavaScript's new querySelector also to easily select elements by their class or ID, things that made JavaScript a little more complicated before. The only downside is that it isn't supported by all browsers. According to CanIUse.com, it's only supported by 98.12% of all browsers -- which is pretty good, but not the 100% that jQuery selectors have.

A good resource to use JavaScript instead of jQuery is You Might Not Need jQuery. Whatever you can do with jQuery, you can do with JavaScript -- it just might take a little bit longer to code.

Do you use jQuery? Or do you prefer vanilla JavaScript?

 

 

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close