jQuery 属性値を取得/設定/削除/画面遷移する(attr)

01. attrメソッド

・attrメソッドとは(属性値を取得する/設定する)

02. 使用例

・属性値を取得/追加する(attrメソッド)

・画面遷移する

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

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

03. removeAttrメソッド

・属性を削除する(removeAttrメソッド)

attrメソッドとは(属性値を取得する/追加する)

.attr(attributeName) // 取得

.attr(attributeName, value) // 追加

attrメソッドは、引数の属性名から属性値を取得します。
1つめの引数に属性を指定し、2つめの引数に属性値を指定すると属性値を追加できます。
→新規の属性の場合は属性自体を追加します。
→属性が既にある場合は属性値を変更します。

属性と属性値とは？

以下にテキストボックスのhtmlがあるとします。(input type="text"です)

このとき属性と属性値は、黄色の箇所が属性でその右横にあるのが属性値です。inputは要素です。

要素・・・input
属性・・・type,id,value,maxlength
属性値・・・text,text1,赤,5

attrメソッドの引数に属性を指定すると、属性値を取得できます。
※id="text1"はIDセレクタとして使用します。ID名はHTML文書内で一意のため。

$("#text1").attr("type");　→　textを取得
$("#text1").attr("value");　→　赤を取得
$("#text1").attr("maxlength");　→　5を取得

attrメソッドの1つめの引数に属性を指定し、2つめの引数に属性値を指定すると、属性値を追加/変更できます。

$("#text1").attr("type","属性値");
$("#text1").attr("value","属性値");
$("#text1").attr("maxlength","属性値");

属性値を取得/設定するサンプル(attrメソッド)

ボタンを押すとテキストボックスの値が変わります。
attrメソッドでvalueの属性値を取得/設定しています。

上記サンプルのコードです。

<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" id="button1" value="ボタン1" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

	$("#button1").click(function() {
		// 属性値を取得
		const str1 = $("#text1").attr("value");
		// 属性値を設定
		if(str1==="赤"){
			$("#text1").attr("value","青");
		}else{
			$("#text1").attr("value","赤");
		}
	});

</script>

10行目は、IDセレクタ(#text1)で対象を特定(1行目)しattrメソッドで属性のvalueを指定して属性値を取得しています。
13,15行目は、IDセレクタ(#text1)で対象を特定(1行目)しattrメソッドで属性と属性値を指定して属性値を設定しています。

画面遷移する

<input type="button" id="button1" value="ボタン1" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

  $("#button1").click(function() {
    // 指定のURLに移動
    $(location).attr("href","http://www.example.com");
    //location.href = "http://www.example.com";
  });

</script>

8行目は、指定のURLに画面遷移します。
9行目は、8行目と同じ意味で指定のURLに移動します。

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

<script>

  $("#button1").click(function() {
      // 属性値を設定
      $("#text1").attr({
        maxlength:10,
        value:"青"
      });
  });

</script>

6,7行目は、maxlengthとvalueの値を同時にセットしています。

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

<script>

  $("#button1").click(function() {
    // 属性値を設定
    $("#text1").attr(
      "value",function(){
        return "青";
    });
  });

</script>

6行のattrメソッドの2つめの引数は、関数です。
戻り値が属性値として設定されます。

属性を削除する(removeAttrメソッド)

.removeAttr(attributeName)

属性の削除はremoveAttrメソッドを使用します。

<script>

	$("#button1").click(function() {
		$("#text1").removeAttr("maxlength");
	});

</script>

4行目は、removeAttrメソッドで属性のmaxlengthを削除しています。

以下はjQueryサイトのattrメソッドのリンクです。
http://api.jquery.com/attr/