In CSS, you can select all <h1> elements on the page with this:

h1 {
 /* style all <h1> elements */

In jQuery, you can use that exact same selector.

$("h1") // set of all <h1> elements

In fact, you can use any CSS selector (even CSS3 selectors) in jQuery. In this screencast we even used the :nth-of-type selector to select the second definition term in a definition list:

  .html("I'm the second definition term!");

That .html() method is a useful one. It allows you to change (or get) the "innerHTML" of an element. As in, not the element itself, but everything inside of it. The "guts" you could say. It is similar to the .text() method, but text() is literally just for text. It won't return actual HTML from inside the element. So if the "guts" were Some <span>text</span>, it would just return "Some text". Setting text with it will escape any HTML you put in, meaning you would literally see the "<span>". Getting text with it is unique as well, for if you select multiple elements, it will return the combined text from all of them, which is unique in jQuery. In other cases when you "get" a value from a method, it will return the value from the first in the set. Like .height() will just return the height from the first element in the set.

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


  1. Charles McKeever
    Permalink to comment#

    Oh, thank you for leaving in the bit about the checkbox!! I can totally relate to that moment, especially when you’re trying to do something on video. I mean how long that been a part of html and to this day, I still have to look it up. I love that moment of honesty. Very cool!

  2. vgvenkat
    Permalink to comment#

    Hey Chris, it would be very helpful if you could add a related readings segment at the end of the video. It can link to css tricks blogposts that you think enhance the understanding or explain simple tricks/hacks.

  3. Melina Cisneros
    Permalink to comment#

    Hi Chris, I’ve been with your videos for 2 days now. It’s great to see that your way of teaching jQuery is so simple and clear, even when you get those lapsus moments and you forget how to mark a checkbox by default. Even do, I’ve been trying with other online resources and at this point your course is the best by far.

    Just have a little question around pseudo selectors, why we can use it on jQuery? Or my hearing is bad? Will like to see your explanation around the subject or If you have an external resource will be appreciated

  4. jmhess77
    Permalink to comment#

    Long time visitor and fan of CSS-Tricks as well as Codepen and I’ve tried so many different learning tutorial sites, Youtube, books, you name it….I have tried it. One thing I love about your videos, podcasts, and teaching methods is your “honesty” and ability to keep one “engaged” by your tone of voice as well as your sense of humor!! Learning jQuery doesn’t have to be mono-tone, or my way or the highway methodology. I can’t wait to see just how much I get from this video series on jQuery.
    BTW, just ordered your “SVG” book from A-List Apart and can’t wait to get my hands on it and take a deep dive into your “best practices” on SVG. You ROCK Chris. My goal is to one day, get to a Conference where you are speaking so I can hopefully meet the man behind these amazing tools you provide for all of us “Front End Devs”.

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 triple backtick fences like this:

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

We have a pretty good* newsletter.