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?
If you were using jQuery, you'd do this:
That's a lot less coding!
How can I use jQuery?
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?
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.
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 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