将数据属性添加到DOM
$('div').data('info', 1); alert($('div').data('info')); //this works $('div[data-info="1"]').text('222'); //but this don't work 我在jQuery中创build元素。 之后，我想添加属性“数据”。 他就像和被添加，但在DOM中，这是不明显的，我不能得到该项目，使用
$('div[data-example="example"]').html()
的jsfiddle
使用.data()方法：
$('div').data('info', '222');
请注意，这不会创build实际的data-info属性。 如果您需要创build属性，请使用.attr() ：
$('div').attr('data-info', '222');
jQuery的.data（）做了一些事情，但它不会将数据作为属性添加到DOM。 使用它来获取数据属性时，首先要创build一个jQuery数据对象，并将该对象的值设置为data属性。 之后，它基本上与数据属性分离。
例：
<div data-foo="bar"></div>
如果您使用.data('foo')抓取属性的值，则会像您期望的那样返回“bar”。 如果使用.attr('data-foo', 'blah')更改属性，然后使用.data('foo')来获取值，那么即使DOM表示data-foo="blah"也会返回“bar” data-foo="blah" 。 如果使用.data()设置值，它将更改jQuery对象中的值，但不会更改DOM中的值。
基本上， .data()用于设置或检查jQuery对象的数据值。 如果您正在检查它，并且它还没有一个，它会根据DOM中的数据属性创build值。 .attr()用于设置或检查DOM元素的属性值，不会触及jQuery数据值。 如果你需要它们两个来改变你应该使用.data()和.attr() 。 否则，坚持一个或另一个。
在jquery中，“ data ”默认不刷新：
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);
为了访问一个属性设置的元素，你可以简单地select基于该属性，如你在post（ $('div[data-info="1"]') ）中注意到的，但是当你使用.data()你不能。 为了select基于.data()设置，你需要使用jQuery的filterfunction。
jsFiddle Demo
$('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>
