What is jQuery?

jQuery is a useful framework built for JavaScript. It’s a popular one too, used by 54.7% of the top 10,000 websites in the world.

If you want to build an interactive web app like a game, jQuery is incredibly useful. Its tagline is ‘write less, do more’ and that’s exactly what jQuery allows you to do.

So this article is going to explain everything you need to know to launch into jQuery.

jQuery is a JavaScript Function

jQuery’s not a programming language. It’s a JavaScript function. And a function, if you’ve forgotten, is just a block of code, like this:

function eat(food) {
    alert('Eating '+food);
    return 'yum';
}

jQuery is a JavaScript function, just like that one. Only it’s a lot bigger and and more powerful. You can get an idea of just how big it is by viewing the source code.

So what does this function actually do? It takes a selector as a parameter, and returns an HTML element. The selector is written much the same as you would write a CSS selector. Here’s an example:

var result = jQuery('ul li.list-item');

The function will find the HTML element <li> that exists inside the element <ul> and has the class name list-item, and assign it to the variable result.

Now that’s pretty useless on its own. The real power of jQuery lies in its methods, which are like sub-functions inside the main function.

jQuery Allows You to Easily Manipulate HTML Elements

So once you’ve selected an HTML element(s) using the main jQuery function, you can then manipulate them using its methods.

There are a ton of methods available. Here’s just one example:

$('p').hide();

This finds all the paragraph elements on the page and hides them. Pretty simple, right?

What’s that dollar sign doing there? It’s just a shorthand alternative to having to write out ‘jQuery’ all the time. Most of the time we use the dollar sign.

Go to docs.jquery.com to look at what methods jQuery provides. There are methods for changing text, changing IDs and classes, hiding and showing, checking for events like elements being clicked, even animation.

Set Up jQuery In Your HTML

So by now you’re probably thinking ‘jQuery is pretty handy’. However, there’s one step to take before you can start using jQuery.

Because jQuery’s not actually built into JavaScript, you need to link it up to your HTML before you can use it. You can do this easily with this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

This fetches Google’s copy of jQuery. You can download your own copy if you want, but most people choose to rely on a centralized copy so browsers don’t have to unnecessarily re-download it every time they reach a website that uses jQuery.

Note that this is also a minified version of jQuery, which means the code’s been reduced down to the smallest number of characters possible.

Make sure your HTML link to jQuery come before your script tags, for obvious reasons. Also put both your link to jQuery and your script right down at the bottom of the page, before the closing body tag. This way all the elements have loaded when your script starts to be executed.

Learn More About jQuery

Treehouse has a video series by Andrew Chalkley that walks you through adding interactivity to a website using jQuery. Here’s a taster video:

Learn more about Treehouse…

And of course, there’s the official jQuery website, which is always an excellent resource if you want to look up a property or method.

Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.