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.
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.