In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery contains data() and attr() methods by using this we will see how to set and get HTML5 data-attributes data. HTML5 has brought lot of interesting changes into html one of the item that is very helpful in client side programming is data-* Attributes provide a way to store custom data on elements.
Jquery easily read and write data using two approaches but there are some differences between them here we can except different outputs so observe the examples carefully.
Example
<!DOCTYPE html>
<html>
<head>
<title>Accessing HTML5 Data-* Attributes Example</title>
</head>
<body>
<div id="attendanceList"
data-name="faruk"
data-age="24"
data-gender="male"
data-attended ="true"
data-object='{"name": "faruk", "gender":"male", "age": 24, "attended": true}'>
Today Faruk Attended to Class
</div>
<h1>How to set /get data-* values using attr() function</h1>
<div id="attrOutput"></div>
<h1>How to set /get data-* values using data() function</h1>
<div id="dataOutput"></div>
<script src="jquery.min.js"></script>
<script>
var $attendanceList = $("#attendanceList ");
var $attrOutput = $("#attrOutput");
var getName = $attendanceList.attr("data-name");
var getAge = $attendanceList.attr("data-age");
var getGender = $attendanceList.attr("data-gender");
var addingOneToAge = getAge + 1;
var getAttended = $attendanceList.attr("data-attended");
var getObject = $attendanceList.attr("data-object");
$attrOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
<br /><br />Age: " + getAge + " = " + typeof (getAge) +"
<br /><br />Age + 1: " + addingOneToAge +"
<br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
<br /><br />Object: " + getObject);
//var setName = $attendanceList.attr("data-name","shaik");
//alert(setName.attr("data-name"));
var $attendanceList = $("#attendanceList");
var $dataOutput = $("#dataOutput");
var getName = $attendanceList.data("name");
var getAge = $attendanceList.data("age");
var getGender = $attendanceList.data("gender");
var addingOneToAge = getAge + 1;
var getAttended = $attendanceList.data("attended");
var getObject = $attendanceList.data("object");
$dataOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
<br /><br />Age: " + getAge + " = " + typeof (getAge) +"
<br /><br />Age + 1: " + addingOneToAge +"
<br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
<br /><br />Object: " + getObject);
//var setName = $attendanceList.attr("data-name","shaik");
//alert(setName.data("name"));
</script>
</body>
</html>
Output Screenshot.PNG)
Use attr() when attribute values need to be accessed as string.
If you see the attr result the name, gender, age, attended are return as string and object is in json formatdata() function
Use data() when you want to data-* values automatically converted to javascript value (number, bool, object, etc.)
Another one is when you need to cache a simple or complex value.
The data result is name and gender are return as string, age is number, attended is Boolean, object is return as object.
0 comments:
Post a Comment