A quick introduction to jQuery

Will Little

After taking a brief look at JavaScript in the previous post in this series, I'll now turn our attention to what is arguably the most popular (and essential) JavaScript library among web developers today: jQuery. In general, libraries are used by developers to both save time and to establish best practices/conventions, and indeed, jQuery accomplishes both feats.

[Author's note: I wrote the first couple dozen tutorials in this series a few years ago and I'm in the process of updating the content to reflect the evolution of best practices in the industry. Please comment if you see anything I missed that should be updated. Thanks!]

Overall, jQuery is a simple syntax convention and set of methods used to navigate around and select HTML elements in order to respond to user behavior (such as clicking). It also has nice methods for grabbing data behind the scenes, a process known as Asynchronous JavaScript and XML (AJAX), which allows you to build fast, desktop-like applications (e.g. Gmail, Facebook, Asana, etc.) without reloading the page.

I remember not liking jQuery very much when I first started using it, but this was entirely because I didn't understand why the ability to select and manipulate custom subsets of HTML elements was a big deal. This seems silly to me now, but I want to help you understand it conceptually to hopefully prevent you from hating it as much as I did.

Using jQuery

Selecting a subset of HTML elements easily — a key aspect of jQuery — is a big deal because you can do stuff like this:

$(".green").css("color","blue");

What $(“.green”) does is select every HTML element with the class of “green” (remember that .green is the class, #green would one element with said ID, and plain ol' green without a period or pound sign in front of it would be selecting all HTML elements called , but since that tag doesn't exist, you can see how something like $(“p”) makes a little more sense — i.e. to select all paragraph tags).

Then, what the .css(“color”,”blue”) does is switch the color CSS style of everything within all selected HTML elements to blue.

Give it a try — open your browser's JavaScript console (under view > developer in most browsers, or alt+cmd+j for chrome users) and enter in:

$("p").css("color","blue");

If that worked, all your paragraph text should have just turned blue

Next, type this into your console:

$("p").click(function(){ alert("You clicked a paragraph") });

Then click a paragraph. This is an example of the .click() jQuery method, which observes all the selected paragraphs (which in this case is all paragraphs on the page) and runs the internal function every time a click is detected.

There are many different ways to select elements with jQuery, which you can read about now through that link, or we'll discuss them more later as we build out our app.

FYI — if you're curious about how to reset the jQuery stuff you did on this page, you can always just refresh the page. As an indirect bonus, this has given you a small but important security lesson: everything you send to a browser can be easily seen and manipulated, so you should never include sensitive information and always validate data on the server side that is entered into forms (doing both is, as you could imagine, best practice).

- — -

In our next post we will be briefly diving into our favorite back-end scripting language, Ruby. Previous post: JavaScript Introduction