Data Attribute

3 minutes
Share the link to this page
Copied
  Completed
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

Transcript

Hello in this jQuery video I'm going to show you how to set and retrieve data values. So I've got some data Val invoice here day slash name, day slash age, just so you know what a data value is compared to regular regular attributes. So like this for example, is stored on the element itself. Whereas this for example, the data dash just indicates to the browser This is some sort of you know data value and it will store this value in internal storage as you know some sort of location that you can refer to as age based on this element. So any changes we make to it when we make them to it won't reflect in the inspector but using jQuery we can confirm they have been changed. First of all got this no button has been clicked.

Quick wall to name equals Just do a select test, for example, dot data. Now, what you are trying to get hold of a name on the same page as well. A console dot log. Okay, so if I reload, and I go to click me, he gets those buttons. If you want to change a value for like a name, for example. Whether there is change it the only difference you have to make is this returns the value.

If I specify a second parameter, this assigns this value to this data storage element. And I'm going to put that man Reload, go to element. And see it says For one, click me, it doesn't change. Like I said, the data attribute. This is just there. So the browser can initially use these values to store it internally.

But we confirm we can confirm that the values have changed or the value has changed as the name we are modifying by pasting this here, reloading the page going to make up reason this hasn't been updated and we haven't updated this value here. We will need to display so this will retrieve the value again. If I say click me for hot 2626 and change but the name even though on the inspect side, it doesn't change because this is Just initial values, but these are internally stored values by your browser first things set and retrieve data value from an element. If you have any questions, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.