Fmpq教程在线工具 - Fmpq教程实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fmpq教程(fmpq.com)</title>	
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
	div {
		margin: 5px;
		background: yellow;
	}
	button {
		margin: 5px;
		font-size: 14px;
	}
	p {
		margin: 5px;
		color: blue;
	}
	span {
		color: red;
	}
</style>
</head>
<body>
	
<div>一个div块</div>
<button>从div块中获取“blah”</button>
<button>将“blah”设置为“hello”</button>
<button>将“blah”设置为 86</button>
<button>从div块中移除“blah”</button>
<p>这个块中的“blah”值<span>?</span></p>
<script>
$(function () { 
	$( "button" ).click( function() {
		var value,
			div = $( "div" )[ 0 ];
		switch ( $( "button" ).index( this ) ) {
			case 0 :
				value = jQuery.data( div, "blah" );
				break;
			case 1 :
				jQuery.data( div, "blah", "hello" );
				value = "存储!";
				break;
			case 2 :
				jQuery.data( div, "blah", 86 );
				value = "存储!";
				break;
			case 3 :
				jQuery.removeData( div, "blah" );
				value = "移除!";
				break;
		}
		$( "span" ).text( "" + value );
	});
})
</script>
 
</body>
</html>