The syntax is straightforward. Any attribute prefixed with data- will be treated as data storage.

<div class="test" data-foo="bar"></div>

jQuery accesses this data like so…

var data = $( 'div.test' ).data( 'foo' ); // returns bar

Support for the data attribute has been added since jQuery version 1.4.3. jQuery’s implementation is smart enough that it can parse the attribute easily and even determine the correct data type used.

What I have found really useful is the fact that the jQuery can parse JSON syntax and return a JSON object. This makes passing data in PHP trivial, using the json_encode method. We also need to use htmlspecialchars method to escape or convert any quotes in the JSON string.

<?php  
$test = array( 'row' => 1, 'col' => 6, 'color' => 'pink' ); //create array of data you want to pass to jquery
$test = json_encode( $test ); //convert array to a JSON string
$test = htmlspecialchars( $test, ENT_QUOTES ); //convert any quotes into HTML entities so JSON string behaves as a proper HTML attribute.
?>
<div class="test" data-complex="<?php echo $test ; ?>"></div>

The jQuery parses the JSON string like so…

var test = $( 'div.test' ).data( 'complex' ); // returns JSON Object

console.log( test.color ); // outputs pink!

Important to note that this method is also backward compatible with older browsers, so there is no excuse not to give it a go!

if ( $("#mydiv").length ){
  // do something here
}

Briefer again…

if ( $("#mydiv")[0] ){
  // do something here
}

via http://aaronrussell.co.uk/legacy/check-if-an-element-exists-using-jquery/

The alternative is to use an text input or text area which will allow you to use a select method that you can call on a click event, but then you lose the neat formatting that pre tags offer.

So I had a look for a jQuery hack to auto select all the text inside the pre tags. The only complication with this appears to be a cross platform solution as each browser appears to have their own way of selecting text.

Internet Explorer uses createTextRange.
Opera and Firefox use createRange.
Safari uses DOMSelection.

So with a pre tag like …

<pre class='code'>http://poll.fm/11w3q</pre>

… the following code will auto-select the all the text between the tags …

	jQuery( document ).ready(function() {	
		jQuery( 'pre.code' ).click( function() {
			var refNode = $( this )[0];
			if ( $.browser.msie ) {
				var range = document.body.createTextRange();
				range.moveToElementText( refNode );
				range.select();
			} else if ( $.browser.mozilla || $.browser.opera ) {
				var selection = window.getSelection();
				var range = document.createRange();
				range.selectNodeContents( refNode );
				selection.removeAllRanges();
				selection.addRange( range );
			} else if ( $.browser.safari ) {
				var selection = window.getSelection();
				selection.setBaseAndExtent( refNode, 0, refNode, 1 );
			}
		} );
  	} );