An often misused feature of tag elements is using attributes such as alt or class to attach useful data to an element. For example:
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.6.1.js”></script>
<script type=”text/javascript”>
$(function(){
$( “#randomEl” ).attr( “alt” , “1999” );
});
</script>
</head>
<body>
<img src=”usefulImage.jpg” id=”randomEl”></div>
</body>
</html>
Just for the record, we’re aware of the fact that we can assign “1999” directly to the alt attribute, but just suppose you needed to add the string programmatically. There’s a semantic problem with this because the attribute used to store the data isn’t meaningfully associated. Is 1999 a year, a random integer, or what? A better approach is to use jQuery’s .data() method, which stores arbitrary data for an element with a meaningful key. It takes the following form:
$.data( element, key, value );
Or, to retrieve the stored data use:
$.data( element, key );
For example:
<!DOCTYPE html>
<html>
<head>
<script src=””></script>
<script type=”text/javascript”>
$(function(){
$( “#randomEl” ).data( “itemPrice”, “1999” );
});
</script>
</head>
<body>
<img src=”usefulImage.jpg” id=”randomEl”></div>
</body>
</html>
Now it’s obvious that 1999 isn’t a year, but rather a price. HTML5 introduces custom data attributes, where any attribute that is prefixed with data- can be used in a standardized, programmatic way. For example, the following div element contains the data attribute data-age. That’s an alternative for storing information on the client side.
<div id=”person” data-age=”31″></div>
Microsoft contributed to the community three additional plugins that were, for a time, officially endorsed by the jQuery project; Data Link, Template, and Globalization. In a later chapter we review the Template plugin. The Data Link plugin allows two-way binding between objects. In other words, it links the field of one object to another, so changing the value of one field changes the corresponding field on the second object. You can use this feature to simplify communication between a form and an object because it removes glue code. For example:
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.6.1.js”></script>
<script src=”jquery.datalink.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var registration = {};
$( “form” ).link(registration);
// set some default values
$( registration ).setField( “name”, “New User Registration” );
$( registration ).setField( “email”, “i_dont_exist@mail.com” );
$( “form” ).change(function(){
console.log( registration.name + ” ” + registration.email );
});
});
</script>
</head>
<body>
<form method=”post”>
<label for=”name”>User Name </label>
<input type=”text” name=”name” />
<label for=”email”>email </label>
<input type=”email” name=”email” />
<input type=”submit” value=”send it” />
</form>
</body>
</html>
Code snippet is from datalink.txt
In this example, after changing the value of the form, there’s a console.log showing the value of the registration object, which reflects the new changes.
So you’ve seen that jQuery has some shortcuts and methods for working with data, but end users can’t be trusted! The following section explains the ins-and-outs of data validation.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc