Answers:
使用.data()
方法:
$('div').data('info', '222');
请注意,这不会创建实际的data-info
属性。如果需要创建属性,请使用.attr()
:
$('div').attr('data-info', '222');
.data()
不行 它没有数据属性添加到DOM,我没有得到的数据属性元素..
.data(key, val)
会创建attr。谁知道为什么不呢?
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():
这是我的问题的关键。非常感谢。
jQuery的.data()做了几件事,但没有将数据作为属性添加到DOM。当使用它来获取数据属性时,它要做的第一件事是创建一个jQuery数据对象并将该对象的值设置为data属性。之后,它实际上与data属性分离。
例:
<div data-foo="bar"></div>
如果使用来获取属性的值.data('foo')
,则它将如您期望的那样返回“ bar”。如果.attr('data-foo', 'blah')
随后使用.data('foo')
来更改属性,然后再使用来获取值,则即使DOM表示,它也会返回“ bar” data-foo="blah"
。如果.data()
用于设置值,它将在jQuery对象中更改该值,但不会在DOM中更改该值。
基本上,.data()
是用于设置或检查jQuery对象的数据值。如果您正在检查它并且还没有它,它将根据DOM中的data属性创建值。.attr()
用于设置或检查DOM元素的属性值,并且不会触及jQuery数据值。如果您都需要更改它们,则应同时使用.data()
和.attr()
。否则,坚持一个或另一个。
在jQuery“ 数据 ”默认情况下不会刷新:
alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());
您可以使用“ attr ”代替实时更新:
alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());
$(document.createElement("img")).attr({
src: 'https://graph.facebook.com/'+friend.id+'/picture',
title: friend.name ,
'data-friend-id':friend.id,
'data-friend-name':friend.name
}).appendTo(divContainer);
使用.data()
只会将数据添加到该元素的jQuery对象。为了将信息添加到元素本身,您需要使用jQuery .attr
或native 访问该元素.setAttribute
$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);
为了访问具有属性集的元素,您可以根据帖子($('div[data-info="1"]')
)中的注释简单地基于该属性进行选择,但使用.data()
时则不能。为了根据.data()
设置进行选择,您将需要使用jQuery的filter函数。
$('div').data('info', 1);
//alert($('div').data('info'));//1
$('div').filter(function(){
return $(this).data('info') == 1;
}).text('222');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
.data()
除非您确实有使用理由,否则请使用.attr()
。