您的位置：首页 > Web前端 > JQuery

元素的数据存储-jQuery.data()与.data()

2016-05-07 22:25 489 查看

jQuery提供的存储接口

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>jQuery.data()静态方法</h2>
<div class="left">
<div class="aaron">
<p>点击看结果</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h2>.data()实例方法</h2>
<div class="right">
<div class="aaron">
<p>点击看结果</p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type="text/javascript">
$('.left').click(function() {
var ele = $(this);
//通过$.data方式设置数据
$.data(ele, "a", "data test1")
$.data(ele, "b", {
name : "data test2"
})
//通过$.data方式取出数据
var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
ele.find('span').append(reset)
})
</script>
<script type="text/javascript">
$('.right').click(function() {
var ele = $(this);
//通过.data方式设置数据
ele.data("a", "data test1")
ele.data("b", {
name: "data test2"
})
//通过.data方式取出数据
var reset = ele.data("a") + "</br>" + ele.data("b").name
ele.find('span').append(reset)
})
</script>
</body>

</html>

同样的,jQuery也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了

jQuery.removeData( element [, name ] )
.removeData( [name ] )

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航