Introduction to jQuery Selectors
In this video, I'll be covering jQuery selectors. Selectors are what we use to specify particular elements within our HTML document. This is the HTML document that we'll be using during this video. It has four paragraph tags here, here, here, and here, and two of these paragraph tags are enclosed within a div tag. And we also have an input tag here with the type set to button, and this input tag also uses an ID attribute, and we have this set to test button.
So now, let's go over and add our JavaScript code. As you recall from an earlier video, this is our basic template that we use, and all of the code that we're going to be using goes right into this area here.
So to specify our selector, we use a dollar sign followed by a pair of parentheses, and the selector goes inside the parentheses. The selectors that we are going to use are just a string of text, and in JavaScript you enclose text strings inside quotation marks. So you can use single quotation marks like this, or you can use double quotation marks like this. Then we type the selector inside of the quotation marks. This will specify all div elements.
Selecting Elements by Tag and ID
If you're familiar with CSS selectors, then you should be very comfortable with these selectors. I'll go ahead and paste in the rest of the code that we're going to use. So here's the div selector that we just entered, and what we are saying with this part right here is that we're going to change the CSS background color to red for all of the div elements. And this CSS method that you see right here, don't worry about that right now because we're going to be covering this in a later video. For now, we're just focusing on the selector that we're using to determine which elements that this will be applied to. So again, in this case it will be applied to all div elements.
And with this code, the background color of the div elements will change whenever the user clicks on the test button. And that's because this statement right here is enclosed inside of a click event. And again, don't worry if you don't understand what this click event is because we'll be covering this in a later video. Also, the reason that this click event works with the test button is because we specified a selector for the test button right here. Remember that we specify selectors by using a dollar sign, and then we enclose the selector in parentheses and quotation marks, and that's what we've done right here. And in this case by putting a pound sign in front of the word test button, that lets us specify the ID that we used for the input tag. So if I switch back to the HTML code, you recall that the ID is test button for the input tag.
But the important thing to focus on for this video is this part right here, because this is our selector. So let's try this out. I'll save the code, and then I'll refresh our browser. Here you can see our test button and then our four lines of text that are enclosed in paragraph tags. And as you recall, our first two paragraph tags were enclosed in a div tag. So when I press the test button, the background color changes for the entire div.
Selecting Multiple Elements with Commas
So let's go back over here and change the div to p, and this will select all of the paragraph tags. So now when we press the test button, the background color changes for all four of our paragraph tags.
And you can also specify multiple elements inside a single pair of quotation marks by separating them with commas. So for example, I can specify all div elements and all strong elements and the ID test button.
If we flip over to our HTML code for a second, you'll see that each of the P tags has a strong element inside of it, and these strong elements will make the word that's in the middle of it bold. So the word first, second, third, and fourth are all enclosed within the strong elements. So let's save this code and try it out in the browser. So now when we press the test button, the background for the div element changes color, the background for all of the strong elements change, as well as the background for the test button changes.
Universal and Child Selectors
We can also specify All Elements by using an asterisk. So now when I press the test button the background color of everything changes. And we can also specify a child selector, so I'll show you how to do that. If we type div to select the div elements and we follow that by a greater than sign and then I'll type P for the P elements, this says that I want to select all P elements that are children of div elements. So let's try this one out. And now when we press the test button the background only changes for the first two lines because only the first two paragraph tags were inside of a div tag, and so these two paragraph tags are the only children of the div tag.
First-Child and Last-Child Selectors
And we can also specify the first child element. And we do that by following the P with a colon and then type first-child. And now when we press the test button the background color only changes for the very first P tag, which is the first child of the div tag.
And we can also specify the last child tag by changing the word first here to last. And now when we press the test button, the background color for the second P tag has changed because it's the last child of the element.
Descendant, Even, and Odd Selectors
And we can also specify a descendant element. So for example, if I follow the word div with a space and then the word strong, this means that we're selecting all strong elements that are descendants of div elements. So when I press the test button, the background changes for the two strong elements that are descendants of the div element.
I can also specify every other element of a particular type by following it with the words 'even' or 'odd'. So for example if I type P to select the P elements and then follow that with a colon and then type 'even', this will select all of the even P elements. So when I press the test button every other P element is selected, and the first line is considered as element zero. So we have to start counting 0, 1, 2, and that's why the first one and the third one are selected when we use even. We can also change the word even to odd and now the other lines of text are selected when we press the test button.
Selecting by a Specific ID
Now let's go make a small change to our HTML code. And down here at the third P element, I'm going to add an ID attribute, and I'm just going to call this 'third'.
Now we can go back over to our code, and if I want to specify that ID that I just added, I need to precede it with a pound sign or hash mark and then I can just type 'third'.
And now when I press the test button, just this line is selected because this is the only one that had the ID set to Third.
Selecting by Class Attribute
And now let's make another change to our HTML code. And this time on the very first P tag let's add a class and we'll call this class 'multiple'. And then let's add this same class to the second strong tag.
So now to specify a class we start that out with a dot and then type the name of the class. So now when we press the test button the background color changes for everything with that class name.
So now we can also specify that we are only interested in strong tags that have a class attribute of 'multiple'. So we can do that by typing strong followed by a dot followed by the word multiple. And now this will only select strong tags if their class attribute is set to multiple. So now when we press the test button the background color is only changed for this strong tag since it's the only one that has a class attribute set to multiple.
Handling Events from Multiple Selectors
Now back over to our test code. This click event that we've been using has been tied to this selector right here. So we can change this selector also. So let's add a selector for a strong element. So I just need to type a comma and then the word strong. And now this click event will be run whenever we click on the test button or we click on a strong element.
So let's give that a try. So since the word first, second, third and fourth are all strong elements, I can click on any one of these. So I'll click on the third one right here. And so that did the same as the test button. And I can refresh the page and press the test button also.
Using the 'this' Keyword
And then next I'll show you a very useful selector. So let me delete all of this here. And for this selector I just type a this. And the word 'this' is not considered a text string; it's a key word, so do not use quotation marks with it. The word 'this' refers to whatever brought us here. So if the user clicks on the third strong element for example, then the keyword 'this' refers to the third strong element. And if the user happened to click on the test button then the word 'this' refers to the test button. So let's try this one out.
So if I click on the first strong element, only the background color for that one is changed. Because again, when I clicked on the first strong element, the word 'this' referred to the element that brought us here, which was the first strong element. So now I could click on the third one and the background color for that will change, or I can click on the fourth, or if I click on the test button then the background color for that will change. So the word 'this' is a very useful selector to use, but just remember do not enclose this one in quotation marks.
There are also other selectors that were not covered in this video but you can go to jquery.com to learn more. Well that concludes this video. You can find the sample code used in this video at littlewebhut.com. Thanks for watching and please subscribe and leave a comment.
