jQuery 属性値を取得/設定するサンプル(attr)

jQueryの属性値を取得/設定するサンプルです。
attrメソッドを使用します。

目次

attrメソッド

  • jQueryのattrメソッドです。
  • 属性値を取得します。
  • 属性値を設定します。
  • 属性値とは、htmlのタグで「input type="button" value="ボタン"」とあったとき、buttonとボタンが属性値です。inputは要素でtypeとvalueは属性です。
  • 以下はjQueryサイトのattrメソッドのページです。
    http://api.jquery.com/attr/

サンプル

attrメソッドで属性値を取得/設定するサンプルです。
ボタン1を押すと、attrメソッドでボタン1の属性のvalueの値(ボタン名)を取得して表示します。
ボタン2を押すと、attrメソッドでボタン1の属性のvalueの値(ボタン名)を設定して書き換えます。

ボタン名:

コード

上記サンプルのコードです。
12行目は、IDセレクタ('#b1')で対象を特定しattrメソッドで属性を指定して属性値を取得しています。
21,24行目は、IDセレクタ('#b1')で対象を特定しattrメソッドで属性と属性値を指定して属性値を設定しています。ボタンのvalue値を変更しているのでボタン1のボタン名が変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのattrのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1が押されたときの動作
	$("#b1").click(function() {
		// 属性の値を取得
		var t1 = $('#b1').attr("value");
		$('#sp1').text(t1); //ボタン1/ボタンいち
	});

	// ボタン2が押されたときの動作
	$("#b2").click(function() {
		var t2 = $('#b1').attr("value");
		if(t2==="ボタン1"){
			// 属性の値を設定
			$('#b1').attr("value","ボタンいち");
		}else{
			// 属性の値を設定
			$('#b1').attr("value","ボタン1");
		}
	});
});
</script>
</head>
<body >
<p>ボタン名:<span id="sp1"></span></p>
<input type="button" id="b1" value="ボタン1" >
<input type="button" id="b2" value="ボタン2" >
</body>
</html>

複数の属性と属性値を同時に設定する

attrメソッドで複数の属性と属性値を同時に設定することができます。

コード

5-8行目で複数の属性と属性値をセットしています。
18行目のボタンを押すと、17行目のテキストボックスにmaxlength=5が追加され、nameがtest2に変更されます。

<script>
$(function() {
	// ボタンが押されたときの動作
	$("#button1").click(function() {
		$('#idtext1').attr({
			maxlength:5,
			name:'test2'
		});
		// 設定したnameの値を確認
		console.log($('#idtext1').attr("name")); //test2
	});
});
</script>
</head>
<body >
テキストボックス
<input type="text" name="test1" value="1" id="idtext1" ><br/><br/>
<input type="button" id="button1" value="表示1" >
</body>

attrメソッドの引数に関数を設定する

attrメソッドで引数に関数を設定することができます。

コード

6行目でattrメソッドの2つめの引数が関数になっています。
関数の戻り値が属性値として設定されます。
ここでは14行目のボタンのvalueの属性値がセットされるのでボタン名が変わります。

<script>
$(function() {
	// ボタンが押されたときの動作
	$("#button1").click(function() {
		$('#button1').attr(
		"value",function(){return "ボタンいち";});
		// 設定したvalueの値を確認
		console.log($('#button1').attr("value")); //ボタンいち
	});
});
</script>
</head>
<body >
<input type="button" id="button1" value="ボタン1" >
</body>

関連の記事

jQuery 表示を書き換えるサンプル(textとhtml)
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)




△上に戻る