Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have taken a look at some basic jQuery selectors and filters, let's get a little more advanced. We are going to look now at Attribute filters. And Attribute filters provide the ability to further filter out the results of a selector statement based upon attributes that are on the elements being selected. You can see here I have listed a table of the available filter attributes. So let's just go down the list. The first one where you put the name of the attribute inside these braces basically only includes the element in the result set if that attribute exists on the element. Doesn't matter what value it is; it just has to be there.
The next one here, the *=, that checks to see if the attribute contains the string that you specify anywhere within the attribute value. Then the last one is kind of like a compound statement. It only includes elements that match all of the specified Attribute filters. So you can put 1, 2, 3 as many as you want on the filter statement. One of these filter expressions will take one of these forms. And you can specify as many as you like, and then only elements that match all of those guys will be included in the result set.
So let's exercise some of these. Let's go over to the code and try some out. Let's begin by just taking a quick look at the document. The document is a little bit different than the last time around. I have added a couple of more attributes to this paragraph here on the end and that's pretty much about the only change that I have made, so that we can test out the multiple Attribute selector. So, okay, let's get started. I am going to write a jQuery selector statement and that's going to look like this. And I am going to say, hey, let's get all the p elements like we have done in the past.
And again, just like we have done in the past, I am going to put a nice bold red border around the results so that we can see visually what's happening. For this particular selector I am going to specify that I only want to select paragraphs that have a class attribute. So I put the word class inside the braces and you can see down in here only two paragraphs match that. There is this one here and this one. So only those two paragraphs should have this border applied to them.
Again, we will get to this part later. Right now I will just focus on this part right here. So I am going to go over to the browser. Let's see. Okay, I am going to bring up that file and you can see that the paragraphs 1 and 3, the ones that have the class attribute are in fact bold red border around. So let's go back to the code and make a couple of minor changes. Okay, so here we are back in the code. Let's try something a little different now. First, I am going to copy this and then comment it out. And then I am going to paste that guy back in.
Now what I am going to do however is look for a paragraph, but I am only going to filter on paragraphs that have an id attribute that is equal to para 1. And you can see that should be this guy right here. That's the id. So now only that paragraph should have the border applied. Let's go back to the browser and I will refresh. Yeah, and sure enough that worked just fine. All right, let's continue on. We are going to go back to the code. Now we are going to get a little bit fancy. I am going to comment that guy out again.
Let's try one of the Attribute filters that does the start with. So now we are going to say let's find paragraphs that have the id attribute but it has to start with the string "para." And you will see that there is two of those, right. There is this one here, para 1, and then there is para 4. So now only these two guys should be selected by this selector and filter combination and have the border applied. So let's go back to the browser. Okay, now let's refresh and sure enough that's exactly what happens. So far, so good.
Okay, let's go back to the code and we will try one final example. So for our final example, let's try a multiple attribute requirement. So what we are going to do now is say we're looking for paragraphs that have ids that start with para and it also has to have a language attribute that contains, which is the *= operator, en-, and you can look down here you will see that the only that's going to match that is this guy here, because he starts with para there.
And he has got language attribute that contains English for US, but that's the string we are looking for. Okay, let's go ahead and save and we will go back to the browser and only that guy should now be highlighted. So let's see, okay, and I will refresh. And as you can see that worked. Let's just try breaking that expression to make sure that it in fact does not work when it shouldn't. So let's go back to the code. What am I going to do is just change this statement to say it has to start with something like ben.
So now if it doesn't contain that, it should break. And we will go back to the browser and now nothing should be highlighted. We will refresh and sure enough that works. So that's how Attribute filters can be used to further refine selection in the document. So now we have seen how to select elements by filtering out their attribute values. So let's move on now to our next filtering group.
Get unlimited access to all courses for just $25/month.Become a member