Home > Developer > JavaScript
Example of data () method usage in jQuery, jquerydata
This document describes how to use the data () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method can append data to the matching element or obtain data from the matching element.
Syntax structure 1:
Copy codeThe Code is as follows: $ (selector). data (name, value)
Parameter List:
| Parameters | Description |
| Name | The name of the stored data. |
| Value | Any data to be stored. |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> data () function-helper's house </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Add"). click (function (){
$ ("Div"). data ("mydata", "");
})
$ ("# Show"). click (function (){
$ ("Div"). text ($ ("div"). data ("mydata "));
})
})
</Script>
</Head>
<Body>
<Div> </div>
<Button id = "add"> add data to an element </button>
<Button id = "show"> display added data </button>
</Body>
</Html>
The above code can append the name mydata to the matched div element, and return the data with the value of "welcome to the customer home.
Syntax structure 2:
Return the additional data of the specified data name from the matching element.
Copy codeThe Code is as follows: $ (selector). data (name)
Parameter List:
| Parameters | Description |
| Name | The name of the stored data. |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> data () function-helper's house </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Add"). click (function (){
$ ("Div"). data ("mydata", "");
})
$ ("# Show"). click (function (){
$ ("Div"). text ($ ("div"). data ("mydata "));
})
})
</Script>
</Head>
<Body>
<Div> </div>
<Button id = "add"> add data to an element </button>
<Button id = "show"> display added data </button>
</Body>
</Html>
The above code can append the name mydata to the matched div element, and return the data with the value of "welcome to the customer home.
Syntax structure 3:
Use a key/value pair to add data to a matching element.
Copy codeThe Code is as follows: $ (selector). data (properties)
Parameter List:
| Parameters | Description |
| Properties | A key/value pair used to set data. |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> data () function-helper's house </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Add"). click (function (){
$ ("Div"). data ("mydata", {username: "daoliang "});
})
$ ("# Show"). click (function (){
Alert ($ ("div"). data ("mydata"). username );
})
})
</Script>
</Head>
<Body>
<Div> </div>
<Button id = "add"> add data elements </button>
<Button id = "show"> get the data added to the element </button>
</Body>
</Html>
The code above can append the data named mydata as div in key/value pairs, and then obtain the additional data value through the data name and key.
Syntax structure 4:
Attaches data to a specified element as an object.
Copy codeThe Code is as follows: $ (selector). data (object)
Parameter List:
| Parameters | Description |
| Object | An object used to set data. |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> data () function-helper's house </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var mytest = new Object ();
Mytest. first = "";
Mytest. second = "JQuery area ";
$ ("# Add"). click (function (){
$ ("Div"). data (mytest );
})
$ ("# Show"). click (function (){
Alert ($ ("div"). data ("second "));
})
});
</Script>
</Head>
<Body>
<Div> </div>
<Button id = "add"> add data elements </button>
<Button id = "show"> get the data added to the element </button>
</Body>
</Html>
The code above attaches data as an object and obtains the attached data value.
I hope this article will help you with jQuery programming.
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
