jQuery Selectors 101 (Video Summary)

By |July 11th, 2016|Categories: jQuery|

appendTo offers JavaScript Training Courses for Software Teams. In addition to this, we also offer free jQuery/JavaScript training videos for individuals on our YouTube channel. Below is a free video with an introduction to JavaScript.

Full Video Transcript

I’m going to talk about two things specifically. We’re going to introduce some terms that are used when talking about jQuery and we’re also going to take a look at selectors specifically with jQuery.

I thought we’d get started today by taking a journey that most people take when they hear about jQuery for the first time, and that is to simply go to jquery.com and check it out. Pulling up jquery.com, we actually have a piece of jQuery here, a little run button where we can actually run some jQuery code. What I thought we could do is take this example and use that and break it down and explain what’s happening there and explain a little bit more about jQuery.

With jQuery, we often refer to it as a find something, do something library. The majority of the cases, we start out by trying to find something on a page. Once we find those elements, we do something with those elements. Let’s take our specific example and pull it into the slideshow here. A few technical notes. What we see in the first top portion is actually JavaScript and the other highlighted area below is a contained set of HTML. What we’re going to actually do is take the jQuery we create, we’re going to run it against that contained set of HTML. I’m going to use this total source button here at the top right to show you the actual HTML, so when we run the jQuery, that’s what we’ll see, and then we’ll actually be able to look at the source itself and see what changes jQuery might have made.

What I’ve actually done is taken this specific example we just saw from jquery.com. There is actually one specific difference. Looking at the JavaScript at the top, I replaced the dollar sign with jQuery. I’ll talk about that in a second, but jQuery and then opening and closing parentheses, if you remember from previous lessons, that opened and closed parentheses indicates that jQuery’s actually a function and that we’re invoking that function. When we’re starting out with jQuery and we’re finding something with jQuery, we’re finding it with what we call the jQuery function. That’s the first piece of vocabulary that’s often thrown around when talking about jQuery.

If we go ahead and toggle this, you’ll notice that we have a paragraph here with a class of neat assigned to it. We haven’t talked about selectors a whole lot, but I bet you’ll be able to figure out what’s going to happen here. Let’s go ahead and run this code. There we go. We were able to actually show the paragraph through jQuery and we also had some animation going on. Let’s continue to focus on the first portion there, the jQuery function. As you notice, I pulled away the dollar sign. The dollar sign is really just a alias set up for jQuery itself so we have a terser syntax. What if we did this? What if we simply took the dollar sign, which we’ve learned is a valid JavaScript variable, and assigned it to jQuery. Now we can use the dollar sign instead of jQuery everywhere, and that’s going to save us a lot of typing.

Since we have the same exact function here, we’re simply using the dollar sign instead of jQuery. We expect the same thing to happen on this slide, so if we go ahead and run it, you see indeed that we get the same behavior. Since jQuery’s already assigned the dollar sign to jQuery for us, assigned it to the jQuery JavaScript library, we don’t actually have to make that assignment. This is the typical code that you’ll see, and this is actually the code that we saw on jquery.com.

The important vocabulary term to remember is the jQuery function. It’s usually represented by the dollar sign variable and then the opening and closing parentheses. What the jQuery function can actually take in is called selector as a perimeter. Selectors are actually a syntax that was already created before jQuery, released primarily, borrowed from CSS selector syntax. Let’s take a look at some simple examples here of using selectors. I have what I call the basic 3. Let’s take a look at each of those. You can actually use selectors to select any element on the page by element type, so in this case, seen in the jQuery function up top here, we’re actually asking jQuery to select for us all of the paragraph elements on the page. We’re then going to perform our actions, which we’ll talk about later.

What we have in our actual HTML Snippet below is a div and a paragraph, so we would expect things to happen to the paragraph, but not the div. If we run this, we see that the paragraph now appears and the div remains unchanged. You can also select by ID. This is the fastest way to select something from a web page, looks up very quick. In this example, we’ve got a paragraph with an identifier of here, but see that in the bottom of HTML. To select something by ID, you simply propend the pound sign onto the identifier, so in our jQuery function, we’re selecting the element. Hopefully, there’s only one on the page with an ID here, and then we’re performing the actions. Once again, let’s go ahead and run this. There we go.

We can also select by class. Selecting by class is done by propending the dot before the class name. In our example, we have a paragraph with a class of neat here at the bottom. We’re selecting any element with a class of neat used in the jQuery function and then performing our actions. Let’s go ahead and run this. Once again, we get paragraphed. Really cool is you can actually combine selectors together to perform a more specific selection. I changed the HTML a little bit. I’ve added a second paragraph, so in our jQuery function, we’re not just asking for all paragraphs, but we’re asking for all paragraphs that also have a class of neat, so what we would expect to happen, let me run it, is to only get that last paragraph and perform the actions on it. Indeed, that’s what happens.

One additional important note about combining selectors is that there’s no white space here. If we put a white space between the P and the dot, it would actually mean something completely different and we’ll see that in a few slides. When you’re combining selectors together, you want to perform this and operation where you want paragraphs that are also a class of neat in this example. You want to make sure that there’s no extra white space.

Let’s take a look at some other interesting things we can do with selectors. I’m going to veer away from our jquery.com example here a little bit. In this selector, what we’re actually doing is getting all of the direct children of paragraphs that are EM elements. Know that because of this greater than sign here in our selector. Again, borrowed from CSS selector syntax. What this jQuery function’s actually going to retrieve for us are these EM elements. Looking at our HTML here below, we have two EM elements, one surrounding this word congratulations and another surrounding the word jQuery here.

We’re going to do something with our selection by adding a class. We haven’t talked about doing something in great detail, but it’s probably fairly obvious to you what this is actually going to do for us. It’s going to add that class of these EM elements, which we have specific styling set up for, so let’s go ahead and run this and see what happens. Indeed, we get …

Let’s take a look at some other selectors. We’re going to venture away from our jquery.com example a little bit here. The selector we’ve got here is actually going to get us all of the EM elements that are direct children of paragraph elements. We know that because of this greater than symbol in our selector. This is, again, borrowed from CSS selector syntax, and it just indicates direct children. Looking at our HTML Snippet, we have two EM’s that are direct children of paragraphs. One is this congratulations word here, and the other’s jQuery right here. We haven’t talked a lot about doing something yet, but you can probably determine that what we’re actually going to do with our selection is we’re going to add a class to each of those EM’s of OMI. We have that class defined here with a few special styles.

If we go ahead and run this, indeed, our EM elements are actually styled. If you look back at the source, you’ll see here that a class of OMI has been added.

In addition to selecting children we can actually select any descendants. Let’s take a look at that. This example, we’re going to start with any divs. Then we leave a single space here, which is going to indicate any descendants, and then EM, so what this selector is saying is select any EM’s that are descendants of divs. Looking at our HTML Snippet here, we have this title within an EM, which is directly within our div. Suite is actually a child of the div. We also have this congratulations here, as well as the word jQuery here. Note that they are actually children of paragraph, so they’re actually second level descendants of the div. Yet, when we run this, note that the class OMI was applied to all three of those.

Slight difference here between children and descendants. There’s a lot of selections and there’s a lot of selectors. If we took a look here at the API at jquery.com, selector documentation, just a quick scroll indicates that there’s a heck of a lot we can do with selection, so rather than trying to go through each one of those, one at a time, and just show you, and before we actually tackle doing something with our selections, let’s just go ahead and practice selectors in the exercise. Go ahead and give those a try, and when you’re ready come back to us and we’ll look at the solutions.

Kyle Pennell
Kyle Pennell is the editor of appendTo.com.