最近做项目,在 HTML 标签里面使用 data-* 的形式缓存信息时,遇到了之前一直没碰到的问题,就重新了解了下 data 的机制。现在整理一下,以供之后参考。
使用 jQuery 的data(name)和attr(name)的区别是:
attr 取值,取的是 DOM 节点中的属性值,写在 HTML 标签里,变动会体现在标签里;
data 取值之后会放入 jQuery 元素对象的缓存 ( dataset ) 中,之后变动也是在缓存中。
jQuery data 取值
简单介绍一下 data函数
data(name)
返回元素上储存的响应名字的数据,可以用 data(name, value) 来设定。
example: $(selector).data(name) ;
如果 jQuery 集合指向多个元素,那么只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。
jQuery.data 是1.2.3版的新功能。
用法:
在 HTML 标签中的 data-xxx 放入数据进行初始化,之后使用 $dom.data(“xxx”) 获取对应的值。
<table>
<tr data-resourceuuid="201612121641078700726">
<td width="30%">2</td>
<td width="35%">3</td>
<td width="30%"><a href="#" onclick="test(this)">点击</a></td>
</tr>
</table>
<script src="../js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(obj){
var $a = $(obj);
var $li = $a.parent().parent();
var resourceid = $li.data("resourceuuid");
console.log("resourceuuid="+resourceid+", type ="+ typeof resourceid);
var resourceid2 =$li.attr("data-resourceuuid");
console.log("resourceuuid2="+resourceid2+", type ="+ typeof resourceid2);
}
</script>
在这里使用 data() 函数获取的值跟预期有出入。
使用 jquery-1.7.2.js 的时候,data() 和 attr() 获取的值不一致。
resourceuuid=201612121641078700000, type =number
resourceuuid2=201612121641078700726, type =string
而使用 jquery-1.11.2.js 的时候,
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
data()和attr()返回的值是一致的
resourceuuid=201612121641078700726, type =string
resourceuuid2=201612121641078700726, type =string
旧版的 jQuery 的 data() 函数和新版的处理逻辑有区别。如果碰到类似的问题,优先考虑jQuery版本问题。
当然稳妥的方式是 使用 attr() 函数,不过相较data()函数来说,效率要低一些,因为每次都会读取DOM节点属性 。
两者的区别主要是:
data() 函数获取key对应的value,如果没在 jQuery 缓存中找到key,则会读取DOM节点的对应属性来赋值。之后再使用data()获取该属性值时,会在缓存中找。相对应的使用data对属性赋值后,缓存中的内容也会变化,但不影响DOM节点的对应属性值。
attr() 函数会直接操作DOM节点的对应属性,重新对属性赋值后,相应的HTML代码也会发生变化。
使用attr()修改 data-resourceuuid 属性:
function test(obj){
...
var resourceid2 =$li.attr("data-resourceuuid");
console.log("resourceuuid2="+resourceid2+", type ="+ typeof resourceid2);
$li.attr("data-resourceuuid", "2134");
}
执行之后,HTML代码发生变化:
<tr data-resourceuuid="123456">
...
</tr>
使用 data() 修改 resourceuuid 属性:
function test(obj){
...
var resourceid2 =$li.attr("data-resourceuuid");
console.log("resourceuuid2="+resourceid2+", type ="+ typeof resourceid2);
//$li.attr("data-resourceuuid", "2134");
$li.data("resourceuuid", "2134");
}
执行之后,HTML代码没有变化:
<tr data-resourceuuid="201612121641078700726">
...
</tr>