One way to think of jQuery is the "Select and Do" library. jQuery is particularly good at selecting elements on the page (stuff in the DOM) and then doing something. Select and do. Select and do.

See the Pen 99a923df4131377dc308895be1baf4e1 by Chris Coyier (@chriscoyier) on CodePen

In this screencast we started using the Dev Tools in Google Chrome. We'll be using Chrome for the rest of this series specifically because the Dev Tools are so good. But so far we're just using them at a pretty basic level and pretty much any of the browsers have an equivalent version of these tools. What we use here is the ability to inspect the DOM and see what's going on with our elements on the page. And most importantly, use the Console which allows us to write and execute little bits of JavaScript right on the page.

We referenced the jQuery API documentation a bit, which is very good and useful and we'll be using a lot. We specifically used the addClass() method and the css() method.


  1. William Dellinger
    Permalink to comment#

    For a brief moment this afternoon, after I paid $12.99 to gain access to The Lodge for a month, I regretted wasting that money. Then, 3 minutes and 30 seconds into the first video about jQuery, I realize that the $12.99 lodge subscription might be the best thing I’ve spent money on in a long time.

    You make this stuff ridiculously easy to understand. I just started a new webmaster job, and have been a little nervous, so finding this series has been a weight off of my chest. Thank you!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.