Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, let's talk about how you can manipulate the value of individual attributes on elements. jQuery provides a couple of functions for doing this, and they are all named attr in one way or the other. And you can see in this table the various ways you can call the Attribute function attr, and there is also a function for removing attributes. So there is a couple of ways you can use the Attribute function. First, if you want to retrieve the value of an attribute, you simply call the attr function with the name of the attribute that you want to retrieve.
This is really useful when, for example, you're in a loop and you're using index values to calculate values of an attribute. Say for example, suppose you're looping through a series of images and you're numbering things in ascending order, this little function right here would be used as a callback. So as each attribute is set, you can use a function to calculate what its value should be. Then finally there is the Remove attribute function and that removes an attribute from all of the matched elements in the set.
Now that we've seen how to inspect and change attributes, let's jump over to the code and take a look at some examples. So a couple of things you notice right away. Here in the source code, actually let me put it into Design view really quick. You can see that on the page what I've here is an image that's in the design surface. And what we're going to be doing is manipulating the attributes on this image using the jQuery Attribute function. So let's go back to the Source View, and you can see that that's down here in the body, here is the image, and it's wrapped inside of a link tag.
Let's try a couple of different things. So first, let's just preview this in the browser. You can see that the link, when you click on the image, it's going to go off to the Images folder. Let's bring this up in the browser. So when I click on this, you see that it goes to a much larger version and it's linked directly to the image itself. Suppose however we wanted to have link tags in our page open up new browser windows. We can do that really easily. So how do we do that? What we would do in that case is something like this. Write a jQuery expression that would get all the link tags in a document, and then we would set the attribute for target to be blank.
Now remember, if you were to type this on a link tag in HTML, this means when the user clicks on it, it tells the browser to open the page in a new window. Here, we're just doing this automatically. This will look through all the link tags on a page and set the target attribute to be blank, so that all links will open in new pages. I am going to save that and here we are back in the browser. So we're going to refresh, and now when I click on this, you can see it's showing me the image in a new window. All right, let's try something else.
Let's close this and go back to the code. So let's comment this out. So what I am going to do now is remove an attribute. So I am going to do the same thing. I am going to get a reference to all the link tags and now I am going to remove the href attribute. I am going to save that and go back to the browser. I am going to refresh. So now you can see that the little border has disappeared from the image, because what's happened is I've removed the href from the link, which means that as far as the browser is concerned, this is not a valid link anymore.
So if you want to turn links on and off, this is a way to do it. One last example. Let's go back to the code. So let's try setting attributes as a properties object. So to do that, what I am going to do is write jQuery statement that gets the image, and I am going to write attr. Only this time, I am going to use an object to set the attributes. So I am going to set the source attribute to be a different image and it's going to be images/Spring.jpg.
I am also going to set the Alt tag to be the word Spring. So I am going to save, switch over to the browser, and I am going to refresh. You can see that when I loaded it, it changed the source of the image to the Spring image, and it also changed the Alt tag, although we don't really have the way of seeing that. But that's how you can set multiple properties on a single object. Okay. That wraps it up for attributes. Let's move on.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96740 Viewers
56 Video lessons · 110447 Viewers
71 Video lessons · 79276 Viewers
131 Video lessons · 38021 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.