3.3 Working With Attributes
Attributes have become an important tool in modern web applications. They let us adjust the behaviour of HTML elements in the app. In this lesson, I'll show you how jQuery gives us helpful tools for working with attributes.
1.Introduction3 lessons, 17:35
2.Working With Content2 lessons, 15:06
3.Common Tasks5 lessons, 43:01
4.Applying What You've Learned1 lesson, 10:27
5.Conclusion1 lesson, 01:11
3.3 Working With Attributes
One of the things we do on a regular basis is work with data. Now I'm not referring to the content, I'm actually referring to the data that's contained within our elements. More specifically the attributes, both standard attributes as well as custom attributes like data dash, and then whatever name we want to give that attribute. So, that's what we're going to be focusing on in this lesson. Now, we're going to start by using this content object. This is actually this P element, it has an idea of content and we are going to retrieve the value of our title attribute. So let's create a variable called title and to get to that value we use a method called attr. Now I'm going to call this the attribute method because that's just easier to say and whenever you want to retrieve the value of an attribute you pass in the name of the attribute that you want the value of pretty simple there. And let's write that value to the console so we will say console dot log we will pass and title and over on the right hand side in the console we see that this is content. So that is how you retrieve an attributes value using jQuery. Now to set a value it's a lot like the CSS method in that you pass two things to the attribute method. The first is the name of the attribute that you want to set. Now we could change the title attribute if we wanted to by specifying title and then at the new value there but let's not do that. Let's set the hidden attribute, now this is a standard attribute if it is applied to the element then the element is hidden. So we can set this to true. Now it really doesn't matter what we set here because a string value is Is going to add to that hidden attribute to the element. So we can see that element is no longer being shown in the browser but if we set this to a string representation false, we get the same thing. The only way that we can show that element again is to actually pass in a Boolean value as the value of that attribute and then we have that there. But there's also another option. We can just remove that attribute if we want to and to do that we have the remove attribute method. And then we specify the attribute that we want to remove, hidden, in this case. So by setting hidden to true, we hide it. By removing that attribute, we are showing it again. Well now, let's use the attribute method to retrieve the values of this data-nickname attribute that we have applied to these list item elements. Now, I've gone ahead and selected those elements, the selector is the UL with an ID of people. And then it's also selecting the LI elements that have a data-nickname attribute. So this is only the LI elements with a data-nickname attribute. And let's get to the value of them. So let's start by saying var name equals and then we will say elements dot we'll call the attribute method and we will pass in data dash nickname. Now with our work with styling we know that this isn't really going to give us. All of the values of data-nickname. This is going to give us only the value of the first LI element in our elements object. So if we say console.log and then pass a name, we're going to see the value of Jerm in the console. So if we want to work with all of the values here, then we have to iterate over our elements jQuery object. Now we can do that with a for loop but jQuery has something built in for us it's called each. This is a method that is going to execute a function that we provide on each element within our jQuery object. Now this function has two arguments. The first is the index of the elements that we are currently executing on then we also have the element itself. So I'm going to call that variable EL and then we simply do our work inside of this function. Now this element object here is the pure DOM object this is not a jQuery object representing the element that we are working with. So the first thing that we want to do if we need to use the jQuery API is create a jQuery object that wraps around that element. I'm going to call this variable $el. This is just my personal preference whenever I see a dollar sign in my own code as the beginning character of a variable name I know that that has a jQuery object. Especially if I have a similar variable name used elsewhere. So I know that this is a pure DOM object. I know that this is going to be a jQuery object. So we're going to call the dollar function we're going to pass in our element and then we can say, okay now, we can get that name variable. And we can say $el, we'll use the attribute method, and then data-nickname, and then we will simply write that value to the console, so name there. Now the each method does not return our name so let's get rid of that. So now, we are iterating over our jQuery object. We are getting each individual element. We are wrapping that element in a jQuery object, and then using the jQuery API to get the data that we need. So let's get rid of that call to console.log, and now we see. Those values of our attributes. So using JQuery to work with attributes is rather straightforward. You use the attribute method, ATTR, in order to either get or set an attribute. But if you want to remove one, just use the remove attribute method.