デモページはこちら

jQueryのattrメソッドとdataメソッドで要素の属性を取得・変更・新規設定します。dataメソッドはカスタムデータ属性のみ取得・変更・新規設定できます。attrメソッドとdataメソッドは機能が似ていますが細かい部分で異なります。

以下のhtmlの構造でテストします。

<ul>
	<li data-name="html_css" data-num="01">HTML・CSS</li>
	<li data-name="sass" data-num="02">Sass</li>
</ul>
<p class="title">最初の要素の属性を変更</p>
<input type="button" class="btn01" value="attr">
<input type="button" class="btn02" value="data"><br><br>
<p class="title">2番目の要素に属性を新規設定</p>
<input type="button" class="btn03" value="attr">
<input type="button" class="btn04" value="data"><br><br>
<input type="button" class="btn05" value="リロードしてリセット">

まず属性の取得です。対象の要素の属性をattrメソッドとdataメソッドで取得して、それぞれconsole.logで出力します。対象の要素が複数ある場合、attrメソッドとdataメソッドは最初の1つの要素の属性のみ取得します。attrメソッドは引数なしで使用することができないため、result01のように取得したい属性名を引数で指定します。それに対しdataメソッドはresult02のように引数なしで使用できるため、全ての属性を所得できます。dataメソッドで引数に属性名を指定して使用する場合、result04のようにカスタムデータ属性の前半部分「data-」は省略します。attrメソッドのように「data-」を含めて指定するとundefinedになります。

$(function() {
	var result01 = $('ul li').attr('data-name');
	var result02 = $('ul li').data();
	var result03 = $('ul li:nth-child(2)').attr('data-name');
	var result04 = $('ul li:nth-child(2)').data('name');

	console.log(result01);
	console.log(result02);
	console.log(result03);
	console.log(result04);
});

//result01
html_css
//result02
{num: "01", name: "html_css"}
//result03
sass
//result04
sass

次に属性の変更と新規設定です。最初の要素では属性を変更します。data-name属性のhtml_cssをjQueryに変更します。注目すべき部分は、attrメソッドでは実際のhtmlが書き換わるのに対し、dataメソッドでは書き換わらずjQuery内にキャッシュされます。ですが変更後のdata-name属性を取得すると、どちらもhtml_cssからjQueryに変わっているのが確認できます。
2番目の要素では属性を新規設定します。data-site属性にblogを指定します。こちらもattrメソッドでは実際のhtmlが書き換わり、dataメソッドでは書き換わりません。ですが新規設定後のdata-site属性を取得すると、どちらもblogが設定されているのが確認できます。

$(function() {
	$('.btn01').on('click', function() {
		var result05 = $('ul').children('li:first');
		$(result05).attr('data-name', 'jQuery');
		console.log($(result05).attr('data-name'));
	});
	$('.btn02').on('click', function() {
		var result06 = $('ul').children('li:first');
		$(result06).data('name', 'jQuery');
		console.log($(result06).data('name'));
	});
	$('.btn03').on('click', function() {
		var result07 = $('ul').children('li:nth-child(2)');
		$(result07).attr('data-site', 'blog');
		console.log($(result07).attr('data-site'));
	});
	$('.btn04').on('click', function() {
		var result08 = $('ul').children('li:nth-child(2)');
		$(result08).data('site', 'blog');
		console.log($(result08).data('site'));
	});
	$('.btn05').on('click', function() {
		location.reload();
	});
});

//result05
jQuery
//result06
jQuery
//result07
blog
//result08
blog