hide - Understanding jQuery

It’s interesting to note that the data() method creates an actual attribute and attaches it to the
element. We know that it is theoretically possible to assign a custom attribute to any HTML
element:
Even though this will work, it will not validate. The proper way of doing that would be to prepend
the data-* prefix to the beginning of the attribute name. Let’s try again:
jQuery is already aware of this and it will automatically prepend data-* prefix to each new attribute
created using the data() method. Let’s take a look at the following example:
$(“#another_pet”).data(“wings”, { feathers: 1000 });
This code will create an attribute called data-wings, not wings. The data() method hides all of
that from us, even though that is what happens physically inside the element. The data method
in this example will also assign the JSON containing variable feathers, which equals 1000.
We already know that we can use the data() method again to retreive the object back and store
it in a variable. But you can also access this data by calling the attr(“data-wings“) method.
$(“#another_pet”).attr(“data-wings”);
This is just for reference. You should always use the data() method to retreive the values set using
the data() method.
Storing data inside HTML tags is a helpful technique for developing User Interfaces and other
dynamic applications. Imagine that we created custom attributes and attached them to an
HTML element that represents a User Interface window that does some function and needs to
retain its current state even after being moved to a new HTML element within. the website.
Now imagine that we want to copy and paste that window and integrate it into part of our
website without having to keep track of the variables and the current state of that window in
the global scope of our JavaScript application. Why not simply grab the entire element along
with the custom attributes it contains?
Simply use jQuery’s html() method to grab the window and again paste it into the new location
using the same method. You get the idea, the entire HTML element is moved from one location
into some place holder on the site retaining all attributes containing some type of data.
108