首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<script src="https://cdn.staticfile.org/jquery/2.2.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>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

代码编辑器：

运行结果：