The role of jquery data ()
The data () method attaches to the selected element or gets the data from the selected element.
Data that is accessed through the data () function is temporary, and once the page is refreshed, the data stored before it disappears.
This function belongs to the jquery object (instance). If you need to remove data stored through the data () function, use the Removedata () function.
Second, the use of jquery data
1, get the value of the additional data
$ (selector). Data (name)
Parameter description
Name
Optional. Specify the name of the data to be retrieved.
If no name is specified, the method returns all stored data from the element as an object.
2. Append data to object with name and value
$ (selector). Data (Name,value)
Parameter description
Selector: An object for which data needs to be appended or fetched.
Name: The parameter is the names of the data.
Value: The parameter is the values of the data.
3. Attaching data to elements using objects
Adds data to the selected element using an object with a name/value pair.
In addition to assigning value by providing name and value, we can also pass directly to another object ("another") as an argument. In this case, the property name and property values of "another" are treated as multiple key-value pairs, and the "name" and "value" extracted from them are copied to the target object's cache.
$ (selector). Data (object)
Parameter description
Object: Required. Specify the object that contains the name/value pair.
Instance
<script type= "Text/javascript" >
$ (document). Ready (function () {
Testobj=new Object ();
testobj.greetingmorn= "Good morning!";
Testobj.greetingeve= "Good evening!";
$ ("#btn1"). Click (function () {
$ ("div"). Data (Testobj);
});
$ ("#btn2"). Click (function () {
Alert ($ ("div"). Data ("Greetingeve"));
});
});
</script>
<body>
<button id= "BTN1" > Add data to div element </button><br/>
<button id= "BTN2" > Get data that has been added to the DIV element </button>
<div></div>
</body>
Example & Description
Take the following HTML code as an example:
<div id= "N1" >
<div id= "N2" >
<ul id= "N3" >
<li id= "N4" >item1</li>
<li id= "N5" >item2</li>
<li id= "N6" >item3</li>
</ul>
</div>
</div>
We write the following jquery code:
var $li = $ ("li");
Storing data to all LI elements at the same time
$li. Data ("name", "Codeplayer");
$li. Data ("desc", "focus on programming development technology sharing");
$li. Data ("url", "http://www.365mini.com/");
var $n 5 = $ ("#n5"); Data can be read through N4, N5, N6
Returns the data corresponding to the key value name
Document.writeln ($n 5.data ("name")); Codeplayer
Returns all data in an object form
var obj = $ ("#n6"). data ();
for (var i in obj) {
Document.writeln (i + "=" + Obj[i] + "<br>");
}
/* Output:
Name=codeplayer
Desc= focus on programming development technology sharing
url=http://www.365mini.com/
*/
Remove the data stored on the N4 with the name of the key named
$ ("#n4"). Removedata ("name");
Although the $li matches 3 Li elements, the read data is only subject to the first LI element N4, so it returns undefined
Document.writeln ($li. Data ("name")); Undefined
var object = {
Name: "John",
Age:18,
Score: [87, 23, 56],
Options: {Gender: "male", Address: "Waterfall Hole"}
};
Set multiple key-value data to all DIV elements in the same way as objects
Value values can be any type of data, including arrays, objects, and so on
$ ("div"). Data (object);
var $n 2 = $ ("#n2")//can read data through N1, N2
Document.writeln ($n 2.data ("name"));//John
Document.writeln ($n 2.data ("s Core ")); 87,23,56
Document.writeln ($n 2.data ("Options"));//[Object Object]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
