New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using jQuery attribute filters

From: jQuery Essential Training

Video: Using jQuery attribute filters

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.

Using jQuery attribute filters

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 checks to see if the attributes' value is equal to a value that you supply. And then from there, the next one only includes the element in the result if the attribute does not have the value that is listed here. The next two are very similar to regular expressions in JavaScript. This one checks to see if the attribute starts with the string that you give here and this one, the $=, checks to see if the element ends with the value that you have given.

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.

Show transcript

This video is part of

Image for jQuery Essential Training
jQuery Essential Training

49 video lessons · 93753 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 52s
    1. Welcome
      1m 9s
    2. Using the exercise files
      1m 43s
  2. 17m 37s
    1. What is jQuery?
      5m 19s
    2. Downloading and installing jQuery
      2m 20s
    3. Creating a simple jQuery-enabled page
      7m 12s
    4. Overview of features in jQuery
      2m 46s
  3. 59m 57s
    1. Overview of selectors and filters
      2m 9s
    2. Using basic jQuery selectors
      9m 6s
    3. Using basic jQuery filters
      8m 35s
    4. Using jQuery attribute filters
      6m 7s
    5. Child, visibility, and content filters
      9m 59s
    6. Form selectors and filters
      9m 3s
    7. Traversing documents
      9m 1s
    8. Understanding jQuery statement chaining
      1m 42s
    9. Practical example 1: Annotating page links
      4m 15s
  4. 47m 16s
    1. Creating, getting, and setting content
      5m 53s
    2. Manipulating attributes
      5m 43s
    3. Inserting content
      4m 57s
    4. Wrapping, replacing, and removing content
      5m 27s
    5. Working with CSS
      6m 19s
    6. Associating data with page elements
      9m 30s
    7. Practical example 2: Automatic TOC generator
      9m 27s
  5. 33m 6s
    1. Understanding the jQuery event handling features
      2m 4s
    2. Binding and unbinding events
      6m 23s
    3. Convenient event helper methods
      4m 40s
    4. Using the jQuery event object
      6m 21s
    5. Using miscellaneous event features
      4m 38s
    6. Practical example 3: Table striping and highlighting
      9m 0s
  6. 28m 45s
    1. Hiding and showing elements
      5m 23s
    2. Fading elements in and out
      4m 2s
    3. Sliding elements
      4m 3s
    4. Creating custom animations
      5m 58s
    5. Practical example 4: Image rotator
      9m 19s
  7. 25m 30s
    1. Introduction to jQuery UI
      3m 40s
    2. Exploring the jQuery UI widgets
      5m 24s
    3. Exploring the jQuery UI effects
      3m 58s
    4. Using the jQuery UI ThemeRoller
      4m 11s
    5. Downloading and installing jQuery UI
      8m 17s
  8. 47m 49s
    1. Overview of the sample web site
      3m 50s
    2. Using the accordion widget
      9m 14s
    3. Creating an image rotator
      10m 22s
    4. Building hover tooltips
      7m 26s
    5. Making an image selector
      9m 30s
    6. Using the Resizable effect
      7m 27s
  9. 30m 2s
    1. Working with Asynchronous JavaScript and XML (AJAX)
      10m 8s
    2. Using AJAX helpers
      4m 34s
    3. Understanding AJAX data types
      10m 14s
    4. Using global AJAX event handlers
      5m 6s
  10. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.