Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
jQuery provides a couple of very useful methods for associating arbitrary data with elements on the page. There are several scenarios where this is pretty useful. For example, you might have an image on a page, and you might want to associate some data with that image such as who the photographer is, and when and where the photo was taken. Or maybe you have a series of div elements on a page, and each one of those divs contain some information about, say, an employee record, and you want to associate some data at runtime such as the employee name and their position and so on.
jQuery makes that really easy, by providing a couple of methods that are used for working with data. So, here on the jQuery site, I'm going to jump over to the API documentation, and that takes me to api.jquery.com. And I am going to search for data, or alternatively, I can also just scroll down here to the Data category. Either one of those works. And here is the method we are going to look at. We're going to look at the data method. Now the data method is used to store and retrieve data associated with elements on the page, and there's two ways of calling it.
Then the other method we want to look at is the removeData method. So, let's go back down here. removeData is how you remove data from an element or set of elements on the page. Again, you can give it the element to remove the data from, and if you want, you can give it an optional string, which is the individual key for the data you want removed. Or if you just don't provide any key name at all, then all of the data will be removed. So, let's jump over to the Example Files folder.
I have got my data_start.html page right here, and this is the file we're going to use to exercise these methods. So, I am just going to double-click on it and bring it up in the browser, and you can see I've a DIV here on the page with some buttons that are going to associate and otherwise exercise our data method. Let's go over to the code and write the code for this example. Here we were on the code for that file. This is my data_start file. Here is my reference to jQuery library.
Here are the buttons down here that are going to trigger each one of these methods. Now, we haven't yet covered how to associate events with elements in jQuery, and we will see how to do that later. So, don't pay too much attention right now to these click functions. How these work will become clear later on in the course. All you need to know is that's how I am going to attach event handlers to each one of these buttons to exercise the methods I am going to be showing. All right! So, for the first one what we're going to do is when the user clicks on the store button, we want to store data with the div.
So, here in the event handler for the store button, let's just go ahead and write some code to do that. We're going to get the element, which is I believe div1, so I'll give it the id for div1. That's this id right here. So, will get #div1, and we will say .data, and we will give it a key, and I'll just use the name key1. Then we have to give it the data we want associated with the div and I'll just give it a number 1234.
We will store another piece of data on a different key, so we'll do the same thing. We will say data. And in this case I'll call it key2, and this time I'll give it a string. I'll just use my name. Okay, so that's how we store data on the div element. What's going to happen is the button will be clicked and then for these two keys, we will just store some arbitrary data, and then our program can use this data however it sees fit. To remove the data when the user clicks on the remove button, we're going to get a reference to our div, and we'll just simply call removeData.
That will remove any of the data that is on the div. Finally, we have to have some way of making sure this is all working. I'm going to have a function here in the show event handler that's going to just display a couple of alerts to see if there's any data. So, we will just say alert. We will get the div here, so that's div1. This time we're going to call the data function, and we're going to pass in the name of the key that we're interested in, but we're not going to pass in any other parameters, because now we want to retrieve the data.
We don't want to set the data. We'll get the value for key1, and then we will just copy this line and do the same thing for key2, and that should be good. All right! Let's go back to the browser and refresh the page and see if it works. I am going to refresh the page here. First I'm going to click show data without having set anything, right? And you can see that when I do that I get an alert that has undefined in it, and another one says undefined. That's because I haven't stored the data yet. Let's go ahead and click store data. Now the data has been stored on the div.
Now let's click the Show button one more time. We can see that's the first piece of data. That's the 1234 that I set. That was the number I supplied, and then the next one is my name. OK. So now let's click the Remove button, so now the data has been removed from the div and when we click this, once again we're back to undefined. OK. Let's do one more thing. Let's show how you can work with data attributes. This is a new feature in HTML5.
Data attributes basically allow you to put data directly on elements inside a page. The way you do that is right here on the div, I'm going to come down here to the div and I am going to give it an attribute. I am going to name it data-key3. I'm going to give it a value of, I don't know, I'm just going to say data attribute. These data attributes, which begin with data-, and this is a part of the HTML5 specification. This allows me to associate data directly within the element, and then these data attributes will automatically show up whenever I try to use the data method in jQuery.
It will read the contents of any data attribute I have on my elements and make them available to me via the data method. Let's try that out. Let's go back up the show function, and let's comment these two lines, put in another line, and this time what we're going to do is I'm going to say alert. We're going to say let's get the ("#div1"). We're going to get the data() method. And now we're going to call it with no arguments whatsoever, because now we want to get all of the data that's associated with the element.
All right, I'll save. Back to the browser, refresh, click on show data, and you can see now that the key3 attribute, which is already in the source code, has a string value of data attribute. And notice that the data- part of the key name is stripped off. That's not part of the actual attribute name; that's just what the browser uses to indicate that something is a data attribute. So everything following the data- is what the actual attribute of the data is when it's put into the data handling method of jQuery.
Get unlimited access to all courses for just $25/month.Become a member